Responsive Images: A Practical Guide

Responsive images serve different versions of an image to different devices. A phone does not need a 4000px-wide photo, and a desktop browser should not be limited to a mobile thumbnail. Using responsive image techniques improves loading speed and avoids wasting bandwidth.

Why Responsive Images Matter

Modern websites are viewed on screens that range from small phones to large monitors. If the browser downloads one image for every device, mobile users pay for desktop-sized files. Responsive images solve this by letting the browser choose the most appropriate file.

The Two Main Techniques

srcset and sizes

srcset lists multiple versions of the same image. The browser chooses one based on viewport size, device pixel ratio, and the sizes attribute.

<img
  src="photo-1200.jpg"
  srcset="photo-600.jpg 600w, photo-1200.jpg 1200w, photo-2000.jpg 2000w"
  sizes="(min-width: 1024px) 80vw, 100vw"
  alt="A descriptive description of the photo"
>

picture Element

The picture element lets you provide format-specific alternatives, such as AVIF or WebP with a JPEG fallback.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A descriptive description of the photo">
</picture>

A Practical Responsive Workflow

1. Determine the largest display width for each image.
2. Export versions at 600, 1200, and 2000 pixels for typical layouts.
3. Use modern formats such as WebP or AVIF.
4. Add srcset and sizes to the image.
5. Set explicit width and height to prevent layout shift.
6. Verify the browser downloads the expected file on mobile and desktop.

What to Avoid

• Using CSS width alone to shrink a large image
• Serving one giant image to all devices
• Missing alt text or descriptive file names
• Ignoring layout shift when images load

Implementation Checklist

• Determine the largest display width for each image.
• Export versions at the widths the layout actually needs.
• Use modern formats such as WebP or AVIF.
• Add srcset and sizes with accurate layout values.
• Set explicit width and height to prevent layout shift.
• Verify in developer tools that mobile and desktop load the expected files.

The goal is to give every device enough resolution without downloading a file that is larger than necessary.

The sizes attribute matters as much as the list of widths. If it is inaccurate, the browser may choose a file that is either too small or too large for the final layout.

FAQ

What is the difference between srcset and picture? srcset is for choosing between sizes of the same format. picture is for choosing between different formats or art-directed versions.

Do I need responsive images for every image? The most important images are content images and hero images. Small icons and simple graphics can often be handled with a single optimized file.

Will responsive images hurt SEO? No. Faster loading and correct image markup generally help performance and accessibility, which support SEO.

Can I test responsive images locally? Yes. Use browser developer tools to simulate different viewports and check which image file is requested.

Further Reading

• Web.dev: Responsive images
• MDN: Responsive images
• MDN: img element