blog
Posted On Tuesday, October 13, 2020
Author: David Armitage (Technical Director)
The history of image format use on the internet is quite rich and intricate. Bitmap was the most detailed and high quality that you could get back then, but due to being uncompressed, the size was rarely a viable option for the beige boxes plugged into phone lines to push packets through the wire. Stepping in to fix things at first were JPEG and GIF (pronounced however you want). Both were compressed file formats using what is known as ‘lossy’ compression. This means that though the file sizes were smaller and faster to push through the copper and into your home, they did ‘lose’ information to do so. JPEG was the better of the two with adjustable compression so you could pick your balance between quality and loading speed. While GIF limited you to 256 colors, making it bad for photos, it did offer transparency so your images could blend into the website better and, more famously, allowed for janky animations. Anyone who experienced the early internet will remember the bananas dancing with maracas and burning skulls following you throughout the web, all made possible thanks to the Graphics Interchange Format.
As the internet matured though, so did the image formats it used. JPEG stuck around and continued to evolve as the Joint Photographic Experts Group continued to optimise it and maintain it’s spot as king of pixels on the internet. PNG (Portable Network Graphics) popped up and made a splash with its ability to implement transparency like GIF. But unlike GIF, it had the ability to display up to 16 million colors for the perfect photo. On top of that, PNG uses a lossless compression method, meaning that it can reduce the file size of an image without losing any detail at all. This may sound amazing, but due to the nature of lossless compressions algorithms it means that PNGs will generally be great at compressing simple graphics and drawings with not so much details like graphs, charts, logos and more shape based images while not doing so well with shrinking photos.
In this day and age, image compression is more important than ever. Sure, our network connections are faster than the 90s but, as humans do, we push everything to the limit. With more, larger, high quality images expected to spruce up a website and people still paying by the Mega/Gigabyte on 4G phones, efficiency is still important.
As it stands, the JPEG committee is still keeping pace with their JPEG2000 (.jp2) format which, as you would expect, is forever incrementally improving. You can now pick between lossy and lossless when exporting the file. You can also use progressive encoding which means as the image is sent down the line, visitors will start by seeing a low quality image which improves in quality as it continues to load until complete. And naturally, quality has improved and file size has been reduced so to paint a picture worth a thousand words using as few 1s & 0s as possible.
Microsoft took the reins a bit with their version of JPEG called eXtended Range, which like JPEG2000 has the options for lossless or lossy compression. The main focus of this format is less computational work and memory usage. The advantages of this are mainly seen on phones where their hardware is generally optimised for battery life and not performance. By using less memory and work to transform the datastream into a picture on the screen, this will help both save battery and speed up mobile loading speeds, which as we have mentioned in our articles about mobile friendly websites, can be very important.
Bought to you by a small company called Google, this filetype has been created from scratch with a complete focus on use for websites. It had a bit of a rocky start due to a lack of browser support, but with Firefox and Microsoft Edge now including support out the box it’s growing in glory. Lossy and lossless compression are available options here for you. Lossy compression will get you about a 30% reduction in file size over JPEG while it will trim about 25% more fat compared to PNG when going lossless. Dominating in file size is not the only trick it has up it’s sleeve… it also does all the other main tricks such as transparency and animation too.
I think it’s fair to say that WebP is currently the king of image formats on the internet, ticking all the boxes and boasting better metrics than the rest. And also, though they could never say it for anti-competitive reasons, I find that it generally is best to suck up to the search engine spirits to appease them and reap the rewards. Of course, that’s just conjecture.