How to size images for the screen they are shown on
SpeedBest practices1 min readFixes 2 checks image-sizing, images-oversized-dimensions
Sending a 2400 px image to a 390 px phone wastes most of the bytes. Responsive images with srcset let the browser pick the right size.
Step by step, with screenshots: Core Web Vitals for e-commerce: product and category pages →
Check your own site
Runs these 2 checks and the other 185, free, in about 45 seconds.
What a passing site looks like
- Images are sized for how they are displayedwarning · −4 ptseffort S
- Every sized image is served close to its displayed sizewarning · −1.5 ptseffort M
1. Image sizing
Why it matters. Sending a 2000 px photo to a 400 px slot wastes most of the bytes. Responsive images let the browser pick the right size for each screen.
How to fix it.
- Add srcset and sizes to <img> so phones get small versions; most CMSs generate the sizes for you.
- Resize the originals to the largest size you actually display.
2. Oversized images
Why it matters. Sending a 1600-pixel photo for a 300-pixel slot downloads about 28 times more pixels than needed. The browser scales it down and the visitor pays for the difference.
How to fix it.
- Resize the listed images to the largest size they are shown at (twice that for high-density screens).
- Use srcset with several sizes so phones get a smaller file than desktops.