Lower quality images in Next.js "Image" vs. normal "img" tag

Issue

I'm working with Next.js, and for some reason my images are looking somewhat blurry when I use Next/Image.

Here's what my code looks like:

  <img src={url} width={articleWidth} />
  <Image
    className="text-center"
    src={url}
    alt={alt}
    width={width}
    height={height}
  />

Here's what the images look like (it might be a bit difficult to tell but the Next/Image version is clearly blurrier on my monitor).

A few other pieces of info I noticed

• The version using the img tag had an intrinsic size of 2016 x 1663 and the version using Next/Image had an intrinsic size of 750x615

How do I make Next/Image images look just as clear as my regular img component

Solution

Next.js creates versions of your image on run time and serves the apt sized image to render.

If you want to opt out of it:

1. You can selectively use the unoptimized prop:

 <Image
    className="text-center"
    src={url}
    alt={alt}
    width={width}
    height={height}
unoptimized
  />

or,

2. Using the unoptimized option in next.config.js:

module.exports = {
  images: {
    unoptimized: true,
  },
}

When above is set true images will be served as is, without any size change.

Answered By - Tushar Shahi