Next Image should be explicit about how the component can return the original Image

[M-Valentino]

Goals

1. Next.js should recognize that compressing raster images to webp is not suitable in all use cases.
2. Next Image needs clearer documentation regarding image compression.

Non-Goals

Background

I have a website where I have a portfolio gallery of my technical art. I'm using Next Image to compress the previews of the images except for this one image which is in pixel art.

On my page, all image data is mapped to a set of components including Next Image, except for the pixel art image which is mapped as a regular html image. I originally did not know that image quality of 100 seems to return the original image, so I ended up coding something kind of clunky:

                    {portfolioItem.imageType === "regular" ? (
                      <Image
                        src={`/portfolioImages/${portfolioItem.name}`}
                        alt={portfolioItem.title}
                        quality={97}
                        width={440}
                        height={320}
                        style={{ objectFit: "cover", maxWidth: "100%" }}
                      />
                    ) : (
                      <img
                        src={`/portfolioImages/${portfolioItem.name}`}
                        alt={portfolioItem.title}
                        style={{
                          width: 440,
                          height: 320,
                          objectFit: "cover",
                          maxWidth: "100%",
                          imageRendering: "pixelated",
                        }}
                      />
                    )}

If you look at the docs, it doesn't mention anything about image qualities of 100 returning the original image. I'm afraid to simply refactor my code by placing this pixel art image in a Next Image with a quality of 100 since this behavior could change in the future with new Next releases. I'm not even sure if image qualities of 100 return the original image in all cases. Having the original image being returned by setting the quality to 100 isn't very intuitive, since image editing programs like Photopea can export images to webp using a percentage range where 100% is still a compressed wepb. With all this confusion, it is annoying that Next.js has an ESLint warning for not using Next Images on by default.

Besides pixel art, having uncompressed images displayable is useful in the world of scientific computing.

Proposal

I propose that Next Image is more clear about their documentation regarding quality and documenting how the original image can be returned (if this feature currently exists).

I propose that an optional boolean parameter be added to Next Image that gives the option to return original images.