Skip to main content

Responsive Image srcset

v1.0.0

Generate srcset / sizes from a single source — common breakpoints, density descriptors.

Responsive Image HTML
<picture>
  <!-- AVIF for supporting browsers -->
  <source
    type="image/avif"
    srcset="https://example.com/images/hero-320w.avif 320w, https://example.com/images/hero-640w.avif 640w, https://example.com/images/hero-960w.avif 960w, https://example.com/images/hero-1280w.avif 1280w, https://example.com/images/hero-1920w.avif 1920w"
    sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 33vw" />
  <!-- WebP fallback -->
  <source
    type="image/webp"
    srcset="https://example.com/images/hero-320w.webp 320w,
       https://example.com/images/hero-640w.webp 640w,
       https://example.com/images/hero-960w.webp 960w,
       https://example.com/images/hero-1280w.webp 1280w,
       https://example.com/images/hero-1920w.webp 1920w"
    sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 33vw" />
  <!-- Fallback img -->
  <img
    src="https://example.com/images/hero-960w.webp"
    alt="Hero image"
    width="1920"
    loading="lazy"
    decoding="async" />
</picture>