11 steps to optimize JPEG

There are not many basic tips for optimizing JPEG, which really give an effect without degrading the quality. In this article I will talk about all these methods and their effectiveness, and also offer some advanced techniques that will reduce your images in size even more.

Immediately make a reservation that the format of JPEG (due to DCT-coding and Huffman tables) initially implies a loss of quality. And even saving in "100%" mode will not eliminate losses. But these losses can be made invisible to the eye or permissible in a particular case of use. Or use some aspect of the format to encode the JPEG with no loss at all.

1. Optimizing for the Web

Basic advice: when saving in any editor (Photoshop, Gimp, etc.) use a separate option "Save for Web". This will make the image compatible across the color palette with all browsers. It also removes some additional information from it (for example, preview images), which is necessary for ordinary editors to quickly view multiple images, but it does not suit browsers (which do not use previews in JPEG images in any way).

Naturally, the actual size of the image should match the maximum size used on the site. The most common mistake in working with pictures on the site: take them in their original form, without bringing them to the desired size. This greatly increases the size of the site and significantly slows down its download.

2. Removing meta information

As a further optimization of JPEG without affecting the color data, you can and should consider various utilities for removing EXIF chunks and comments.

The best utilities in this class will be ExifTool, which is available for all platforms. ExifTool recognizes additional tags (EXIF chunks) of almost all devices and applications and allows them to be removed (or removed or replaced) painlessly for image quality.

Removal of meta information and EXIF chunks is performed outside the main image data (DCT and Huffman tables) and guarantees the preservation of quality.

3. Progressive optimization

The JPEG format contains another interesting feature - the ability to take multiple frames of the image, drawing them sequentially (this is the meaning of the term "progressive" JPEG). Perhaps initially this possibility was used for JPEG animation, but in a particular implementation it found the best application.

"Progressive" JPEGs improve the user experience when downloading large files (a blurry copy is shown first, then it improves in the data flow) and have a smaller size (on average, if the JPEG image is larger than 10 Kb).

Currently, "progressive" JPEG files are supported by all browsers, and there is no reason not to use them. Not always such files will be smaller than usual, but the check for the size of the usual and "consistent" version must be performed while saving or optimizing the files.

The winnings in the amount of "progressive" JPEGs are usually not more than 20% of the original file size.

4. Saving not in 100% quality

100% quality (the maximum quality level in the graphic editor) when saving JPEG-files does not imply the absence of loss. Due to format limitations, each JPEG file represents lossy information. But you can reduce the file size and, in practice, do not increase the net loss. To do this, you need to set the compression ratio in the used graphics editor (or console utility) to 5-10% less than the maximum. For example, with a scale from 0 to 100, the optimal level will be 90-95. With a scale of 1 to 12, the optimal is 11.

As can be seen from the graph above, even using quality 95 instead of 100 usually reduces the size by 1.5-2 times.

5. Using a different format

Not always images in JPEG format will take up less space. Sometimes it's more appropriate to save them in SVG (logos), PNG (with a small color palette) or even in WebP (if all browsers of your users support it).

Even if the WebP format is not fully supported in browsers (at the current moment coverage is around 85%), you can save the image in two formats - the best of the standard (for example, JPEG) and the alternative (WebP) and send users the images that support them browser (specifying this over the HTTP header Accept).

Correct definition of the format of the image can reduce the size by 2-3 times.

6. Optimization for Retina-devices

When using dual-resolution images for the respective devices (with Retina), the following trick can be applied. Since the physically larger image will be displayed in a smaller area, the original image can be saved with a significantly lower quality (and the quality loss will not be noticeable by pixel-by-pixel comparison).

In the example above, a higher compression ratio for an image with a double pixel density gave 30% of the gain in size without apparent loss of quality.

The described techniques allow significantly (sometimes several times) to reduce the size of the JPEG image and apply to them other, advanced optimization techniques.

The article will deal with those techniques that many, most likely, do not know. Not all of them are easy to learn or can be automated, but knowing these techniques will make the images smaller in size and not lose quality. I assume that you already know how to save an image without excessive meta-information in the size on the pages of the site. And even you know what distinguishes progressive JPEG images from conventional ones. Further, additional tools and techniques will be disassembled, which can complement your arsenal of working with images.

