I'm using the JS plugin Lazysizes.js https://github.com/aFarkas/lazysizes
I'm using multiple images in data-srcset, but I'm confused as to what the trailing widths do, eg:
<img
data-sizes="auto"
data-src="image3.jpg"
data-srcset="image3.jpg 600w,
image1.jpg 220w,
image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w"
class="lazyload" />
Are these the constrained max proportions for each image?
Or are these the breakpoints at which the images are used?
The width defined in data-srcset is the decoded width of the image.
Breakpoints can be defined and mapped to individual image widths using the data-sizes property if you wish to have more control over using auto
Source: lazysizes repo links to this blog post explaining the syntax of a responsive image