Frontastic
  • Product
    • Why Frontastic
    • Features
    • Product Tour
    • Use cases
    • Pricing
  • Partners
  • Resources
    • Documentation
    • Blog
    • Events
  • Company
    • About
    • Jobs
  • Contact
  • Get a guided demo
  • Menu Menu
You are here: Home1 / Tech Talk2 / How to optimize image delivery
Optimizing image delivery

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.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Technical Writer at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay In The Loop

Subscribe to our newsletter to keep up to date on all the latest Frontastic news.

Related

Checklist: How to make your digital experience project successful

Tech Talk
Companies are breaking up their monolithic IT systems on a grand scale. Instead, they're starting to rely on an ecosystem of technologies based on microservices. They're thinking API first, using cloud-based Software-as-a-Services, and going headless. But what does it take to make your digital experience project successful?
Read more
March 3, 2021
https://www.frontastic.cloud/wp-content/uploads/2021/01/checklist.png 1078 2048 Helen https://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svg Helen2021-03-03 07:28:192021-03-02 09:31:51Checklist: How to make your digital experience project successful

Performance optimization: How to optimize your data

Tech Talk
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 article, we'll go through how to optimize your data.
Read more
February 25, 2021
https://www.frontastic.cloud/wp-content/uploads/2021/02/data_optimization.png 630 1200 Helen https://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svg Helen2021-02-25 12:47:312021-02-25 14:18:09Performance optimization: How to optimize your data
Pillars of eCommerce

The four pillars of eCommerce: Creating a flawless online experience

Tech Talk
Technology never stands still. In all industries, businesses have to adapt quickly if they want to stay ahead of the competition, and in 2021 that means putting the customer first by offering a flawless online experience. Our partner emporix shares interesting insights in this blog post.
Read more
February 24, 2021
https://www.frontastic.cloud/wp-content/uploads/2021/02/pillars.png 630 1200 Helen https://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svg Helen2021-02-24 09:44:092021-02-24 09:46:49The four pillars of eCommerce: Creating a flawless online experience

Categories

  • Product and Functionalities
  • Company News
  • Tech Talk
  • Partnerships and Integrations
  • Insights
  • Remote Work
  • What others say

Product

  • Why Frontastic
  • Features
  • Product Tour
  • Use cases
  • Pricing

Company

  • About
  • Jobs

Resources

  • Blog
  • Documentation
  • Events

Connect

  • Contact
  • Partners

Get our newsletter

  • LinkedIn
  • Facebook
  • Twitter
MACH Alliance Logo
Data Privacy | Imprint | © Frontastic
Scroll to top
  • Ready to innovate?

    Fill in the details below and we’ll find a personalized plan that works for you.

  • We store your name, your email address and your message in our CRM ProsperWorks to ensure a timely and reliable processing. Without your consent, we will not use your e-mail address for newsletters or similar but to answer your request. Of course we can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we will regularly send you news. Of course you can unsubscribe at any time using the link in the newsletter.
  • Seeing is Believing

    Fill in the details below to take a personalized guided demo.

  • We store your name, your email address and your message in our CRM Copper to ensure quick and reliable processing. The data transfer is encrypted. Without your consent, we won’t use your email address for newsletters or similar but just to answer your request. By clicking on “Request Demo” you confirm that you’ve also read our data privacy terms and that you consent your data is processed as described.
  • We save your name and email to send you regular news. For this purpose we use the service Mailchimp, to which we transfer your data. Of course you can always unsubscribe from the newsletter using the link at the end of the newsletter.
  • Let’s get together

    Fill in the details below to join us on our mission to create extraordinary digital customer experiences.

  • We store your name, your email address and your message in our CRM ProsperWorks to ensure a timely and reliable processing. Without your consent, we will not use your e-mail address for newsletters or similar but to answer your request. Of course we can also delete your data if you want us to. Just let us know!
    If you select this checkbox, we will regularly send you news. Of course you can unsubscribe at any time using the link in the newsletter.