Having an algorithm trim the size of an image by 80% sounds complicated. But there's an easy explanation to most parts of the process. This article will help you understand how The Image Optimizer works — and why optimizing images has a ton of benefits.
There are two things that make image optimization possible:
Images are made up of millions of pixels and other data (i.e. the device and settings used to take the picture, sometimes even the precise location).
Some of the pixels and data are not necessary for people to see the image clearly. They can be either stored more efficiently, partly or fully discarded.
Here two most common ways image compressors optimize files by fully removing the data:
Getting rid of metadata like the time a picture was taken, the camera setting, and more.
Removing unnecessary image data. We mentioned one example in our guide to optimizing website images — when your PNG image doesn't need the transparency layer, there might still be residual data about it in your file. Removing it saves precious kilobytes.
One of the best examples here is combining data about several pixels into a more optimal format. For reference, the behaviour here is similar to saying “This pixel is blue.” five times, compared to “These five pixels are blue.” It's a more efficient way of saying the same thing — and it uses considerably less data. And considering even small images have over 100,000 pixels, “five” is a very conservative example. Usually, this goes into tens or even hundreds of pixels of the same colour.
The other common method is reducing the number of colours, which is often paired with the above. Some colour shades in e.g. a 16 million colour space are indistinguishable to the human eye. Image compressors can often say “okay, these X pixels are so similar that we can confidently convert them to this one colour.” And then, you guessed it — it's back to the example above. The file can say that “These pixels are all colour X”, rather than listing separate colours for hundreds or even thousands of pixels.
Coincidentally, the two paragraphs above describe this process. Groups of pixels get approximated to a colour that represents them best, and a single pixel of that colour is used instead of e.g. a 2x2 square (when halving the resolution).
You can see that this is great for reducing the file size. A 1000px wide file has four times fewer pixels than a 2000px wide image. Of course, the risk you're running here is that at some point, the approximation removes a level of detail.
This is also why the opposite scenario leads to “pixelated” images. When you resize an image without using a “clever” upscaling tool, your operating system uses crude approximation. This expands a single pixel into four (or more) extra pixels. As a result, you generally get an abundance of pixels of the same colour when they're not necessary anymore.
Typically, image compressors use generic settings that work for every scenario. But not everyone is compressing website images. Sometimes people need a lighter file for their email, or to upload in a chat with customer support due to their limitations.
The Image Optimizer was made specifically for websites and prioritizes compression methods optimal for website images. It automatically detects the optimal file type, removes unnecessary data in ways similar to these described above, and compresses your image to get the optimal size.