Inline srcset hack

To avoid loading images for certain breakpoints and support differing aspect ratios and alt-texts.

by phloe

HTML

<picture class="picture picture--large picture--ratio-3-2">
  <source media="(min-width: 600px)" srcset="https://dummyimage.com/1200x800/000/fff 1200w, https://dummyimage.com/900x600/000/fff 900w" />
  <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
  <img src="https://dummyimage.com/600x400/000/fff" width="600" height="400" class="picture__image" alt="3:2 image" />
</picture>

<picture class="picture picture--small picture--ratio-1-1">
  <source media="(max-width: 599px)" srcset="https://dummyimage.com/600x600/f00/fff 600w, https://dummyimage.com/300x300/f00/fff 300w" />
  <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
  <img src="https://dummyimage.com/150x150/f00/fff" width="150" height="150" class="picture__image" alt="1:1 image" />
</picture>

CSS

.picture {
  position: relative;
  display: block;
}
.picture::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.picture--ratio-3-2::after {
  padding-bottom: 66.66666666%;
}
.picture--ratio-1-1::after {
  padding-bottom: 100%;
}
.picture__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .picture--small {
    display: none;
  }
}

@media (max-width: 599px) {
  .picture--large {
    display: none;
  }
}