Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use srcset for high-DPI screens and <picture> for art direction. The footgun is relying only on CSS max-width; this forces mobile users to download unnecessarily large…
Why it exists
Images account for over 60% of the average page's weight. A single, large image is inefficient: it wastes bandwidth when downloaded on a small mobile screen and can look blurry on a high-resolution display. Responsive design for layouts necessitated responsive design for content.
The mental model
Instead of one image that just shrinks, think of providing the browser with a menu of options. You offer multiple versions—different resolutions, different file sizes, or even different crops—and the browser intelligently picks the best one for the user's device. You provide the hints; the browser makes the choice.
How it works
Three main techniques work together. First, basic CSS like max-width: 100% is a safety net that prevents any image from overflowing its container. Second, the srcset attribute on an <img> tag lets you list multiple image files along with "descriptors" (like 2x for high-density screens), allowing the browser to choose the sharpest, most efficient option. Third, the <picture> element provides "art direction," letting you serve completely different images based on viewport size, like a wide shot on desktop and a tight crop on mobile.
When to use it
Use max-width: 100% as a baseline for all images. Use srcset with x descriptors for any image where sharpness on high-DPI ("Retina") displays is important, like logos and hero images. Use the <picture> element when an image's composition must change to remain effective on different screen sizes.
When not to use it
For very small, non-critical, or decorative images, a complex srcset or <picture> setup can be overkill. The main mistake is not using these techniques when you should. Relying only on CSS to scale a large image is a common performance footgun that penalizes users on slower networks or smaller devices.
One canonical example
To serve a sharper image on a high-resolution display, you enhance a standard <img> tag with srcset. A browser on a 2x density screen will download photo@2x.png, while others get photo.png. The src attribute provides a fallback for older browsers.
<img src="photo.png" srcset="photo@2x.png 2x" alt="A descriptive photo.">
Interview question
What is the main advantage of using srcset or picture for images, compared to relying solely on max-width: 100%?
- a.It allows the browser to select the most appropriate image file for the user's device, optimizing bandwidth and visual quality.Correct
- b.It automatically centers images within their containers on all screen sizes.
- c.It ensures images are always loaded from a Content Delivery Network (CDN) for faster delivery.
- d.It reduces the total number of image files needed by dynamically resizing a single source image.
Why? this is the answer
The card emphasizes that srcset and picture provide the browser with a menu of image options, allowing it to choose the best one for the user's device to save bandwidth and improve display quality. Option D is incorrect because these techniques require providing multiple image files, not reducing them.
Just read this? Test yourself on what you have been reading.
Read the original → web.dev
- #css
- #html
- #performance
- #responsive design
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles