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 of2016 x 1663
and the version usingNext/Image
had an intrinsic size of750x615
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:
- 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 innext.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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.