Why "good" images matter

Images are an important part of web design, they can make or break the user experience. However, not all image formats are created equal. So why does good images matter and how do modern image formats improve the performance and user experience of a website?

First and foremost, before we start talking about the technical aspects of this subject let’s address the other kind of ‘good’ image. I’m talking about the motive. This is a science on its own and is beyond the scope of the blog post as it differs depending on your needs and the audience expectation.

However good images, meaning images of high quality, can greatly enhance the visual appeal of your website. High-quality images can make your website look more professional and will also increase user engagement. However, images that are not optimized for web use can negatively impact the performance of your website.

Large, unoptimized images will slow down your website’s loading time, leading to a poor or even horrible user experience. This is especially true for users with slower internet connections or mobile devices. Slow loading times can lead to increased bounce rates and decreased conversions.

To address this issue, modern image formats like JPEG 2000, JPEG XR, AVIF and WebP have been developed. These image formats offer improved compression without loss of quality, resulting in smaller file sizes and faster loading times. They also offer better image quality than older formats, where compression often added unwanted and unsavory image compression artifacts. This makes them especially suited for photographs and other high-resolution images but at no extra cost the all in all size of the image.

In the age of technology, images play a vital role in how we communicate and consume information. But, as the use of images continues to increase, so does their impact on the environment. By using modern image formats you can not only speed up the loading time of your site but also help reduce the environmental footprint of the web by simply using less bandwidth. Each byte does make a difference.

First, let’s consider the carbon footprint of image-heavy websites. The energy consumption of servers and data centers that host these websites contributes to greenhouse gas emissions. Every single byte sent must pass through a myriad of different nodes on its journey to the end client. All these nodes are powered by electricity and will themself contribute with greenhouse gas emissions of their own.

By using modern image formats that offer improved compression, we can reduce the amount of data that needs to be transferred and stored, ultimately reducing the energy consumption of these servers. And if we pair this with storing our resources closer to the end user in edge networks or CDN-platforms we shorten the journey and reduce the emissions even further.

But how small is smaller? Well while talking to a client for which high quality images were paramount we conducted an experiment showcasing that we could reduce their individual file size from a staggering 8+ MB to a mere 420 kB. And this without reduction in image quality or introduction of compression artifacts.

That is almost 20 times less load on the network, 20 times less data to store on disk and 20 times faster transfer speeds.

But we knew that we could do more. By going further we could get these images, your mileage may vary, to about 250 kB with only minor loss of image quality but at no loss of resolution. To the human eye the images were the same. Only when comparing them side by side and zoomed in there where any discernible changes. But with a file size 32 times smaller I’ll call that a success.

So in conclusion, why does good images matter?

Well first and foremost they are essential for a good user experience. We all want beautiful websites that load fast and look cool and WebP and AVIF and the other will help us achieve that. But secondly, and even more important, by using modern image formats that are optimizing for web use, we can do our part to reduce the energy consumption of servers and data centers, ultimately reducing greenhouse gas emissions and making the web and the world a better and greener place.