Writing in the front

Today I wanted to write an article on how to use Nginx to generate thumbnails, but I couldn’t think of a title for a long time. One of my readers helped me come up with this topic. The reader recently went out for an interview, and the interviewer asked Nginx how to generate thumbnails. Don’t say, is so coincidence!! Blunt this title, also want to write a dry goods full technology good article!!

Nginx can be used for load balancing, traffic limiting, caching, blacklisting, and grayscale publishing.

There is, I opened the message function through the small program, small partners if there is any good advice and opinions on the article, or when reading the article, there are any questions, you can leave a message in the message area!

Generate thumbnail schema

In order to browse the pictures that match the resolution of the mobile phone, improve the access speed of the APP and reduce the user’s mobile phone traffic, it is necessary to generate thumbnails from the pictures. Here are the following solutions.

  • A. Generate multiple thumbnails for news release – can’t match images of various sizes
  • B. If the corresponding thumbnail does not exist, use programs such as PHP or Java to generate the corresponding thumbnail – programmer assistance is required
  • C. Use the built-in Nginx module to generate thumbnails – o&M is complete
  • D. Use Nginx+Lua to generate thumbnails

After a lot of consideration, we decided to use solution C, which uses the built-in Nginx module to generate thumbnails.

Nginx generates thumbnails

Configure Nginx

–with-http_image_filter_module. For example, we can install Nginx with the following parameters:

./configure --prefix=/usr/local/nginx-1.19.1 --with-http_stub_status_module --with-http_realip_module --with-http_image_filter_module --with-debug
Copy the code

Next, modify the nginx.conf configuration file, or place the following configuration in the corresponding server block of the nginx.conf file.

location ~* /(\d+)\.(jpg)$ {
	set $h $arg_h; Get the value of the h argument
	set $w $arg_w; Get the value of parameter w
	#image_filter crop $h $w;
	image_filter resize $h $w;Generate thumbnails based on the given length and width
}
location ~* /(\d+)_(\d+)x(\d+)\.(jpg)$ {
	if ( -e $document_root/The $1.$4 ) { # Check whether the original image exists
		rewrite /(\d+)_(\d+)x(\d+)\.(jpg)$ /The $1.$4? h=$2&w=$3 last;
	}
	return 404;
}
Copy the code

Access to images

Once configured, we can access images in a manner similar to the following.

www.binghe.com/123_100x10….

When we type the above link into the browser address bar, Nginx does the following logic.

  • First check if the original 123.jpg exists, return 404 if it does not (if the original image does not exist, then there is no need to generate thumbnails)
  • Jump to www.binghe.com/123.jpg?h=1… H =100 and width W =10 are carried to the URL.
  • The Image_filter resize directive generates thumbnails based on the h and W parameters.

Note: When using Nginx to generate equal-scale thumbnails, there is a rule of small size,For example, if the original image is 100*10 and you pass in 10*2, Nginx will generate a 10*1 image for you. Generating thumbnails is just one of the image_filter features, which supports four parameters:

  • Test: Returns whether this is really a picture
  • Size: Returns the size of the image in JSON format
  • Corp: Take a portion of the image, starting at the top left corner. If the size is smaller, the image will be clipped
  • Resize: Scale the image to equal proportions

Pros and cons of Nginx thumbnail generation

Advantages:

  • Various scale pictures can be generated according to the passed parameters
  • Does not take up any hard disk space

Disadvantages:

  • Consumption of CPU
  • The number of visits will bring more burden to the server

Advice:

Generating thumbnails is a CPU intensive operation. If you have a high volume site, it is best to consider using a program to generate thumbnails to hard disk, or add a Cache or CDN to the front end.

Ok, that’s enough for today! Leave a comment below. Don’t forget to give a look and forward, let more people see, learn together progress!!

Write in the last

If you think glacier wrote good, please search and pay attention to “glacier Technology” wechat public number, learn with glacier high concurrency, distributed, micro services, big data, Internet and cloud native technology, “glacier technology” wechat public number updated a large number of technical topics, each technical article is full of dry goods! Many readers have successfully moved to Dachang by reading articles on the “Glacier Technology” wechat official account; There are also many readers to achieve a technological leap, become the company’s technical backbone! If you also want to like them to improve their ability to achieve a leap in technical ability, into the big factory, promotion and salary, then pay attention to the “Glacier Technology” wechat public account, update the super core technology every day dry goods, so that you no longer confused about how to improve technical ability!