HTML Responsive Images

The srcset Attribute

srcset gives the browser a menu of image options at different sizes. The browser picks the best one based on the device screen size and resolution.

Note: Always include a fallback src for browsers that do not support srcset.

Warning: srcset is a suggestion not a command — the browser may still choose a cached larger image.

Example: The srcset Attribute

<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" alt="Photo">

The sizes Attribute

The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes. This helps the browser pick the right srcset option before downloading anything.

Note: Match your sizes values to your CSS breakpoints for best results.

Warning: Without sizes the browser assumes the image is always 100vw wide which leads to downloading unnecessarily large images.

Example: The sizes Attribute

<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Photo">

The picture Element for Art Direction

Sometimes you do not just want a smaller version of the same image on mobile — you want a completely different crop or composition. The picture element lets you specify entirely different images for different screen sizes.

Note: Use picture when your image needs different cropping for mobile vs desktop not just different sizes.

Warning: Always include a fallback img tag inside picture — browsers that do not support picture will show this.

Example: The picture Element for Art Direction

<picture>
  <source media="(max-width: 600px)" srcset="photo-square.jpg">
  <img src="photo-wide.jpg" alt="Photo">
</picture>

Lazy Loading Images

The loading="lazy" attribute tells the browser to defer loading an image until it's about to scroll into view, which speeds up initial page load by not downloading images the visitor may never scroll down to see.

Example: Lazy Loading Images

<img src="photo.jpg" alt="Photo" loading="lazy">

Setting width and height to Prevent Layout Shift

Even with responsive images, explicitly setting width and height attributes (or an aspect-ratio in CSS) reserves the correct amount of space on the page before the image finishes downloading, preventing the surrounding content from jumping around as it loads.

Example: Setting width and height to Prevent Layout Shift

<img src="photo.jpg" width="800" height="600" alt="Photo">