GoogleChrome / GoogleChrome/lighthouse
byte-efficiency/uses-ideal-universal-image-format
- Dominant language
- JavaScript
- Stars
- 30.8k
- Forks
- 9.8k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 20
Description
**Feature request summary**
It's pretty common for websites to serve up an image in the non-ideal universal image format. For example, a PNG with no alpha channel (no transparency) could arguably be served as an optimized JPEG and receive considerable byte savings.
As @tomayac pointed out:
> There might still be reasons where you would want the pixel fidelity of PNG without the need for transparency, but where PNG beats SVG and where only a fixed size is required. Maps like [this](https://upload.wikimedia.org/wikipedia/commons/5/57/India-locator-map-blank.svg) are an example (running it through SVGO is lossy, check the Andaman and Nicobar Islands).
This could be considered an edge case, and it's up to the developer to judge whether or not the audit makes sense for their particular application.
We have a working prototype of this audit running in our own Lighthouse service using Sharp's [hasAlpha metadata](https://sharp.dimens.io/en/stable/api-input/#metadata) to detect the use of transparency -- however we're not sure how much this conflicts with Lighthouse contribution guideline of `Not have[ing] a significant impact on our runtime performance or bundle size.`
**What is the motivation or use case for changing this?**
Shopify aims to automate image processing as much as possible for merchants. Some of our merchants are uploading PNGs without realizing the impact it's having on performance. It would be great if we could detect this situation and also get a byte savings estimate.
**How is this beneficial to Lighthouse?**
We're getting saving estimates in the 10's of mb for some of our stores that include some massive PNGs. I'm sure this situation is not unique to Shopify.
Contributor guide
Research direction
Start by reviewing Lighthouse's existing image-related audits and the contribution guideline on runtime performance and bundle size. Evaluate the proposed Sharp hasAlpha-based detection and byte-savings estimate against those constraints. Done would mean a defined audit that identifies non-ideal image formats and reports savings without unacceptable performance or bundle-size impact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- performance, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100