7. Optimization for an 8 × 8 lattice

A fairly well-known technique (the author of the method is Sergey Chikyonok), which uses the JPEG feature to compress the image with squares of 8 × 8 (due to the DCT conversion). For optimal image clarity (and lowering its quality without any visible damage to the image), you need to align the boundaries of the image elements along the 8 × 8 grid.

When translated into JPEG format, the image is cut into 8 × 8 squares, which can be independently optimized (with more details - with better quality, monotonous - with less quality). If the details of the image do not coincide with the 8 × 8 lattice, then at the boundary of the lattice there will be a significant blurring of the details (which, of course, can be leveled due to higher compression quality - but this will increase the image size).

The gain from this technique is usually 5-10%.

For automation of technology, it is possible to adjust the displacement of the image boundaries by 1-4 pixels on both axes with the same quality (and saving among the resulting images). Images of a smaller size will be better optimized for an 8 × 8 grid.

8. Selective optimization

A logical continuation of optimization for the 8 × 8 grid will be selective image quality (number of parts) for different image areas. The technique is called Selective optimization and is available in several tools.

In particular, in Adobe Photoshop you need to create one or more image masks for better quality (the rest of the image will be compressed more strongly) and apply it when saving JPEG images (detailed instruction). As a result, with the same quality of detail display, the image size will be smaller.

This technique yields a gain of 3-20% relative to the original image.

9. Optimize color and brightness

Another technique from Sergey allows you to discard color information for those parts of the image that combine black and other colors in fine textures. By reducing the information about the color change, JPEG turns out to be smaller in size, but this does not affect the image quality (it does not matter what color brightness is zero if it is black).

The reception is quite complicated in mastering: you need to switch to the Lab Color mode, then in Channels select colors that reduce the detail (smudge the background), then change the Levels to keep the image color the same. (The full version of the manual is available here).

The gain from such manipulations with the image can reach another 10-15%.

10. Subsampling optimization

As a more automated alternative to reducing color information while preserving the brightness of the image, you can consider the Chroma subsampling technique (sub-selection of brightness). Briefly, if you save the brightness channel in YCbCr-image representation (Y - brightness, Cb - one color (blue), Cr - second color (red)), the differences in colors of neighboring pixels decrease. 1×1 subsampling means no color changes, 2×1 and 1×2 average the information in only one dimension (horizontal or vertical, respectively). 2×2 subsampling averages the information at once in 4 pixels.

In another representation of the scheme, J: a: b (for example, 4:2:2) - the first digit means the width of the averaging area (in this case 4 pixels), the second digit - the number of resulting color values ​​in the first line, the third digit - the number of resulting colors in the second line. Total rows 2 (height of the area - 4 pixels). Thus, the 4:2:2 scheme corresponds to 2×1 subsampling, 4:4:4 to 1×1 subsampling, 4:2:0 to 2×2 subsampling, 4:4:0 to 1 × 2 subsampling.

The last subsampling scheme supports a large number of hardware and application programs. In particular, ImageMagick (through the option -sampling-factor) and GIMP. In terms of effectiveness, the 4:2:0 scheme allows you to save 17%.

11. Optimizing Huffman tables

Huffman coding allows you to represent color information (via different channels) as a compressible table (with loss of information). JPEG files use these tables. The optimal choice of the order of the arrangement of the coefficients in such a table makes it possible to substantially reduce its size. This is also used by various utilities for optimizing Huffman tables.

The most famous is jpegtran, which is included in the set of libjpeg-progs and in a lot of editing utilities and image optimization. A less known version of the optimizer is the libjpeg-turbo library set, which contains improved instructions and additional optimizations for Huffman tables.

And quite little known is the mozjpeg package, which implements all the workings of libjpeg-turbo and some additional performance improvements. Each of the described libraries is backward compatible with jpegtran (and can be used as a full replacement for this utility).

The gain from optimized Huffman tables is 5-20% per image.

The eleven methods described above, without any doubt, will complement your toolkit and will allow you to get smaller images of the same size with the same quality.