E-commerce sites and images, it’s a great love story! They inspire, illustrate and above all, they engage and allow you to stand out from the competition. They play a crucial role in the user experience (on mobile as well as on desktop), as well as from an SEO point of view . Your images therefore require careful optimization, on many levels!
Today, we invite you to look at a very specific problem that concerns many technical teams: serving responsive images, i.e. images that are perfectly adapted to each user context.
With mobile traffic continuing to grow and being the majority (we’re not telling you anything new), it is becoming urgent to succeed in serving images adapted to mobile. But at the same time, images represent a considerable weight… Up to 50% of the weight of web pages! Which is of course not very digestible for our mobile sites. And if we could think that this tends to improve, this is not the case since according to HTTP Archive , the median weight of images has been multiplied by 4, over the last 10 years (just like the weight of web pages)!
But the issue of responsive images is much more complex than simply putting our images on a diet. The challenges related to responsive images are numerous: images that are too large, complex management of different formats, sizes or versions of images, difficulties in properly managing HTML code, etc. In short, many aspects must be taken into account.
So, are you ready to dive into the depths of responsive images?
The Pitfalls of Half-Optimized Images
You have most likely already partially optimized your images and this is a first step. However, despite your efforts, your images may still not display optimally in all browsing contexts. To give you a better idea of what a poorly optimized image can be, let’s analyze a few cases.
Relatively optimized images
First case, your images are compressed, the image displays correctly on mobile and desktop, but its weight is not adapted to the size of the user’s screen . So, while it displays relatively correctly on some devices, on others, it displays poorly. And contrary to what one might believe, across the world, Apple devices are not the most widespread among your users!

Another scenario that can occur is that the image shifts while the page is loading because it is neither adapted to the screen size nor to the type of device on which it is loaded . This generates CLS (one of the Core Web Vitals metrics), which impacts your SEO and degrades navigation, as it can lead to clicks or actions that are not wanted by users.
As you will have understood, there are many cases that can degrade your performance scores , but above all considerably increase the frustration of your users and therefore your bounce rate . In other words: managing your images well can quickly become a nightmare!
Too many images to handle
It is still common to find organizations whose CMS has multiple versions of the same image: different sizes and formats, for different devices . In this case, the management tool becomes cumbersome and sometimes, we find the same image in duplicate (or more), because they are handled by different teams: marketing, tech, design, e-commerce, etc. Unfortunately, this practice increases the weight of the pages, degrades your performance and increases the energy consumed to display them!
A preliminary step is to clean your CMS of duplicate images before moving on to compression. But once that’s done, many teams still use image optimization techniques that are only partially effective.
Image optimization: techniques that are not so easy to implement
As mobile browsing is preferred , on some e-commerce sites, we can find two loaded images :
- the first for desktop devices;
- the second for all mobile devices, regardless of screen size.
Another approach is to load the URLs of all images (with different dimensions) and the browser displays the correct one, using tags. However, with this technique, only one part of the problem is solved: the image adapts to the device type, but not to the exact screen dimension . In addition, loading multiple images naturally increases the page load time.
So, to make the browser display the right image on the right screen , your teams are definitely using responsive images including the following practices :
- using relative sizes : the image size adapts directly to prevent them from accidentally overflowing their container. This is done in particular by using the css “width” tags .
- The use of the HTML “picture” tag which allows you to specify different images depending on the characteristics of the device used to display the page.
- The use of the img tag attributes “srcset” and “x descriptor” which give indications to the browser on the best image to use depending on the pixel density of the screen.
However, these techniques have a major drawback: you have to plan for all possible cases of user contexts (device, screen size, density, container size and even connection type)! This makes the generation of the code by your webmaster and/or developers very complex.
You probably realize it now, to broadcast 100% optimized images on your e-commerce site, there are techniques, but also rules to respect. It is thanks to them, that you ensure a fluid UX, with images that load and display optimally, whatever the browsing context.
The 3 + 1 golden rules for truly responsive images
Rule #1: Quality images, but light
The first thing you need to think about when talking about images is their weight. In fact, in 2022, images represent about half of the weight of pages (followed by JS scripts which weigh almost a quarter)!

