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

Question

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

Answer 1

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.