How to size images for the screen they are shown on
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: Responsive images: srcset and sizes explained with real numbers →
Check your own site
Runs these 2 checks and the other 191, free, in about 45 seconds.
Or run only this check with the free Image compressor, the free Image size checker or the free Mobile-friendly test + CSP generator.
What it is
Properly sized images are image files whose pixel dimensions match the size they are shown at on the visitor's screen, with room for high-density displays. When a 2400 px wide photo fills a 390 px wide phone screen, the browser downloads many times the pixels it can show and throws the rest away.
getReport flags images served at more than twice their displayed width, and Lighthouse estimates the bytes saved by serving the right size. Up to twice the displayed size is fine for sharp images on high-density screens; beyond that you pay in data and loading time, which hurts Largest Contentful Paint when the hero image is oversized. The fix is responsive images: several sizes in a srcset, so each device picks the one it needs.
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.
- 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.
- 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.
Questions people ask
How do I properly size images for a website?
Export each image at no more than twice the largest width it is shown at, and let the browser choose between sizes with srcset and sizes. For example, a content image shown at up to 800 px wide needs versions around 400, 800 and 1600 px. A full-width hero typically needs widths up to about 2000 px for large, high-density screens.
How do I fix properly size images in WordPress?
WordPress already creates several sizes of each upload and adds srcset automatically when you insert images with the block editor. The warning usually comes from themes or page builders that output the full-size original, or from images in custom HTML. Choose a smaller image size in the block or widget settings, enable responsive images in the builder, and avoid uploading 5000 px originals.
What does properly size images mean in PageSpeed Insights?
It means some images on the page are larger, in pixels, than the space they occupy on screen, and Lighthouse has calculated how many bytes a smaller version would save. The mobile test uses a phone-sized screen, so desktop-sized images in a mobile layout are the usual trigger. The list shows each image with its potential saving, so start with the largest.