Optimizing images

Image Content

The effectiveness of image compression depends a lot on the content of the image. If you take care during the creation of the image you can maximize what the compression algorithm can do.

Noise

Before we understand how noise affects image compression, we need to understand how image compression works. Image compression works by finding areas of pixels where their colors are similar. If it can predict the color of the next pixel, it doesn't have to save that pixel. This is a simplified explanation, but it works well enough for our needs.

Noise, being random, causes this prediction mechanism to fail requiring more pixels to be saved. Here is an example that demonstrates the effect of noise. Both of these images contain the same number of black and white pixels. In the first image the white pixels form a contiguous region, in the second image the white pixels are randomly placed.

In this demonstration the image with contiguous pixels is 32x smaller than the one with randomized pixels. Taking care to prevent noise in your image or using a denoising filter in your favorite image editing application can greatly improve your image compression.

Color

Color can have a similar effect on image compression. The color black (#000000) compresses better than any other color. For this example we have two images of a solid color one cyan the other black.

Color can affect file size in other ways, too. By reducing the number of colors you can reduce the file size. In this next example a posterize filter was added to the photo to reduce the number of colors. This works by increasing the size of the regions of the same color allowing the prediction to be more accurate in those regions.

We can take this to an extreme by switching the image to indexed mode. Some image formats have special compression modes for indexed images. This can cause significant degradation of the image quality so it may not work for all situations.

Size

Lastly, the size of the image also a factor. The more pixels there are the bigger the file size will be. Up to now the images have been sized bigger than necessary to demonstrate the effect discussed, but resizing the images to be only as big as necessary will also have a huge impact on file size.

Diving deeper into the ways that image size can affect file size, we can look at rectangular images. The following images contain the same number of pixels, but the long image compresses better than the tall image. This is because image compression works on a row-by-row basis, meaning that it has to start over at the beginning of each row.

File Type

Once you've finalized the content of the image, you can move on to choosing the correct file type. The file type can have an effect on both the file size and the quality of the image. So choosing the correct file type is very important.

Vector vs Raster

Up to now we've only talked about raster images. Raster images are images that made of pixels arranged in a grid. This may be your only choice if your image is a photo, but if your image is an illustration you may have another option.

Vector images are images that use curves and lines to draw shapes. We haven't covered vector images in this guide, but they can provide better quality and smaller file sizes in some circumstances.

Lossless vs. Lossy

Image compression can generally be divided into two categories lossless and lossy. Virtually all file types can be used with both lossless and lossy compression.

Lossless compression aims to keep the image exactly like the original. Formats that use lossless compression are good for general purpose image compression, but they aren't as small as ones that use lossy compression.

Lossy image compression uses visual tricks to discard data that you probably wont notice. When used correctly, this can greatly reduce the file size. These types of compression are limited to specific types of images. If not used correctly, lossy compression can result in a poor quality image.

State of the art compression

Whenever possible you should use a state of the art file format like JPEG XL or AVIF. These formats are growing in support and offer vastly improved compression compared to conventional formats like JPEG and PNG.