Glossary · Web Development

Responsive Images

Responsive images are images delivered in multiple sizes or formats so the browser picks the best file for the screen width, density and format support.

Updated October 6, 2026

Responsive images use HTML attributes (srcset, sizes) and the <picture> element to offer a browser several versions of an image, letting it choose the most suitable one for the device's viewport, pixel density and supported formats.

Why it matters

A phone does not need a 2400-pixel-wide photo. Serving appropriately sized files cuts page weight and improves load time and Core Web Vitals. The <picture> element also lets you offer modern formats like WebP or AVIF with a JPEG fallback. Image CDNs can generate the different sizes automatically, which removes most of the manual work involved.

Example

<img src="kettle-800.jpg"
     srcset="kettle-400.jpg 400w, kettle-800.jpg 800w, kettle-1600.jpg 1600w"
     sizes="(min-width: 900px) 50vw, 100vw"
     width="800" height="600" alt="Blue kettle">

On a narrow phone the browser downloads the 400w file.

Common mistakes

  • Omitting sizes, so the browser assumes full viewport width and downloads too much.
  • Scaling a huge image down in CSS, which wastes bandwidth.
  • Leaving out width and height, causing layout shift.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Glossary · Web DevelopmentLazy LoadingLazy loading delays loading images, scripts or other resources until they are needed, often just before scrolling into view, to speed up first load.Glossary · SEO & MarketingCore Web VitalsCore Web Vitals are Google's page experience metrics, LCP, INP and CLS, that measure loading speed, responsiveness and visual stability for real users.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.