How to compress images using ImageMagick

IMages as a percentage of page weight for the Alexa top 10 global web sites 
The proportion of images on websites is getting heavier and heavier. Better picture optimization can increase the website speed. Reduces bandwidth traffic.

1. Scale the image uploaded by the user

You cannot simply use CSS to limit the size of images uploaded by yourself, because the entire large image will be loaded each time the image is loaded. Excessive bandwidth is used and the page loading speed is affected. Scale according to the actual display needs. For example, if you want the image size in your album to be greater than 500x300:

Processing with ImageMagick is simple.

 
Convert-resize "500x300>" input.jpg output.jpg # Keep the image as it is if it is smaller than X to prevent the image from being enlarged or distorted.
 

2. Generate thumbnails of Different Proportions

Generally, thumbnails and previews are provided for photo albums and other applications. These thumbnails cannot be simply limited by CSS. Different Proportions of previews must be generated for each image.

3. Remove redundant information

EXIF information is a series of information collected by a digital camera during the shooting process, which is placed in the header of a well-known JPG file, that is to say, EXIF information is a set of shooting parameters embedded in the JPEG image file format, including the aperture, shutter, ISO, date and time of photography and other information related to the photography conditions at that time, camera brand model, color encoding, recording sound and GPS information. Simply put, it is like the date printing function of a dummies camera, except that EXIF information records more detailed and complete information. However, JPEG image files with EXIF information are slightly larger than common JPEG files. In addition, images processed by software such as PS will contain "program
Comments ". If it is not a professional photography website, the information is useless and can be removed:

 
Convert-strip input.jpg output.jpg
 

4. Adjust the compression ratio

Most of the time, our website does not need such clear images. Adjusting the jpg image compression ratio in a proper amount will reduce the image size, and the naked eye will not tell the quality of the compressed images. Generally, 75% is the best proportion.

 
Convert-quality 75% input.jpg output.jpg
 

The preceding steps can be completed at one time:

 
Convert-resize "500x300"-strip-quality 75% input.jpg output.jpg
 

The above are all processing methods for JPG format. The following describes the processing of BMP, GIF, PNG, and other formats.

Convert BMP to JPG directly. Then follow the above method.

While GIF and PNG seem to be somewhat special. Some features of GIF (animation effect, transparency, etc.) are not available in JPG. You can select to convert or not to convert them according to the actual situation. If you convert them to JPG, you only need to take the first frame as follows:

 
Convert-format JPG input.gif input.jpg
 

PNG can also be compressed by reducing the color Quantity of PNG images. However, the image compressed in this way can be obviously distorted and displayed in a jagged state.

For a PNG Image in the real world (usually a photo), it is usually converted to JPG first, and then compressed through the above method.

Note that when converting a transparent or translucent PNG image to a jpg image, the transparent part turns black... We recommend that you do not convert your profile picture to JPG .. Ugly ~~~
My avatar is very poisoned ..

Image Extension

It is found that most websites prefer to convert user-uploaded images (profile pictures, photo albums, etc.) into a specific format (usually JPG ). The potential drawback of doing so is that it performs implicit Format Conversion Based on the extension when processing with software such as ImageMagick.
I personally think it is more flexible to process images without the extension.

Note: It is easy to rewrite the above command line with mini_magick into rails. In essence, mini_magick calls the system command line ~~

Links:
This article describes how to process user-uploaded images and Process website images (headers, banners, etc.) in detail in chapter 10 of "even faster websites:
Http://www.graphics.com/modules.php? Name = sections & OP = viewarticle & artid = 756

More ImageMagick usage:
http://www.imagemagick.org/script/index.php