A bare bones example of how to get the most from srcset and sizes to make a responsive gallery from a simple list of images that leaves it up to the browser to choose the most appropriate image sources both for gallery thumbnails and their full-sized versions just from single <img> declarations.
<a href="img/nojs-fallback.jpg"> <img src="img/unsupported-fallback.jpg" srcset="img/smallest.jpg 400w, img/smallish.jpg 600w, img/small.jpg 800w, img/medium.jpg 1000w, img/biggish.jpg 1200w, img/big.jpg 1400w, img/bigger.jpg 1800w, img/biggest.jpg 2400w" sizes="(max-width: 399px) 100%, (max-width: 599px) 50%, (max-width: 799px) 33.33%, 200px" alt="sample image"> </a>
The trick is to reset the sizes
attribute when promoting the thumbnail image to the bigger lightbox modal, probably to something like 100vw
.
But while we're at it, we can finesse sizes
to solve the problem of portait images taking up less than the available space when constrained by max-height:100%
and thereby encouraging the browser to download a bigger file than necessary.
View source on github