Maybe you’re someone who doesn’t have the budget for Cloudflare Image Resizing and wants to resize image on the fly, well there’s an easy way for you to do so. NGINX has a feature called Image resize which is really useful for resizing image on the getgo.
Resizing Server configuration
Place this config inside your server block.
1location ~ "^/(?<image>.+)@(?<width>\d+)$" {
2 # The file root location of your website
3 alias /var/www/static/$image;
4
5 image_filter resize $width -;
6 image_filter_sharpen 95;
7 image_filter_buffer 25M;
8}
image_filter
The module that we’re using to resize the image, you can read more options here nginx.org/en/docs/http/ngx_http_image_filter_module.html#image_filter
image_filter_sharpen
Sets the desired quality of the transformed JPEG images. Acceptable values are in the range from 1 to 100. Lesser values usually imply both lower image quality and less data to transfer. The maximum recommended value is 95. Parameter value can contain variables.
image_filter_buffer
Sets the maximum size of the buffer used for reading images. When the size is exceeded the server returns error 415 (Unsupported Media Type).
Here are some example of NGINX on fly resize in action:
ps open the image in a new tab to see the difference
Original 3648 x 3246
1080 x 960
420 x 373
