Add lossless prop to next/image component

[styfle]

Describe the feature you'd like to request

Some images have poor quality from lossy compression when converting to webp or avif formats, even when quality={100}.

In particular, gradients suffer from Color Banding.

Examples:

• https://steventey.com/blog
• https://twitter.com/adrianmg/status/1466906559565348866

Describe the solution you'd like

This can be resolved with a new prop, lossless={true}, that can be used to enable lossless compression.

Its supported by many tools already such as:

• squoosh
• sharp
• imgix

Describe alternatives you've considered

An alternative is to use q={100} to indicate lossless which seems to be how cloudinary does it.

This would be much easier to implement than adding a new prop, but might be a breaking change.

[adrianmg]

Some more information: #28614 (comment)

I'm not sure what's being used behind the scenes but cwebp offers two similar flags -lossless and near_lossless <int> (0-100) to adjust things as needed. Having one of them will probably be enough to avoid running into banding issues 👍

[Brooooooklyn]

Parcel has an lossless image optimizer based on mozjpeg and oxipng: https://github.com/parcel-bundler/parcel/blob/v2/packages/optimizers/image/src/lib.rs

Ref: https://twitter.com/devongovett/status/1439700949551906816

[predaytor]

Any updates? Using the Astro framework with Vercel Image Optimization (/_vercel?image=). Images regardless of the format (avif, webp) and quality (90-100) look desaturated and have the artifacts described above. This is unacceptable. What's the point of small image sizes if they look terrible? They need to do something about compression.