For a long time, the biggest challenge in responsive design has been serving images correctly for users on different devices.
Serving the biggest image available to mobile users is a waste of bandwidth and pagespeed.
Fortunately there’s a well-supported solution in the form of the srcset + sizes attribute on the image(< img>) element.
Below you can find descriptions of the 2 new attributes and the “new” role of the original attribute, as well as a working code-example.
In the sizes attribute of the <img> tag the different widths for the image are defined.
If this concerns a full-width banner, for mobile as well as desktop, this will be 100vw.
The attribute can, if necessary, takes an array like structure to accomodate different widths for different viewport widths.
In the srcset attribute you can define all available images AND the pixelwidth of those images.
The original src attribute is used when no srcset images are found OR the srcset attribute is not supported.
In the code below you can find the necessary HTML, provided with comments to explain how it all works.
Below are the sizes of the list-image, depending on the viewport width.
This means that, by default, the assumed space the image has available is 48vw (=48% of the viewport),
but when the screen size gets bigger, the image's size will take up less space of the viewport (this is the case for example on a category page,
where on mobile screens 2 images are shown (48% of the viewport), from 640px and higher there's 3 images (30% of the viewport), etc.)
(min-width: 1280px) 15vw,
(min-width: 1024px) 19vw,
(min-width: 768px) 25vw,
(min-width: 640px) 30vw,
Define all available sources and their width like below:
The browser will automatically pick the correct image, based on the viewport width (in pixels) combined with its DPI
<?php /* set default fallback image source */ ?>