How to Resize Image on the fly with NGINX

By Darren Nathanael on Wed, May 25, 2022 / Updated at Tue, Feb 6, 2024

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

Original Image

1080 x 960

Resized to 1080

420 x 373

Resized to 420