GoogleChrome / GoogleChrome/lighthouse

Image sizes incorrectly flagged as too large for display context

Open
#16,579 11 comments 7 reactions 0 assignees View on GitHub
bug needs-investigation needs-priority
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

### FAQ

- [x] Yes, my issue is not about [variability](https://github.com/GoogleChrome/lighthouse/blob/main/docs/variability.md) or [throttling](https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md).
- [x] Yes, my issue is not about a specific accessibility audit (file with [axe-core](https://github.com/dequelabs/axe-core) instead).
- [x] Yes, my issue is not answered by [other FAQs](https://github.com/GoogleChrome/lighthouse#faq).

### URL

https://pagespeed.web.dev/analysis/https-checkmatefire-staging-ledgardjepson-net/hwnevlfqhj?form_factor=desktop

### What happened?

Both Lighthouse and PageSpeed insights are flagging hero images that are correctly sized as being incorrectly sized when looking at "desktop device" audit results.

Go to: Pagespeed insights > analyze: https://checkmatefire.staging.ledgardjepson.net > Desktop tab > click "Try insights" > Unfurl "Improve image delivery" insights > we see:

`This image file is larger than it needs to be (1440x600) for its displayed dimensions (1335x556). Use responsive images to reduce the image download size.`

Firstly, the actual flagged image size is already very close to the display dimensions mentioned, AFAIK it's within the threshold (image is 25% larger or smaller than it's current display context) to not be flagged for being incorrectly sized for the display context.

Secondly, this flagged image size is already part of a Responsive image pattern that supplies a range of image sizes, of which the browser should be choosing the most suitable for the display context anyway. Namely `1170w`, `1300w` and `1440w` within the desktop image's `` tag.

We have used this exact hero image pattern for a long time and not seen this flagged before, as recent as 3 weeks ago it was not being flagged during the same test, so I believe this might be a newly introduced bug.

### What did you expect?

The images to not be flagged for being too large as they are already close to the display dimensions

### What have you tried?

Double checked the responsive image pattern

### How were you running Lighthouse?

PageSpeed Insights

### Lighthouse Version

Lighthouse 12.6.0

### Chrome Version

Version 138.0.7204.51

### Node Version

_No response_

### OS

MacOS

### Relevant log output

```sh

```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported URL in PageSpeed Insights using the Desktop tab and Lighthouse 12.6.0, then inspect the “Improve image delivery” insight for the 1440x600 image. Done means the responsive hero image is no longer incorrectly flagged when its displayed dimensions are close to the selected source size.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.