Minimum Viable Gallery

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