Image optimization, delivery and CLS

Last December, we released our new company website after several months of design and development. It was a significant step forward for our company. However, like any other revamp, there are still some things missing from our previous version.

Currently, one of the things we are working on is image optimization and delivery.

Images are something that is overlooked by many developers and agencies building their products, but it's key for a faster and more visually pleasing web browsing experience. Here is a compendium of learnings we made from our experience working with Naiz, a digital newspaper.

Goals

Image optimization is essential, as it provides positive business outcomes like improved SEO, faster load times, and a better user experience overall.

Our goal when serving images from our sites should be to:

• Compress the images so that they are optimized for the web.
• Deliver the right resolution for the screen the user is browsing.
• Make the images cacheable and serve them through a CDN.

• Make Google happy by reducing the CLS*.

• For the uninitiated: Cumulative Layout Shift (CLS) is a crucial metric in SEO that measures the visual stability of a webpage as it loads. Introduced by Google as part of the Core Web Vitals, CLS evaluates unexpected layout shifts that occur during the page loading process.

Image optimization

Most web browsers nowadays support the WebP or AVIF image formats, so there is no excuse for not serving images in these formats. We just need to offer a fallback in case the browser doesn't support them for any reason.

When converting to WebP, one thing that we learned is to pay special attention to compression and image metadata. The cwebp library provided by Google has a default compression that is too aggressive, which might result in blurry images. Compression is measured by the quality parameter. While 75 out of 100 is the standard value, we prefer a value of 85 for most of our projects.

Additionally, we have found that during WebP conversion, all metadata is removed by default. While it may be beneficial to remove some metadata to reduce image size, it's important to note that some metadata contains information about the color, such as the ICC color profile. Removing this information can cause images to lose their vibrant colors. We recommend not removing the metadata that affects the color representation of an image.

Cache and CDN

Caching images is easy nowadays. We recommend using Cloudflare or CloudFront (depending on your needs, limitations, and your tech stack) in front of your web applications and configuring them to cache images in their CDN.

With Cloudflare, this is done almost automatically when you configure your main domain with them. If you want to use CloudFront, you might need to serve your images from another domain or subdomain to separate your content pages from the image/asset URLs.

Right image size for the device screen

Why would you have a user download an image suitable for a 4K desktop display if they are navigating on a Full HD mobile phone? The size difference between different image versions is very noticeable.

With modern HTML is easy to make the user download the proper image using the picture element.

This is an example from one of our projects were we deliver different image formats (webp, avif, jpg) and sizes (mobile, desktop) using the picture element while we keep the maximum compatibility.

<picture>
  <source
    sizes="(max-width: 480px) 480px, 100vw"
    srcset="/image_mobile.webp 480w, /image_desktop.webp"
    type="image/webp"
  />
  <source
    sizes="(max-width: 480px) 480px, 100vw"
    srcset="/image_mobile.avif 480w, /image_desktop.avif"
    type="image/avif"
  />
  <source
    sizes="(max-width: 480px) 480px, 100vw"
    srcset="/image_mobile.jpg 480w, /image_desktop.jpg"
    type="image/jpeg"
  />
  <img
    alt="Alt text"
    loading="lazy"
    width="300"
    height="200"
    sizes="(max-width: 480px) 480px, 100vw"
    src="/image_desktop.jpg"
    srcset="/image_mobile.jpg 480w, /image_desktop.jpg"
  />
</picture>

When the device viewport size is 480px or less, we display a smaller image, and the browser can choose the best image format to load.

While this might seem sufficient, there is one more thing to consider: the device screen is not the only factor that matters. The pixel density of the device is almost as important as the screen size. A 4K 15-inch display will require a much larger image to render it at the highest quality possible compared to a Full HD display with the same screen size.

We will address this topic separately in an upcoming blog post.

What about CLS?

Finally, you want to make Google happy. Most of our clients are concerned about their scores in PageSpeed Insights because they are related to how Google ranks your site.

CLS is the effect of HTML visual elements moving as the contents on the webpage load. To prevent CLS, all elements should have their vertical space assigned. This applies to images as well. While this can be achieved through CSS (which is the normal way to do it), Google prefers that you also define the height and width parameters of your images in their HTML elements.

It is not that important what values you are using as height and width (as you might have different sizes defined depending on your CSS media queries), but rather that you respect the aspect ratio of the image.

You can find more information on CLS here.

We will be expanding on this subject more in future blog posts. In the meantime, you can use tools like Google's Lighthouse to audit your own site!