Next.js Discord

Discord Forum

Keep quality when using Image component

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
I want to use NextJS Image component to serve images with sizes that depend on the user device width (and use other features).

However, I want to keep a good quality for specific images because these are photography pics. The problem is even when I use quality={100}, NextJS deteriorates the quality of the images, especially the colors that are much less vibrant (like a vibrant red will become a pale red).

I've tried with webp and avif formats but same results.

My solution so far is to use a free online image compression tool, that reduce the size of my images without changing the colors, and use the default img tag, but I loose the benefits of the Image component.

0 Replies