However, whether they are intended for your product pages or your homepage , they must weigh as little as possible . Like all resources that are loaded on your pages, the higher the weight, the more you risk slowing down this loading. Depending on their resolution, size, and number, it is easy to understand that images can require more time and resources from the browser to display correctly.
And on the other side of the screen, they can also degrade your user experience. Indeed, if you want to offer an excellent UX with very high resolution images (or those that have been processed by your artistic direction team), they are not necessarily adapted to the device and the browsing conditions of your users.
So, even after choosing the most beautiful visuals for your pages, they may never be seen if they take too long to load. To avoid this, the solution is compression, and this, in the formats recommended by Google.
OPT FOR AVIF COMPRESSION FORMATS
At Fasterize, we recommend that you opt for the AVIF format which allows you to broadcast quality images and optimized for loading speed. By using this compression format, your images will be on average 50% to 80% lighter than a JPEG image !
But, you can imagine that compression is not the only treatment to be done on your images so that they are optimized for each browsing context. Your images must also have the right size adapted to each context : an image of 3000 x 3000 on an iPhone screen displayed in 200 x 200 is certainly not the best thing to do ;-).
Rule #2: Internal pedagogy is necessary
Perfectly optimizing your images from start to finish therefore turns out to be a technical challenge. But, as we will see, this challenge is also organizational.
Taking the time to raise awareness among your teams (tech, integrators, content, etc.) about the importance of serving optimized responsive images is an important phase of your approach. Each member of the team must be able to contribute, or at least be vigilant, each time an image is integrated into your CMS.
While each team’s priorities and intentions may sometimes be out of step with the need for optimization and UX objectives , their efforts must not contribute to degrading your web performance (and therefore your UX).
If your teams do not see the benefits and interests of optimized images (performance or UX side), this educational time is essential so that everyone is aware of its impact and participates in your optimization process.
Rule #3: Abandon partial solutions
But, you might say, educating teams requires time that we don’t always have… And while all the techniques presented in the article are interesting , they have limitations: they are time-consuming for your teams, and do not guarantee that the image is adapted to the user’s browsing context . The images adapt to the type of device, but not to the user’s screen size, which varies enormously on mobile. The solution to avoid the constraints of using these techniques is to offer responsive images from A to Z in an automated way!
Rule #4: Choose Automation
Automating the optimization of your images can significantly relieve your teams. As we said, the complexity of image management and optimization requires significant involvement on your part and the allocation of resources (which you do not always have).
So, choosing to automate rather than manually adjusting each image to the multiple resolutions and screen sizes available guarantees you a significant time saving. In addition, your teams will be able to focus on their priorities.
Moreover, using an intelligent engine is the assurance of generating optimized versions of images according to the specific constraints of each device, thus guaranteeing a pleasant and enjoyable experience for users. It is the simplest and most reliable way to fully optimize your images.
Serve fully responsive images with Fasterize
In addition to all our optimizations dedicated to your images (lazyloading, inlining, WebP/AVIF compression), we have incorporated into our engine a script that automatically adjusts image sizes according to the screen, container and pixel density . No more images that are too large for users, laborious management of different image formats and the complexity of HTML code. Whatever the source image, we generate images for you that are perfectly adapted to each user context!
Ensuring good UX, your performance and your results
Responsive design is an essential step for a high-performance site (in this regard, responsiveness is also part of Google’s recommendations). By automating these optimizations, you will no longer need to combine cropping , resizing and other compression operations yourself , which, if not automated, are not viable over time.
Opting for a global solution is a guarantee of saving your technical teams time and ensuring the continuous optimization of your front-end as your site evolves. But it is also the assurance of offering an optimal experience to your users, whatever their browsing context.
Discover our EdgeSpeed solution and play the card that will reveal the full potential of your site! (And it’s not a gamble ;))