How to optimize image delivery

Performance is key for all sites. Not only does it improve SEO, but it increases sales and customer happiness. But companies must recognize the challenges that are involved. In this series, we’ll go through the main areas of site performance, how you can improve the performance of your site, and the trade-offs you’ll have to make when it comes to performance versus customer experience.

Images often make up the biggest portion of the transferred data size. If you deliver too many images or if they’re are too large, this degrades the performance, especially on slow connections and devices. And most importantly, optimized image delivery is a key metric in the Lighthouse score. But we’ve got a few tricks that you can implement to reduce the transfer size of images to the absolute minimum, and we’ll discuss all of them in this post.

How to prevent lazy loading

Maybe the most important aspect of optimizing image delivery is the lazy loading of images. This means that the browser only loads the images that are visible in the current viewport of the user’s browser. It won’t load any images that have to be scrolled to, these will only load if the user scrolls down the page. Early implementations used JavaScript logic that was prone to errors. But nowadays, there’s the loading="lazy" attribute on the  tag that allows us to use this functionality in all browsers that support it. Although the browser support is only at 75% right now, we think this is the right way to go. And a little bit of JavaScript can easily be added to implement a fallback for older browsers. While Frontastic strives to provide the most sensible defaults, behaviors like this can always be extended so you can optimally target your audience.

An important aspect when using lazy loading is that image elements should know their size to not cause layout shifts once the image is loaded. For this, we set dimensions for all images rendered through the standard components. This can be tricky in some circumstances, but our test suite is supposed to cover all these cases and also allows for optimal image sizes.

How to optimize image sizes

If you don’t specify the dimensions of an image we retrieve the dimensions of an image element from the DOM, but this only works in the client. Together with the dimensions of the image element or a specified crop-ratio, we then calculate the dimensions an image should be used in. On the server side, we guess the current device size and assume sensible default dimensions based on that.

Based on this, we can calculate the width and height of an image in most cases. For all images managed in the Frontastic media library, this is always possible since we have access to the image dimensions during the rendering process. This allows us to create image elements in the HTML with fully-specified size but also allows us to fetch the image in the minimal necessary size from the CDN. We also use an src-set to provide variants of the image for retina displays, but the browser will only load one of these images.

The only case where this doesn’t work is for remote images from outside of our CDN, where neither height nor crop-ratio is specified. Since there’s no quick way to determine the aspect ratio of a remote image, we then can’t set the height of an image. This means that these images might cause layout shifts when they’re loaded.

How to choose the optimal image format

On top of fetching images in the optimal size and only when the user actually sees an image, our CDN also delivers images in the optimal format for the current browser. For example, if a browser supports WebP, we deliver images in WebP. For older browsers, we still use PNG or JPEG.

How to handle resizing

Another interesting topic is how you can handle resizes of images. This is a feature mostly used by developers testing the responsive layout during development, but a page resize also happens when a user rotates their mobile phone or resizes their browser.

If you rotate your phone or tablet, you could go beyond certain breakpoints you’ve set. So you might render your frontend components differently or even render images with different aspect ratios.

Frontastic detects these resizes and our components check if those resizes cause a relevant dimension change and will only load new images in those cases. If the aspect ratio changes we always load a new image, but if the size of an image only increases a little we leave it to the browser to scale it up to reduce the bandwidth and increase the user-perceived performance.

How Frontastic helps with optimizing image delivery

Frontastic does everything out of the box to deliver your images in the most optimal way possible. You can extend the given functionality but usually, you can strike this off the list of things to think about when launching a new storefront.