Using the LazySizes plugin (https://github.com/aFarkas/lazysizes) I'm trying to build a grid of images, each with an alternate version for smaller viewports. The grid (container) is a simple column/row based percentage based layout.
I'm not quite sure how to declare the images, I keep seeing only the larger versions. I've opted for using high-res images and scaling them down 50% with a max width for the container. Here's a markup sample of the the images:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
alt="" class="lazyload" />
I only need one breakpoint which is at 768px. The confusing part is the data-sizes attribute. Should I be declaring another size here since the images are high-res or should I just let them have full width?
Added: The generated markup I get when the script initiates:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w"
alt="" class=" lazyloaded"
sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
src="images/grid/image-small.jpg">