- Ottimizzazione e Web Vitals
As mentioned in the previous article on free templates for PrestaShop , the Classic template does not yet support the Srcset attribute of HTML 5 and consequently does not allow to offer high resolution images to retina devices. In the case of the WebP there are several modules for PrestaShop, with the new version 8, there will still be native support for this image format.
Prestashop presents the "Generate high resolution images" item in the back-end that can be activated in:
Design> Image Settings .
Let's see the following example, the first two logos appear identical in non-high-definition devices and the third, depending on the quality of the monitor, will appear either more marked or more pixelated, in the Retina displays the logo in the center will appear grainy and blurred, the one on the left and right will appear correct.
Logo with srcset attribute
Pass two distinct images one 290x69 pixel and one 580x138 pixel for retina displays.
Logo without srcset attribute
Only the 290x69 pixel image passes, in retina displays it will be zoomed by 200%.
Wrong size logo
Only pass the 580x138 pixel image, but limited to 69 pixels high via CSS
At the bottom of the article I explain how to simulate a retina display on a normal monitor. However, you can view the example above with a zoom of 200% and you will see that the logo in the center will be blurred, while the one on the right will be well defined. The 290pixel optimized logo has a weight of 9.6 kb ( 5Kb in WebP quality 90% format), while the 580pixel logo weighs 29kb ( 13.7kb in WebP quality 90% format). A difference that may seem negligible, but the web vitals metrics won't like it. However, we are 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. If we are talking about an ecommerce and the thumbnails of the images of the products in the category, using images larger than necessary will penalize us and not a little. This is why the srcset attribute was introduced with HTML 5.
Support 2x images at WebP compression
Perhaps due to the fact that high pixel density displays are not very widespread, currently PC solutions are extremely expensive and consequently not very widespread except in the professional field, the support of PrestaShop templates for high resolution images is not yet very much used . Only Apple's retina displays introduced in 2010 are used in the consumer arena. However, Apple has a slice of the market between 12% and 15% and, except for the latest models, there are really few those equipped with displays of this type.
A reversed situation with respect to the spread of Google's WebP format, also introduced in 2010, but still poorly supported, only recently Apple's Safari browser has finally introduced support for this important image compression format.
They are completely different philosophies, the first aims to offer the highest quality of visualization of images and texts, through screens that have a pixel density from 2 to 2.5 times greater than a normal display. Basically it's like viewing everything with zoom, at 200%, without 2x images you see everything blurry . Excellent in my opinion for small devices such as tablets, to read magazines and books with a definition similar to printing, impractical for other activities such as web browsing. For example, the 27-inch 5K screen of an iMac is 5120x2880 pixels , normal 27-inch 4K UHT IPS monitors have a resolution of 3840x2160 pixels. In a 27-inch retina the resolution of a 49-inch monitor is condensed, for example my current display (Samsung Odyssey) has a resolution of 5120x1440 pixels, because for the same price I preferred a 49-inch panel instead of a 27 inches with high pixel density and the same resolution? Simple, for my use I need to view multiple windows side by side, a 27-inch retina type, too, is too small. With the exception of graphic processing intended for printing, a high pixel density monitor has no practical sense, on the contrary the problems related to excessive magnification of the contents make normal use in the desktop environment less pleasant.
The WebP format points to the exact opposite , which is to balance the need for content loading speed with quality ( read why it matters ). Here comes the real problem of 2x images, they are double images compared to the size really needed. If in a Web page we insert an image that must be displayed in a container that has a maximum size of 200x200, for retina displays we will have to insert it at 400x400 pixels; actually taking into account the latest displays of this type, we will have to insert a 500x500 pixel image. 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 manage sizing information in order 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, then the image indicated in the src attribute is displayed.
With the srcset attribute we can optimize the images according to the devices. For example, if we need to display an image for a desktop with 1920x1080pixel resolution and the same image in mobile with a maximum resolution of 500pixel, we can use this attribute to load two different images in the two devices, so as to make loading faster especially with the use of the tag and the media attribute.
Example of implementation you can find it in the following article: How to Serve Responsive Images for Mobile, Tablet, and Desktop
In this case, however, these are extreme optimizations that you will not find in free or commercial PrestaShop templates, with the exception of Classic Rocket which we will talk about 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 logo in high resolution to devices with high pixel density, unfortunately for now it is limited to the logo. So subject to changes, which I recommend to make through the child theme, there will be no support for product images and images inserted through Elementor Page Builder . It is not only in the PrestaShop CMS, even in WordPress the srcset support was introduced in version 4.4 in 2015, but to date the implementation in the templates and the use 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 size compared to the one set in your template under: " Retina logo ".
Why use srcset for high definition images? In reality it is not just a question of performance and optimization, it is not just to avoid penalization by Google in the 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 look bad on non-retina displays - that is, to over 90% of your visitors.
The use of scrset to pass 2x images, however, must be considered , if on the one hand it is true that an iPhone, iPad and iMac with retina display would display suitable and not grainy images, on the other the same devices depend on current technology and the limits of both the HTTP protocol and the Internet connection speed. For example, if we want to put a high resolution image of the classic desktop format for a slide, therefore with a width of 1920 pixels, we will find ourselves having to load an image of 3840 pixels and with a weight that exceeds 8MB if at very high quality: 100 % and about 3MB for high quality: 60%. With 5G or fiber connections you would only notice a slight slowdown, but with slower connections this changes.
Not only that, the hosting where our ecommerce resides serves multiple images and files to multiple users at the same time. The bandwidth available is not infinite, and it costs a lot, to have a 1Gbit / s band all dedicated to you, you need a dedicated server. In most cases you will have a maximum bandwidth of around 100mbit / s. If you have few visits, you will not have big problems apart from selling little, if you have many a lack of optimization even of the images alone, it can cost you as dearly as the need to have more servers on which to balance the traffic.
Many hosting solutions have a limit in the number of files, generating high definition images, or to optimize the mobile side, perhaps even in WebP, can lead to having 6 images for each format. PrestaShop for images generates 7 different formats, for a single product we could find 42 image files and a catalog of 1000 products would generate 42,000 images.
High definition: environment and responsible use of data traffic.
A curiosity, these issues have also been addressed by environmentalists , who have proposed the limitation of 4K content of streaming platforms. And they are not entirely wrong, what is the point of watching a movie in 4K on a mobile with a 5 inch screen if not to produce more CO2? The problem arose in 2020 during the pandemic, the request for streaming content was putting a strain on the network, not just electricity consumption, so the European Union had to source the increase in network traffic, including Smartworking, E -learning, online gaming and online shopping. He thus asked for a responsible use of data consumption by operators in the sector. Netflix and Youtube decided to stop providing high definition content. Many other rush hour services switched to standard definition. Very few customers have noticed, also because in small displays the difference between 4K and full HD is not appreciable.
In the middle of the Covid pandemic, Netflix and Youtube agreed to reduce the quality of the streaming for the good of the network.
2x images set with the srcset attribute is recommended to use only for your own logo and product thumbnails.
How to check if high definition images are implemented?
As stated, high-definition displays are not very popular, and are not suitable for all uses. So if we don't have a high pixel density monitor, how can we verify that our srcset is properly implemented?
We have several ways to do this, the first is very simple, just install the Chrome extension: Retina Check Extension
Another possibility more suitable for developers is to use the Chrome console using Emulated Devices.
In the selection of emulated devices, let's insert a new device by clicking on " Edit ... "
Indicate in the cell " Pixel ratio of the device " the ratio 2 or 2.5. By analyzing the page with the Chrome developer tools, we can now check which images are loaded in the browser.
In web development it is important to keep in mind some data, in 2022:
- In the mobile sector, 72% of devices are Android , followed by 27% of iOS.
- In the desktop environment, Windows systems are over 75% , OS X stands at 15%
- Among them, devices with high pixel density displays are a very small and completely negligible percentage.
- Accessibility is very neglected , despite the fact that statistics speak of 43 out of 100 people with impaired vision . Almost 2 million people in Italy are visually impaired, 15% are totally blind and 85% are visually impaired.
- 66% of internet connections in Italy are below 30mbit / s , only 20% reach at least 100mbit / s. And only thanks to the pandemic has there been an improvement in the situation, but still a third of families are disconnected.
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 the various needs, bearing in mind the limits of technologies and above all those who do not have access to the latest market news or do not live in metropolises served by fiber or 5G connections and more attention should be paid to those who are less fortunate and must to deal with some disabilities. Unfortunately on this last point we all sin, both in the private and public sectors.
Author: Loris Modena