Responsive Images in HTML: srcset, sizes and picture Explained

Images are usually the heaviest part of a web page and the most common cause of slow Largest Contentful Paint. Sending a 2400-pixel-wide hero image to a 390-pixel phone wastes data, battery and time. Responsive images let the browser pick the right file for each screen — and the HTML to do it is simpler than it looks.

The problem with a single image file#

<img src="hero-2400.jpg" alt="Team working on a website">

Every visitor downloads the 2400 px file, whether they’re on a 4K monitor or a budget Android phone on 4G. The browser then shrinks it, wasting most of the bytes.

srcset with width descriptors#

<img
  src="hero-1200.jpg"
  srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-2000.jpg 2000w"
  sizes="(max-width: 900px) 100vw, 60vw"
  width="1200" height="675"
  alt="Team planning a website on a whiteboard">

• srcset lists available files and their real pixel widths (480w means 480 pixels wide).
• sizes tells the browser how wide the image will be displayed: full viewport width on screens up to 900 px, otherwise 60% of the viewport.
• The browser combines this with the device’s pixel density and chooses the smallest file that still looks sharp.

srcset with density descriptors#

For fixed-size images like logos or avatars, use 1x/2x:

<img src="logo-160.png" srcset="logo-160.png 1x, logo-320.png 2x" width="160" height="40" alt="IFTIKHAR">

Even better for logos and icons: use SVG, which is sharp at any size.

The <picture> element#

1. Modern formats with fallback:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="675" alt="…">
</picture>

2. Art direction — a different crop for mobile:

<picture>
  <source media="(max-width: 600px)" srcset="hero-square.webp">
  <img src="hero-wide.webp" width="1200" height="500" alt="…">
</picture>

The <img> inside is required: it carries the alt text, dimensions and fallback.

Choosing image formats#

Width, height and layout shift#

Always include width and height attributes that match the image’s aspect ratio. Modern browsers use them to reserve space before the image loads, preventing layout shift. Your CSS can still make the image fluid:

img { max-width: 100%; height: auto; }

Loading priority#

• Below-the-fold images: loading="lazy" — see lazy loading guide.
• The hero/LCP image: never lazy-load it; add fetchpriority="high".
• Add decoding="async" to non-critical images.

Alt text and SEO#

Write alt text that describes the image’s content and purpose; use alt="" for decorative images. Combine it with descriptive file names and nearby text for image search. More in image alt text and image SEO in WordPress.