Responsive image

The srcset attribute lets the browser pick which image to load based on screen size and pixel density.

Code

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Image description"
  loading="lazy"
>

Explanation

srcset lists file variants with their real width (w). sizes tells the browser how wide the image will render in the layout — the browser uses that to pick the best match from srcset.

For art direction (different cropping on mobile vs. desktop), use <picture> with multiple <source> elements instead.

Related tools

The <img> tag

The src, alt, loading, and srcset attributes of the <img> tag, with examples.

HTML Formatter & Minifier

Format and minify HTML code online. Fully processed in your browser, nothing sent to a server.