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.
Sizes:
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.
Srcset:
In the srcset attribute you can define all available images AND the pixelwidth of those images.
Src:
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.
<img
sizes="
<?php /*
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,
48vw
"
srcset="
<?php /*
Define all available sources and their width like below:
<image_source> <image_source_width>w,
The browser will automatically pick the correct image, based on the viewport width (in pixels) combined with its DPI
*/ ?>
http://placehold.it/100x100 100w,
http://placehold.it/200x200 200w,
http://placehold.it/300x300 300w,
http://placehold.it/500x500 500w,
http://placehold.it/600x600 600w,
http://placehold.it/700x700 700w
"
src="
<?php /* set default fallback image source */ ?>
http://placehold.it/300x300
"
alt="image title"
/>