GoogleChrome / GoogleChrome/lighthouse

byte-efficiency/uses-ideal-universal-image-format

Open
#7,721 3 comments 1 reaction 0 assignees View on GitHub
images new_audit P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.