This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Images on narrow devices: maximum width instead of fixed width
An image should never become wider than the space available to it. The check measures, per device profile, whether individual building blocks extend beyond the viewport — images with a fixed width are one of the most common causes.
- The basic setting that solves almost everything is a maximum width of 100 percent with automatic height. Without it, a 1200-pixel-wide photo keeps its width even on a 390-pixel screen.
- Separate from that is the question of file size: an image meant for desktop isn't just too wide on a phone, it's also unnecessarily heavy. That affects load time and shows up in the Core Web Vitals audit area.
- Images with no specified dimensions also cause layout shifts while loading — so the same mistake shows up in two audit areas.
FAQ
Is max-width: 100% enough?
For the overflow problem, usually yes. For load time, no — that also needs appropriately sized files for each screen size.
Should we specify width and height anyway?
Yes. They prevent the layout from jumping while loading. Together with a maximum width in CSS, that gives you stable rendering.