Home > Mobile >  In `lazysizes.js` what do the width values in datasets actually do?
In `lazysizes.js` what do the width values in datasets actually do?

Time:07-12

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"
     />

Are these the constrained max proportions for each image?

Or are these the breakpoints at which the images are used?

CodePudding user response:

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

  • Related