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

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:
You can selectively use the unoptimized prop:
<Image
className="text-center"
src={url}
alt={alt}
width={width}
height={height}
unoptimized
/>
or,
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.