<picture><sourcemedia="(min-width: 1024px)"srcset="/images/hero-wide.webp"type="image/webp"><sourcemedia="(min-width: 600px)"srcset="/images/hero-medium.webp"type="image/webp"><imgsrc="/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.
<imgsrcset="/photos/product-480.jpg480w,/photos/product-800.jpg800w,/photos/product-1200.jpg1200w"
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.
Frequently asked questions
How does HTML & CSS handle responsive image?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Picture Element (Art Direction)" snippet in HTML & CSS uses `<picture>`.
Which code does the HTML & CSS example use?
The "Picture Element (Art Direction)" snippet uses `<picture>`, from the Images & Media section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "responsive image"?
Besides "Picture Element (Art Direction)", this page also shows "Responsive Images (srcset & sizes)".
Is there anything to watch out for?
Yes. For "Picture Element (Art Direction)": 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.