Shopping Cart
There are no more items in your cart
- Tecnoacquisti.com
- Optimization and Web Vitals
As mentioned in the previous article about free templates for PrestaShop, the Classic template still does not support the Srcset attribute of HTML 5 and consequently does not allow offering high-resolution images to retina devices. In the case of WebP, there are several modules for PrestaShop, and with the new version 8, there will be native support for this image format.
For the PrestaShop logo, it is preferable to use the SVG format, which unfortunately is not supported by the CMS and requires a modification of the template.
PrestaShop presents the option "Generate high-resolution images" in the back-end, which can be activated in:
Design > Image Settings.
Let's look at the following example, the first two logos appear identical on non-high-definition devices and the third one, depending on the quality of the monitor, will appear either more defined or more pixelated. On Retina displays, the logo in the center will appear grainy and blurry, while the ones on the left and right will appear correct.
Logo with srcset attribute
Provide two distinct images, one at 290x69 pixels and one at 580x138 pixels for retina displays.
Logo without srcset attribute
Only the image of 290x69 pixels is passed, on retina displays it will be zoomed by 200%.
Logo with incorrect dimensions
Only the image of 580x138 pixels is passed, but limited to 69 pixels in height via CSS
At the end of the article, I explain how to simulate a retina display on a regular monitor. You can still view the example above with a 200% zoom, and you will see that the logo in the center will be blurry, while the one on the right will be well-defined. The optimized logo at 290 pixels has a weight of 9.6 kb (5Kb in WebP format quality 90%), while the one at 580 pixels weighs 29kb (13.7kb in WebP format quality 90%). A difference that may seem negligible, but the web vitals metrics will not appreciate it. We are still talking about a small image with few colors and already optimized for the web; in the case of a slide, the difference between an image of 1920 pixels and one of 3840 pixels is very large. When it comes to e-commerce and the thumbnails of product images in the category, using images larger than necessary will penalize us significantly. This is why the srcset attribute was introduced with HTML 5.
2x image support for WebP compression
Perhaps due to the fact that high pixel density displays are not very widespread, currently the solutions for PCs are extremely expensive and consequently not very common except in professional settings, the support for PrestaShop templates for high-resolution images is still not widely used. Only Apple's retina displays introduced in 2010 are used in the consumer market. However, Apple has a market share of between 12% and 15%, and except for the latest models, there are very few that are equipped with this type of display.
This is a reversed situation compared to the spread of Google's WebP format, a format also introduced in 2010, but still poorly supported; only recently has Apple's Safari browser finally introduced support for this important image compression format.
These are completely different philosophies, the first aims to offer the highest quality of image and text display through screens that have a pixel density 2 to 2.5 times greater than a normal display. It’s practically like viewing everything zoomed in at 200%; without 2x images, everything appears blurry. I think this is excellent for small devices like tablets, for reading magazines and books with a print-like definition, but it is impractical for other activities like web browsing. For example, the 5K screen of a 27-inch iMac has a resolution of 5120×2880 pixels, while normal 27-inch IPS 4K UHD monitors have a resolution of 3840x2160 pixels. In a 27-inch retina display, the resolution of a 49-inch monitor is condensed; for instance, my current display (Samsung Odyssey) has a resolution of 5120x1440 pixels. Why did I prefer a 49-inch panel at the same price instead of a 27-inch high pixel density display with the same resolution? Simple, for my use, I need to view more windows side by side; a 27-inch, even of the retina type, is too small. Except for graphic processing intended for print, a high pixel density monitor has no practical sense; in fact, the issues related to excessive content enlargement make normal desktop use less enjoyable.
The WebP format aims for the exact opposite, that is, to balance the need for fast content loading with quality (read why it is important). Here lies the real problem with 2x images; they are double the size actually needed. If we insert an image on a web page that needs to be displayed in a container with maximum dimensions of 200x200, for retina displays we will need to insert it at 400x400 pixels; in reality, considering the latest displays of this type, we will need to insert an image at 500x500 pixels. This significantly impacts loading times and is contrary to any good web development practice.
Srcset attribute introduced with HTML 5
With HTML 5, browsers can handle sizing information to select the most appropriate image for the device. The purpose of this attribute is to speed up loading; the src attribute is used as a "fallback" or default image. If the srcset image does not load or the browser does not support it, the image indicated in the src attribute is displayed.
With the srcset attribute, we can optimize images depending on the devices. For example, if we need to display an image for a desktop with a resolution of 1920x1080 pixels and the same image on mobile with a maximum resolution of 500 pixels, we can use this attribute to load two different images on the two devices, thus making loading faster, especially with the use of the
An implementation example can be found in the following article: How to Serve Responsive Images for Mobile, Tablet, and Desktop
However, in this case, we are talking about extreme optimizations that you will not find in free or commercial PrestaShop templates, except for Classic Rocket, which we will discuss later, and a few others.
The srcset attribute is used in some templates to pass 2x images.
For example, the WareHouse template uses this attribute to pass the high-resolution logo to devices with high pixel density; unfortunately, for now, it is limited to the logo. Therefore, unless modifications are made, which I recommend doing through the child theme, there will be no support for product images and images inserted via Elementor Page Builder. It is not only in the PrestaShop CMS; support for srcset was also introduced in WordPress version 4.4 in 2015, but to this day, implementation in templates and usage is very limited and complex.
To set the Retina Logo in the WareHouse theme, open: IqitThemeEditor - Backoffice and go to Responsive/Mobile, adding a logo with double the dimensions of the one set in your template under: "Retina logo".
Why use srcset for high-definition images? In reality, it is not just a matter of performance and optimization; it is not just to avoid penalties from Google in SERP; it is not just to prevent users from abandoning navigation. The problem is that if the image is larger than its container, it will appear poorly on non-retina displays, which is over 90% of your visitors.
The use of srcset to pass 2x images should still be considered; while it is true that an iPhone, iPad, and iMac with retina displays would display the appropriate images without pixelation, the same devices depend on current technology and its limitations, both of the HTTP protocol and internet connection speed. For example, if we want to put a high-resolution image in the classic desktop format for a slide, thus with a width of 1920 pixels, we would have to load an image of 3840 pixels and with a weight exceeding 8MB if at the highest quality: 100% and about 3MB for high quality: 60%. With 5G or fiber connections, there would only be a slight slowdown, but with slower connections, the situation changes.
Moreover, the hosting where our e-commerce resides serves multiple images and files to multiple users simultaneously. The available bandwidth is not infinite and is costly; to have a dedicated bandwidth of 1Gbit/s, you need a dedicated server. In most cases, you will have a maximum bandwidth of about 100mbit/s. If you have few visits, you won't have major problems apart from low sales; if you have many, a lack of optimization even for images alone can cost you dearly, such as the need to have more servers to balance traffic.
Many hosting solutions have a limit on the number of files; generating high-definition images or optimizing for mobile, perhaps even in WebP, can lead to having 6 images for each format. PrestaShop generates 7 different formats for images, so for a single product, we could find ourselves with 42 image files, and a catalog of 1000 products would generate 42,000 images.
High Definition: Environment and Responsible Data Traffic Use.
Interestingly, such issues have also been addressed by environmentalists, who have proposed limiting 4K content on streaming platforms. And they are not entirely wrong; what is the point of watching a 4K movie on a 5-inch screen cell phone if not to produce more CO2? The issue arose in 2020 during the pandemic, as the demand for streaming content was putting a strain on the network, not just on electricity consumption. Thus, the European Union had to address the increase in network traffic due to smart working, e-learning, online gaming, and online shopping. They called for responsible data consumption from industry operators. Netflix and YouTube decided to halt the provision of high-definition content. Many other services switched to standard definition during peak hours. Very few customers noticed, especially because on small displays, the difference between 4K and full HD is not appreciable.
During the Covid pandemic, Netflix and YouTube agreed to reduce streaming quality for the good of the network.
The 2x images set with the srcset attribute are recommended to be used only for your logo and product thumbnails.
How to check if high-definition images are implemented?
As mentioned, high-definition displays are not very common, and they are not suitable for all uses. So if we don't have a high pixel density monitor, how can we check that our srcset is correctly implemented?
We have several ways to do this, the first is very simple, just install the Chrome extension: Retina Check Extension
Another option more suitable for developers is to use the Chrome console with Emulated Devices.
In the selection of emulated devices, we will add a new device by clicking on "Edit..."
By indicating in the cell "Device pixel ratio" the ratio 2 or 2.5. Analyzing the page with Chrome's developer tools, we can now check which images are loaded in the browser.
Conclusions
In web development, it is important to keep some data in mind. In 2022:
- In the mobile sector, 72% of devices are Android, followed by 27% for iOS.
- In the desktop sector, over 75% of systems are Windows, while OS X stands at 15%.
- Among these, devices with high pixel density displays represent a very small and entirely negligible percentage.
- Accessibility is greatly overlooked, despite statistics indicating 43 out of 100 people have visual impairments. Almost 2 million people in Italy have visual disabilities, with 15% being completely blind and 85% having low vision.
- 66% of internet connections in Italy are below 30mbit/s, with only 20% reaching at least 100mbit/s. Only due to the pandemic has there been an improvement in the situation, but still, a third of families lack a connection.
In light of the data, it is much more important today, when designing a web interface, to focus on loading speed, user experience, and pay more attention to accessibility. It is necessary to balance and weigh various needs, keeping in mind the limitations of technologies and especially those who do not have access to the latest market innovations or do not live in metropolitan areas served by fiber or 5G connections. More attention should be given to those who are less fortunate and have to deal with some disabilities. Unfortunately, on this last point, we all fall short, both in the private and public sectors.
Author: Loris Modena
SENIOR DEVELOPER
Per Ind Loris Modena, owner of Arte e Informatica, started working in the IT sector in 1989 as a system administrator responsible for the maintenance and installation of computer systems. He began programming for the web in 1997, focusing on CGI programming in PERL and later transitioning to programming in PHP and JavaScript. During this time, he became familiar with the Open Source world and the management of Linux servers.