How to resize Image using nginx?

This article explains about, image filter module in nginx and also resizes images using that module

Hi all. Today we will see how to use nginx image filter module.

First of all how to get nginx on your machine


sudo apt-get install nginx

windows users for installation refer  here 


Hope you are having a working nginx on your machine. To check nginx installed on your machine type
 nginx -v this shows version of the nginx installed like this  nginx version: nginx/1.10.1


We need to understand the directory structure of nginx.


/etc/
    |
nginx --|
             --- sites-enabled/
           |
            --- sites-available/
           |
            --- conf.d/
           |
            --- lot-more-directories

we need to write the config in  sites-enabled/ directory.

But the best practice is to write config file in sites-available and then create symbolic link to  sites-enabled.

Check Nginx Installed with Image filter module or not by

nginx -V

nginx version: nginx/1.10.1
built with OpenSSL 1.0.1f 6 Jan 2014
TLS SNI support enabled
configure arguments: --with-cc-opt=-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Werror=format-security -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --modules-path=/usr/lib/nginx/modules --with-http_flv_module --with-http_image_filter_module=dynamic --add-dynamic-module=/build/nginx-JCHwcf/nginx-1.10.1/debian/modules/ngx-fancyindex --add-dynamic-module=/build/nginx-JCHwcf/nginx-1.10.1/debian/modules/nchan 

--with-http_image_filter_module=dynamic -> Nginx configured with Image Filter module

if you see like this

--without-http_image_filter_module -> Nginx is not configured with Image Filter Module.

In this case, install this package to have image filter module

  sudo apt-get install nginx-extras

Now let's get to work on config part

Step 1: Create one directory and Put Some images inside static directory

mkdir static

cd static

ls

  1.jpg 2.jpg 3.png 4.jpg 5.jpg 6.jpg

Note: I have 6 images inside static directory


Step 2: Put these lines in /etc/nginx/sites-enabled/static.conf

server {
listen *:8881;

location /static {
alias /home/bala/static;
}

location ~ "/media/(?<width>\d+)/(?<image>.+)$" {
alias /home/bala/static/$image;
image_filter resize $width -;
image_filter_jpeg_quality 75;
image_filter_buffer 8M;
}

}

/home/bala/static -> change this to path-to-your-static-directory.

Step 3: Restart Nginx by

sudo systemctl restart nginx.service

Step 4: Open your Favourite Browser and type this
     

    http://localhost:8881/static/6.jpg

Note: You will see  6.jpg from static directory appears in your browser


Step 5: Lets use Image Filter to Dynamic filter for 6.jpg image

In another tab type this  http://localhost:8881/media/250/6.jpg

Note: Now same  6.jpg image appears with  250 width in your browser.


That's it . It works.

Thanks for reading . Happy Coding !!!

Leave a comment

(Note: Comments are moderated)