01
Make every image shrink to fit
This one rule stops images from ever being wider than their container. Height auto keeps the proportions.
img, video, svg, iframe { max-width: 100%; height: auto; }02
Keep the shape while it loads
Set width and height attributes (the original size) so the browser reserves the right space before the image arrives. Without them the page jumps as images load, which feels broken on phones.
<img src="hero.jpg" width="1600" height="900" alt="Our studio">03
Send smaller files to phones
Offer a few sizes with srcset and tell the browser how wide the image will be with sizes. Phones then download a small file, desktops a large one.
<img
src="hero-1600.jpg"
srcset="hero-800.jpg 800w, hero-1600.jpg 1600w, hero-2400.jpg 2400w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1600" height="900" alt="Our studio">04
Images with text in them
Infographics, charts and banners with words shrink with the screen, so their text becomes unreadable on phones. Use a different, simpler image on small screens with <picture>, or put the text in HTML next to the image.
<picture>
<source media="(max-width: 767px)" srcset="chart-mobile.png">
<img src="chart-desktop.png" alt="Sales grew 40% in 2026">
</picture>Checklist
Questions
Why is my image wider than the screen on mobile?
It is shown at its natural pixel width, or has a fixed width in CSS. Add max-width: 100% and height: auto so it shrinks with its container.
Should I use width: 100% or max-width: 100%?
max-width: 100% lets an image shrink but never stretch beyond its own size, so small images don’t turn blurry. Use width: 100% only when you want an image to always fill its container.
Why do my images look blurry on phones?
Phones have high-density screens, so they need about twice as many pixels as the displayed size. Offer a larger file in srcset.