UX / UI Medium impact Easy 10–20 min

Responsive images

Images must fit on mobile without horizontal scrolling.

What it is

An image with a fixed large width (e.g. width="1200") can overflow off-screen on a narrow mobile and cause horizontal scrolling of the whole page.

Why it matters

Horizontal scrolling is one of the most annoying UX problems on mobile: it breaks the layout and looks unfinished. It's easily prevented with a single CSS rule.

How to do it

1Give images max-width: 100% and height: auto.
2Specify width and height in the HTML for layout stability (CLS), but constrain them in CSS.
3For various sizes, consider srcset / <picture>.
4Test at a narrow width (~360px) to ensure nothing scrolls horizontally.

Example

Correct

img { max-width: 100%; height: auto; }

Conclusion

A single rule (max-width:100%; height:auto) solves most image overflow on mobile. Add dimensions in the HTML for CLS, and for large visuals consider srcset. A quick fix for a common mobile ailment.