I have to confess that image compression is a mystery to me. I have been in the IT industry for many years and I am able to understand complex concepts that lie behind computer logic. However, although I do have a grasp of the basic principles of image compression, it is probably the most mysterious part of my work.
There are many other methods in use but GIF, JPEG and PNG are by far the most popular. Not least because they are all extremely well supported in all web browsers.
GIF uses what is known as lossless compression. This means that mathematic calculations are used to compress the information but when the image is viewed, it looks exactly the same as the original. If you have a simple image such as a logo or text, the GIF comes into its own and provides you with a small file size whilst giving you a great looking image. There is one drawback though. It is limited to 256 colours. So whilst it is true to say it uses lossless compression, it is only lossless for images with 256 colours or less. Photos which can contain thousands of different coloured pixels tend to look awful.
That is what we have JPEG for. JPEG images use what is known as lossy compression. So its calculations always give you an approximation of the original image. You can control the amount of compression. The higher the compression, the more approximate the result. Most photos have so much detail that the naked eye can barely detect the lost information in a JPEG. When you have the right balance between compression and approximation, you can end up with a very small file size and it still looks great.
A more recent addition is PNG which provides lossless compression. It has the advantage that it can handle over 16 million colours so is vastly superior to GIF files. As a result, you will rarely see GIF files these days as PNG outpeforms it at all levels.
WEBP is a new format invented by Google. I say new, it has in fact been around since 2010. It can provide both lossless and lossy compression so it has the potential to replace GIF, JPEG and PNG. Its compression is far more efficient than both and can provide great looking images at even smaller file sizes. However, at the time of writing (October 2018), only Google's Chrome browser fully supports WEBP images. There is partial support in some other browsers but only Google offer full support.
Therefore, its use on the web is very limited. That's a shame because it gives web designers an opportunity to show richer images and reduce the amount of data the user has to download. This is great for mobile users who often have limits on their download data.
I wrote an article recently about how the Internet is slower than one might expect to adopt new technologies and this falls well under that category.
It's such a shame but I am confident that one day soon, you will start to see WEBP images all over the web and it can only enhance the experience for everyone.
The first photo below is a JPEG image and the file size is 68kb in size. The second is a WEBP of the same image and is only 44kb in size. As you can see, they look exactly the same but the second saves a lot of bandwidth.
By the way, if you cannot see the second photo it's because your browser does not yet support it. I hope that one day, everyone will see both images here!
