Skip to search Skip to main content

Does the <body> rule the mind or does the mind rule the <body>?

Responsive Images Cheat Sheet

Posted

Updated

Many developers struggle with the correct usage of the <picture> element and the srcset and sizes attributes.
This is the best cheat sheet around that Harry Roberts tweeted recently.

As this linked image lacks alternative text I try to explain roughly:

  • In srcset you give the browser an array of image sources and define the widths of those images.
  • In sizes you give the browser an array of breakpoints and the corresponding widths of the images at that breakpoint.
  • Together the browser will choose the best fitting image for the current width.
Author:
Accessabilly