Graphics Responsive Images Recap
Responsive images solve a raster-specific problem — one image file is never the right size for every screen — by letting the browser choose from several candidates or crops based on the viewport.
One File Doesn't Fit All Screens
A photo sized perfectly for a 4K desktop monitor is wasteful on a small phone, and a photo sized for a phone looks soft stretched across a desktop hero banner. Responsive image techniques let a single img element offer the browser several versions of the same picture and trust it to pick the best one for the device actually viewing the page.
Resolution Switching with srcset
The srcset attribute lists multiple copies of the same image at different widths (or pixel densities), and the browser — knowing the viewport size and the screen's pixel density — downloads only the one candidate it actually needs. This is resolution switching: same image, same crop, just different file sizes to match different screens.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img
src='hero-800.jpg'
srcset='hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w'
sizes='(max-width: 600px) 100vw, 50vw'
alt='Product hero shot'
/>
</body>
</html>Telling the Browser the Layout with sizes
srcset alone only tells the browser what candidates exist — sizes tells it how wide the image will actually render at different breakpoints (for example, full viewport width on mobile but half the viewport on desktop). With that hint, the browser can pick the right candidate before layout even finishes, rather than guessing.
Art Direction with the picture Element
Resolution switching assumes the same composition at every size, but sometimes a design calls for a genuinely different crop on mobile than on desktop — a tight portrait crop on a phone versus a wide landscape shot on a desktop hero. That's art direction, and it's what the picture element with multiple source/media conditions is for, rather than srcset alone.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<picture>
<source media='(max-width: 600px)' srcset='hero-mobile.jpg' />
<source media='(min-width: 601px)' srcset='hero-desktop.jpg' />
<img src='hero-desktop.jpg' alt='Product hero shot' />
</picture>
</body>
</html>Exercise: Graphics Performance
Which statement about smoothly animating graphics in the browser is accurate?
