Lighthouse can flag an image when its served dimensions exceed the rendered size after accounting for screen pixel density and the estimated byte savings are material. Serve appropriately sized variants for different screens and compress them sensibly. OpticBatch from Automata Labs handles the file-preparation step by resizing and converting whole folders locally; the site still needs markup that selects the right variant.
Resize and convert entire image folders locally, with a live estimate of the size savings.
Get it fromMicrosoft
Where did the “Properly size images” audit go?
The Lighthouse team’s post on moving Lighthouse to performance insights describes the Lighthouse 13 consolidation. The advice formerly labeled Properly size images is now part of Improve image delivery, along with three other audits:
| Older audit ID | Former audit name | Now part of |
|---|---|---|
| uses-responsive-images | Properly size images | Improve image delivery |
| uses-optimized-images | Efficiently encode images | Improve image delivery |
| modern-image-formats | Serve images in modern formats | Improve image delivery |
| efficient-animated-content | Use video formats for animated content | Improve image delivery |
If you are following an older tutorial and cannot find the audit name, look for Improve image delivery instead. Older Lighthouse versions can still show the former names.
How does Lighthouse decide an image is too big?
The original audit compares an image’s intrinsic dimensions with its rendered dimensions, accounting for device pixel ratio, and estimates the bytes wasted by serving unnecessary pixels. Its documented threshold is 4 KiB of potential savings, not a difference measured in pixels.
The newer Improve image delivery insight also evaluates encoding efficiency, using the download size and an efficient bytes-per-pixel estimate for the format. Chrome’s documentation says estimates below 4 KiB are not flagged.
Tiny estimated wins are ignored. A 3000 pixel photo shown in a 400 pixel column can be a candidate, but the result still depends on pixel density, encoding and estimated byte savings.
What size should my images be?
Work out the displayed width in CSS pixels, then multiply by the device pixel ratio you want to support. A standard display has a ratio of 1, and many phones and high density laptops use 2 or 3.
| Displayed width (CSS pixels) | At 1x | At 2x | At 3x |
|---|---|---|---|
| 300 | 300 px | 600 px | 900 px |
| 400 | 400 px | 800 px | 1200 px |
| 800 | 800 px | 1600 px | 2400 px |
| 1200 | 1200 px | 2400 px | 3600 px |
You rarely need the 3x version for large photos, since the visual gain is small and the bytes are not. Many sites settle on 1x and 2x versions, and let the browser choose.
How do I serve the right size to each screen?
Chrome’s documentation recommends a few strategies:
- Responsive images. Generate several versions, then use the
<img>element’ssrcsetandsizesattributes to describe the available widths and intended display size. The browser selects a candidate for its viewport and pixel density. - Image CDNs. A CDN can generate appropriately sized variants on request instead of requiring every version to be exported manually.
- Vector formats. SVG suits genuinely vector-based icons and logos that need to scale without generating a separate raster at every size.
For WordPress, the documentation advises uploading images through the media library so the required sizes are generated, then inserting them from the library so the right sizes are used.
What else does the Improve image delivery insight check?
Beyond size, the insight recommends:
- Increasing compression. Tune compression and inspect the result: smaller downloads can come at the cost of visible detail.
- Using modern formats. AVIF and WebP can reduce bytes for suitable images compared with older JPEG and PNG encodings. Compare actual outputs rather than assuming every conversion is smaller.
- Using video for animation. MPEG4 or WebM can be more efficient than a large animated GIF. Static artwork can use an appropriate still-image format instead.
If you are weighing the two modern formats, our comparison of AVIF versus WebP goes into detail.
How do I resize a whole folder of images for the web?
If your site does not generate sizes for you, a static site or an online shop export, for example, you need to make the files yourself. A practical routine:
- Measure the display width of each image slot on your site, such as a blog column, product card and hero banner.
- Pick target widths at 1x and 2x for each slot from the table above.
- Batch resize each set of images to a maximum width, keeping the aspect ratio.
- Set a quality level that keeps the image looking right. Check a few results at full size.
- Convert to WebP if your site and audience support it, keeping a JPEG or PNG copy where you need a fallback.
- Update your markup so each image lists its sizes in
srcset, or point your platform at the new files. - Re-run Lighthouse and check the Improve image delivery insight.
How does OpticBatch help with oversized images?
OpticBatch is a bulk image resizer and converter for Windows. According to its Microsoft Store listing, it offers:
- Resizing by maximum width, maximum height, percentage or exact dimensions, with aspect-ratio controls.
- Conversion between JPEG, PNG and WebP for the workflow shown here.
- A quality slider from 1 to 100 for lossy formats, with estimated file-size savings. Inspect actual exports rather than treating the estimate as a measured page-speed result.
- Batch error handling that identifies corrupted inputs while continuing with other files.
- Atomic output writes designed to avoid leaving a partial output when a job is interrupted. Keep source originals and inspect the completed batch.
- Local processing, with no forced account and no telemetry.
Batch resize to a maximum width and convert to WebP in one pass, without uploading a single file.
Get it fromMicrosoft
This walkthrough uses JPEG, PNG and WebP, the formats described in the Windows Store listing. Our product pages also describe AVIF workflows; check the export options in your installed build rather than treating a listing’s shorter format list as an exhaustive limit. OpticBatch prepares image files rather than your site’s markup, so you still add srcset and sizes in your site or theme. For a deeper look at keeping images sharp while shrinking them, see resize images without losing quality and bulk resize images on Windows 11. If you sell online, check Google Merchant Center image requirements before shrinking product photos, since feeds have their own minimums.
Frequently asked questions
Why does Lighthouse still flag an image I already resized?
It may be displayed smaller on some screens than the size you chose, or the compression may leave savings above the 4 KiB threshold. Check the displayed size and quality setting.
Does Lighthouse account for Retina and high density screens?
Yes. Chrome’s documentation says the rendered size accounts for device pixel ratio.
Is it enough to set width and height in HTML?
No. Those attributes control layout, not the file you download. A large file displayed small is still a large download.
Should I convert everything to WebP?
Chrome recommends modern formats, and WebP is widely supported. Keep originals, and test any images where quality matters most.
Can OpticBatch create AVIF files?
Our product pages describe AVIF workflows, while the Windows Store description used for this guide names JPEG, PNG and WebP. Check your installed build’s output choices before planning an AVIF delivery. The resizing and WebP workflow here does not depend on AVIF support.
Try OpticBatch
Get OpticBatch from the Microsoft Store. It is a one-time purchase with no subscription, and the Store listing shows the current price.
Prepare web-ready image sets in bulk, entirely on your own PC.
Get it fromMicrosoft
Microsoft and Windows are trademarks of the Microsoft group of companies. Chrome and Lighthouse are trademarks of Google LLC. WordPress is a trademark of the WordPress Foundation. OpticBatch is not affiliated with or endorsed by Microsoft, Google or the WordPress Foundation.