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
srcsetyou give the browser an array of image sources and define the widths of those images. - In
sizesyou 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.