GoogleChrome / GoogleChrome/lighthouse
Image sizes incorrectly flagged as too large for display context
- 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
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