Generic Responsive Images implementation

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.