next/image to skip image format transformation for source images that are already in an optimized format, but still resize the image.

[PlagueFPS]

Goals

1. Avoid running .avif() or .webp() on an already optimized image, reducing it's quality, even if we pass quality={ 100 }
2. Still allow for these source images to be resized for the end user's device viewport
3. Allows for faster on-demand image optimization if the source is already in an optimized format.

Non-Goals

1. Removing the .avif() and .webp() transformation all together.
2. Disallow resizing of optimized image formats.
3. Affect non-optimized source image formats

Background

This feature is needed because its current implementation is unintuitive for the developer. If I pass a source AVIF image with quality = 100, I am expecting next to serve my source image in its full quality and only apply resizing as needed for the end user's device. We should be able to control the exact quality of the image we pass in with the quality property. I assumed that was the whole point of the property.

Similarly, if I only specify in the next config "image/webp" and I pass a source webp image, and pass quality = 100 to next/image, next will still run the .webp() transformer, granted with my passed in quality so the image will not look any worse, but it's an unnecessary step that can be avoided, saving some resources.

There are no current alternatives with next/image since AVIFs receive the -20 in quality via the transformer, so the only alternative is to not use next/image and create your own source set. With WEBPs, the end image is not noticeable any different, but there is a step under the hood that could be skipped, but is not nearly as important as for AVIFs, since it is much more CPU intensive.

Proposal

After running the image resizing, but before the format transformation detect the contentType of the source buffer and if it matches image/avif and the passed in quality param equals 100, skip the .avif() transformation, however if image/avif does not exist in the next.config image formats don't skip the .webp() transformation on the source avif buffer.

If the source buffer is a WEBP, 'image/avif' does not exist in the next.config, and the passed-in quality param equals 100, skip the .webp() transformation. Yes I am open to contributing to both the documentation and source code implementation for this feature.

[styfle]

To summarize this feature into one sentence, it would be something like “preserve source image quality when source image format matches optimized image format”, is that right?

I think this would first need to be implemented using an experimental config option in next.config.js.

Perhaps “skipImageQuality: true” (I can’t think of a good name for this feature).

[PlagueFPS]

Yeah that sentence sums it up well enough, the description can provide the additional nuances. Yes, I agree this would need to be enabled via an experimental config option to test it at first.

Perhaps a less intimidating name would be "useSourceQuality: true" although another "use" even in config might cause headaches. I can't really think of a good name for this feature either.

[PlagueFPS]

Actually given the summary you gave, preserveSrcQuality: true seems appropriate here.