Responsive Images
Offering the browser several versions of an image so it can download the smallest one that still looks sharp on this screen at this layout size.
Responsive images let a page offer several versions of one image and leave the choice to the browser, which knows things the author doesn't: the viewport width, the screen's pixel density, and sometimes the connection. A single fixed image is either too large for a phone, wasting bytes and slowing Largest Contentful Paint, or too small for a high-density desktop display, where it looks soft.
The mechanism has two halves, and most mistakes come from supplying only one:
srcsetlists the available files with their intrinsic widths:hero-480.jpg 480w, hero-960.jpg 960w, hero-1920.jpg 1920w.sizestells the browser how wide the image will be displayed, as media conditions:(min-width: 1024px) 50vw, 100vw. The browser needs this before layout exists, because it starts image downloads from the preload scanner long before CSS is applied.
With srcset but no sizes, the browser assumes the image fills the viewport (100vw), so a thumbnail in a three-column grid downloads a full-width file. This is the most common responsive-image bug, and it is invisible: the page looks perfect and costs several times what it should. Lighthouse's "properly size images" warning is usually this. The duplication is real. sizes restates in HTML what the CSS layout already decides, and it falls out of date when the layout changes, much like a Responsive Breakpoint copied into two places. Newer browsers accept sizes="auto" for lazily loaded images, measuring the laid-out size instead, which closes the gap for container-driven layouts.
<picture> handles two further jobs. Art direction means a different crop at different widths, not only a different resolution. Format negotiation means offering AVIF or WebP with a JPEG fallback, chosen by type, which is Progressive Enhancement for codecs.
Related hygiene: explicit width and height attributes reserve space and prevent layout shift; loading="lazy" belongs on images below the fold and never on the main above-the-fold image, which instead deserves fetchpriority="high" or a preload (see Lazy Loading). Generating every size by hand doesn't scale, so most sites delegate it to a build step or an image service at a Content Delivery Network edge that resizes on request and caches the result.
See also4
Object Storage
Storage that keeps whole files as objects addressed by key in a flat namespace over HTTP, cheap and nearly limitless, which became the foundation for backups, media, and data lakes.
Data & Content8 connections
Pixel
The smallest addressable element of a digital image or screen, better understood as a point sample than as a little square, whose physical form, shape and density vary enough between devices that the web had to invent a separate reference pixel.
Graphics & Rendering6 connections
Above the Fold
The part of a page visible without scrolling, a newspaper idea carried onto the web, where it still matters for first impressions and loading but no longer means people won't scroll.
Design & Interface10 connections
Image Format
The file formats the web uses for pictures, from the GIF, JPEG, and PNG generation to newer formats derived from video codecs, and the slow, politics-laden process by which a new one becomes safe to use.
Web Platform9 connections
Linked from10
- Aspect RatioGraphics & Rendering
The proportion of an image's width to its height, from early film's nearly square frames through cinema's widescreen answer to television, the 16 by 9 compromise, and the vertical video of phones.
- Core Web VitalsWeb Platform
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
- Data CompressionComputation & Algorithms
Representing data in fewer bits by exploiting its patterns, either exactly (lossless) or by discarding what people won't notice (lossy), with limits set by information theory.
- Image FormatWeb Platform
The file formats the web uses for pictures, from the GIF, JPEG, and PNG generation to newer formats derived from video codecs, and the slow, politics-laden process by which a new one becomes safe to use.
- JPEGGraphics & Rendering
The dominant photo format since 1992, which shrinks images about tenfold by converting 8×8 blocks into frequency patterns and rounding away the fine detail the eye barely notices.
- Layout ShiftWeb Platform
Visible content jumping position after it first appears, usually because something loaded late without reserved space, measured by browsers as Cumulative Layout Shift.
- Lazy LoadingWeb Platform
Deferring the fetch of a resource until it is needed, or until the browser is idle.
- PixelGraphics & Rendering
The smallest addressable element of a digital image or screen, better understood as a point sample than as a little square, whose physical form, shape and density vary enough between devices that the web had to invent a separate reference pixel.
- User Agent StringWeb Platform
The header every browser sends to identify itself, which grew into a pile of mutual impersonations because sites served different pages to different browsers, and why it's being frozen.
- Vector GraphicsGraphics & Rendering
Images described as shapes and curves rather than a grid of pixels, so they stay sharp at any size, the basis of fonts, icons, logos, and maps.