Image compression, there are millions of articles on the web about it. Why am I suddenly interested in image compression? Well, because I want to share some travel photos on this blog, but the raw image size is a problem. Image size is a problem, in this day and age? Larger size means more storage space on the server and more bandwidth to distribute the content. Storage is cheap now, but the bandwidth is really expensive. In fact, bandwidth is a huge cost for social media companies. So much so that only “high value” content is distributed in high resolution.
What affects the size of the image
Image is just many colored pixels, there are three things that determine the size of an image.
- resolution (how many pixels are in the image)
- color count (how many colors)
- compression algorithm (the way pixels are stored, “pixel one is red, pixel two is red, pixel three is red” takes more space than “pixels 1 to 3 are red”)
reduce the resolution
Modern cameras capture photos at very high resolutions, sometimes exceeding 4k. But such a high resolution is rarely necessary on a website. That’s because most people aren’t using a 4k monitor to browse the web. And even if they are, the image won’t be full screen. In my tests, resizing the image to a tenth of the resolution reduced the size to around 15%.
reduce the colors
Most image formats use a color palette to represent different colors. For a black and white image, the palette consists only of black and white, one bit for each pixel. The classic 8bit palette has 256 colors, one pixel using one byte of space. Color quantization is very important for printing, because the available paint colors are limited. There are special dithering algorithms to make the best use of the limited color palette. However, in modern image formats, the color palette is large enough by default. Quantizing image color does nothing to file size.
compression algorithm
In the web world, the go to formats are PNG for lossless images, JPG for camera captured images. They are well supported and work… okay. But they’re old, JPG is 33 years old! A lot has happened, and we have better image compression algorithms now, just not as well supported as JPG. For a personal blog, I think it’s okay not to support older browsers :P
Anyway, after converting a JPG image to avif, the size is down from 3.1MB to 185KB! Resizing the image from 4K to 460x345 gives 24KB but still viewable result. I also found that avif is very good at “smoothing” out small glittering spots like the reflection of water droplets on leaves, images with linear color transitions compress better than images with many high contrast sharp edges.
Conclusion
If you don’t care about old browser compatibility, reduce the resolution and avif is the way to go!
