Jun 15, 2018

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.

Jun 5, 2018

13 Steps of Ultimate PNG Optimization

Approximately a quarter of images on sites - this is PNG. And understanding the format and means of optimizing it will allow you to make websites faster by reducing the size of PNG images. We talk about the features of this format and will offer some more techniques that will reduce your images in size.

PNG-format assumes no loss in quality when saving images (yes, it allows to have a full-color image with translucency WITHOUT loss of quality). But to maintain this advantage, you do not need to lose in size. In some cases - for example, gradient or low-color images - PNG is the most profitable format in terms of size.

1. Choosing the right format

Not always PNG is the optimal format for representing an image. If the number of colors in the PNG is very large, then it is better to use the JPEG format. But this is not always possible due to the technical task: for example, it is required to provide transparency or translucency for compatibility with the background.

In this case, it is worth considering the option of combining a PNG image with a background for saving in JPEG format, or generating a set of images (with different backgrounds) - again for the final save in JPEG format. In most cases, the full-color image in JPEG will be 2-3 times smaller in size than the PNG-equivalent.

2. Removing chunks

There are a huge number of PNG optimization programs, and most of them do roughly the same thing: they select different filter sets to reduce the size of the main, color information. But there are a few more approaches to reducing the size of PNG images, which also need to be kept in mind.

The first is: removing garbage in meta-information (unused chunks) and in the palette used (unused colors). Important are IHDR, IDAT and IEND-chunks. All the rest contain auxiliary information (but, for example, removing the gAMA chunk resulted in "spoiling" of images in the Safari browser of older versions). Chunks with comments, the date of change and color profiles (for printing) can be safely cleaned out: for the browser is a useless set of characters.

3. Choosing the Right Palette

There are 6 variants of PNG format for different tasks: gray palette, color palette (256 colors), full color palette, and additionally each option can include transparency. Choosing the right palette and transparency allows you to reduce the size of the PNG image. If you have less than 256 colors, always choose PNG8 and watch for transparency (some editors do not know how to preserve translucency for PNG8).

If the image contains only grayscale, then your choice is Grayscale.

If the image has more than 256 colors - try converting it to PNG8. Perhaps, the degradation of quality will be invisible. If there are too many colors, consider the option with JPEG format. If this is not possible, then choose TrueColor and watch for transparency.

4. Optimization of the alpha channel

A number of tools allow you to use non-indexed alpha channel, and full translucence, preserving the original palette (for example, in 256 colors). This significantly reduces the size of the image.

Additionally, you can use Dithering to smooth out a small number of colors when translucent.

5. Optimization of filters

The main "workhorse" of PNG optimization is choosing the right set of filters for each row (the PNG image is coded in line), which will provide the minimum overall image size. Filters in PNG are fairly simple: they predict adjacent pixels and represent, in fact, an enhanced version of data compression.

In the optimization of filters, almost all PNG optimization utilities will help: this is pngcrush, and optipng, as well as all online image optimization services. It makes sense to apply filter optimization only after going through the previous steps.

6. Optimizing compression

Almost the final point where you can still "squeeze" PNG is compression. Thanks to the open format (unlike GIF), PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. Different utilities optimize images in different ways, and optimization due to compression should always go in the finale: after selecting a palette, transparency and optimization of filters. Although sometimes less optimal sets of filters can give a smaller file in combination with another compression.

Optimization of data compression is used by the following utilities: optipng, TruePNG, PNGwolf, AdfDef, PNGout.

7. WebP: a lightweight alternative

The WebP format due to a larger number of filters and a more adaptive approach to the indexed palette and transparency makes it possible to significantly reduce the size of PNG images. It's worth noting that WebP is not supported by all browsers, so the PNG alternative.

The PNG format assumes no loss in quality when saving images. But in some cases, storing with distortion (Dithering or posterization) allows you to get images that are almost identical to the original, but are essentially smaller.

8. Posterization, palette and grayscale

Posterization (not to be confused with pasteurization) can reduce the number of colors in the PNG file due to some adaptive algorithm (for example, mediancut or k-means). Usually the reduction in the number of colors is 2-3 times invisible to the eye, but reduces the image size by 20-50%.

The most famous pasteurization tools are Photoshop, pngquant, pngnq and TruePNG.

Choosing the right palette (for example, using only grayscale or only 256 colors) - if it is not already done - also significantly reduces the image size (each pixel is encoded 1 byte instead of 3).

9. Mask of transparency

A little-known technique, well described by Sergei Chikyonok. The essence of it is to remove the color information (nullification) from completely transparent pixels. This reduces the actual number of bytes in the IDAT chunk and allows the use of more optimal filters.

Fortunately, some PNG optimization utilities, in particular TruePNG, allow you to do this automatically.

10. Dithering

More interesting technique from Sergey, applicable not only to PNG images. The essence is to select areas of the image that can be blurred (apply dithering) while preserving the visual quality (or rather, selecting areas of the image for which blur can not be applied).

This optimization technique is not a technique with loss of quality, but the final image will be different from the original one, so it is important to choose such parameters in which quality loss will be minimal (visually).

Dithering allows to increase the compressibility of the image by filters (by discarding some color information). Fine tuning saves up to 20% of the image. In the automatic version, Dithering is not yet applicable, but your favorite image editor will do this with masks and selective filters for the PNG image.

11. Interlacing

The interlacing technique is similar to the progressive JPEG: at each pass the PNG-image gets more information, and the details of the image begin to "manifest".

Graphical editors, as well as console utilities (for example, convert), allow the use of hypertext (by lines or colors) for PNG images. In some cases, the gain from this method can be 5-10%.

12. Heuristic filtering

The main approach for optimizing the presentation of color information in PNG is a complete search of the filters for each line of the image, and the selection of the most optimal set for the image as a whole. But since filters can use the color information of the previous line, the number of options even for a small image (100 lines) is significant. Therefore, all utilities make some or other assumptions on the effectiveness of filters and reduce the overall search.

Heuristic (predictive) algorithms can provide more effective application of filters, based on the features of this image. This approach is implemented, in particular, in the utility pngwolf. Using filter heuristics in conjunction with other PNG filter optimizers reduces the resulting image size.

13. Zopfli for compression

The final point where you can still "squeeze" PNG is compression. PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. It makes sense to use the most advanced of them - it's zopfli (bzip2 is not supported due to the time of unzipping, and h.264 is supported only in WebP).

Using zopflipng to compress PNG files (not to be confused with "compression on the fly", which is used for text files) reduces the current color information size after the most effective palette and the most effective filters are applied (and disable archiving in other optimization utilities). This will reduce the PNG size by another 3-7% relative to compression in other formats without significantly increasing the optimization time.

The most of described techniques (except manual color and dithering image transformation) are applied to images in Airee Cloud automatically depending on selected image optimization level.