{"id":3165,"date":"2014-10-19T18:15:27","date_gmt":"2014-10-19T23:15:27","guid":{"rendered":"http:\/\/neosmart.net\/blog\/?p=3165"},"modified":"2014-10-19T18:21:04","modified_gmt":"2014-10-19T23:21:04","slug":"nginx-wordpress-images-with-ngx_http_image_filter_module","status":"publish","type":"post","link":"https:\/\/neosmart.net\/blog\/nginx-wordpress-images-with-ngx_http_image_filter_module\/","title":{"rendered":"Dynamically resizing WordPress images on nginx with ngx_http_image_filter_module"},"content":{"rendered":"

Ever notice that image galleries on WordPress.com load faster than those on your own? WordPress.com can serve dynamically-resized images on-the-fly to improve page load speeds and create pretty-looking image galleries. You can achieve this on your own server too, with a few simple tricks in your nginx.conf, taking advantage of URL parameters WordPress appends to image uploads and the nginx libgd-based ngx_http_image_filter_module.<\/p>\n

WordPress’ dynamic image sizes serve two main purposes: aside from resizing the source images to a smaller size, it also lets you crop rectangular images to a thumbnail without completely skewing the aspect ratio and butchering the result.<\/p>\n

<\/p>\n

Let’s take an example WordPress gallery, created using the JetPack galleries plugin. We’re taking a mix of square (logos) and rectangular (photos) media, and framing them in circles via CSS. On a properly-configured web server, it should show up like this:<\/p>\n

\"Correct<\/a><\/p>\n

 <\/p>\n

But without dynamic image resizing, the original aspect ratios can be completely skewed, and you’ll get something like this instead:<\/p>\n

\"Skewed<\/a><\/p>\n

 <\/p>\n

Let’s take a look and see what is happening. When WordPress generates the blog post, the images are being created with query string arguments appended… “What’s that,” you say? “Query string arguments for static images?!” Indeed:<\/p>\n

\/blog\/wp-content\/uploads\/Attachment-1.png?w=202&h=202&crop=1<\/pre>\n
As you can see, WordPress is requesting a cropped\u00a0version of the originally-uploaded file. On a normally-configured webserver, query arguments are ignored for attachments like this. But on WordPress.com’s servers, they’re interpreted by an image processor, and resized before being served. We can see proof of this by checking the headers for a request to a resized image on a WordPress.com blog:<\/p>\n