CODEWITHSUNDEEP
reactjsnext.jsnextjs-image
Developer
Developer

Reputation: 81

Poor next.js image component quality on Google Chrome

I am developing website using next.js framework. I have some problems with Image component in Google Chrome. It loading with poor quality. But when you download that image from browser it has perfect quality. No problem with other browsers.

           <Image
              src={url}
              layout='responsive'
              quality={100}
              height={500}
              width={1250}
            />

I tried to clear cache, but not helps. Maybe chrome incorrectly tells browser's size. How can I fix image quality in chrome?

Upvotes: 4

Views: 15575

Answers (3)

omkar sawant
omkar sawant

Reputation: 11

Check the sizes prop at [NextJS Image] [NextJS Image]: https://nextjs.org/docs/pages/api-reference/components/image An example:
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

Now it renders with good quality on larger devices and optimised version on smaller screens. Read the documentation for details!

Upvotes: 1

Arne Sneyers
Arne Sneyers

Reputation: 21

The above answer is not really satisfactory since it doesn't fix the issue since your site would still load big images that would reduce loading time (and pollute our environment).

The issue comes from the width property and chrome not being able to handle it well. Setting your width to the desired width would fix the issue in a more graceful way.

A site I worked on had external images up to 7.2mb, this got reduced to 30.6kb.

You could start specifying multiple widths per device in order to serve different formats to multiple devices.

Upvotes: 2

Murad
Murad

Reputation: 153

You can add unoptimized={true} property, then it will be served as the original size. Here you can find more information about Nextjs Image features Link.

You can also add priority property to your image, then it will serve an optimized image with no affected quality.

<Image
 src={`/images/sample.png`}
 height={500}
 width={500}
 objectFit="cover"
 layout="fill"
 alt="carousel"
 priority
/>

Upvotes: 15

Related Questions