Responsive Images
Definition
A single image at a single size is always wrong somewhere: big enough for a desktop and it is wasteful on a phone, sized for a phone and it is soft on a laptop. The srcset attribute lists candidate files along with their intrinsic widths, written with w descriptors, and the sizes attribute tells the browser how wide the image will be laid out, in CSS pixels, at each breakpoint. The browser combines the two with the device pixel ratio and fetches one file. A related but different job, usually called art direction, swaps a differently cropped image at different breakpoints and uses the picture element with media attributes instead. The same picture element, with type attributes, is also how you offer one format with a fallback to another.
Why It Matters
The waste is bigger than it looks, because pixels scale with area. A 2000-pixel hero rendered into a 390-pixel phone layout at 2x density is about six and a half times the pixels needed and roughly twenty-six times more than a 390-pixel version, which in bytes is something like 480 KB against 45 KB. That saving lands directly on the Largest Contentful Paint for anyone on mobile data. The most common way to get none of it is to write a srcset and leave out sizes: with no sizes, the browser assumes the image will be as wide as the viewport, picks the largest candidate, and you have shipped the big file anyway while feeling organised about it.
How It Works
A typical img carries srcset with entries like hero-480.webp 480w, hero-960.webp 960w and hero-1600.webp 1600w, plus sizes such as (max-width: 700px) 100vw, 640px. The browser works out the layout width from sizes, multiplies by the device pixel ratio, and takes the smallest candidate at least that wide — though implementations are allowed to choose differently under data-saving conditions. For fixed-size images like avatars, x descriptors such as 2x are simpler. Wrapping the img in a picture element lets you add source children with type attributes of image/avif and image/webp before it, and the first type the browser recognises wins. Keep alt, width and height on the img itself. Since the decision happens entirely in the browser, a static host only has to have every file sitting at its URL.
Real-World Example
A long-form article is published on 99helpers at long-read.99helpers.site. It began with one 1800-pixel JPEG of 520 KB sent to everybody; it now offers 480, 960 and 1600-pixel WebP versions with a matching sizes attribute, so a phone pulls 62 KB and a desktop pulls 210 KB. Images further down the page are left to lazy loading, so a visitor who reads the first two paragraphs and leaves downloads almost nothing.
Common Mistakes
- ✕Writing srcset without sizes — the browser assumes full viewport width, picks the largest file, and the optimisation achieves nothing
- ✕Listing widths that do not match the real layout — three candidates clustered between 1200 and 1600 pixels help nobody on a phone
- ✕Using the picture element for simple resolution switching — srcset on a plain img does that job with far less markup
- ✕Giving each candidate a different crop by accident — the browser may swap between them on resize, and the subject jumps
Related Terms
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
Lazy Loading
Lazy loading defers fetching an image or iframe until the visitor is close to scrolling it into view, so only what is actually looked at gets downloaded. In a browser it is one attribute: loading set to lazy.
Alt Text
Alt text is the alt attribute on an HTML image: a short written replacement for the picture, read aloud by a screen reader and shown when the image fails to load. A decorative image takes an empty alt, not a missing one.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →