Responsive image

2 snippets in HTML & CSS

Also written as responsive images

HCHTML & CSS

Picture Element (Art Direction)

syntax

<picture>
  <source media="(condition)" srcset="image-url">
  <img src="fallback.jpg" alt="description">
</picture>

example

<picture>
  <source media="(min-width: 1024px)" srcset="/images/hero-wide.webp" type="image/webp">
  <source media="(min-width: 600px)" srcset="/images/hero-medium.webp" type="image/webp">
  <img src="/images/hero-small.jpg" alt="Mountain landscape at sunrise">
</picture>

Note The browser picks the first matching source. Always include the img fallback as the last child. Use picture for art direction (different crops at different sizes) or serving modern formats with fallbacks.

Responsive Images (srcset & sizes)

HC · Images & Media

syntax

<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="medium.jpg" alt="description">

example

<img
  srcset="/photos/product-480.jpg 480w,
         /photos/product-800.jpg 800w,
         /photos/product-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="/photos/product-800.jpg"
  alt="Wireless headphones in midnight blue"
>

Note The w descriptor tells the browser the intrinsic pixel width of each image. sizes tells it how wide the image will display at each breakpoint, so it can pick the best file. This is for resolution switching, not art direction.