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

bugsyb 0
Viewed 53

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). enter image description here

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

next.js image css html
1 Answers

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,

  1. 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.

Tushar Shahi0
Related