Next.js Discord

Discord Forum

<Image /> component makes the image bad quality

Answered
M7ilan posted this in #help-forum
Open in Discord
M7ilanOP
I have noticed that the <Image /> component makes the image resolution bad while the normal <img> is better.
I still want to use the <Image /> component so is there a way to fix that?
Answered by Ray
import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
View full answer

13 Replies

M7ilanOP
This Image uses <Image /> component
<Image priority src={bookImage} className="hidden lg:block shadow-lg" width={1436} height={1840} alt="Book" />
This Image uses <img> tag
https://www.bungie.net/common/destiny2_content/icons/73cc6c8380e2b36ce6578a8c92875b7a.png
<img src={bookImage} className="hidden lg:block shadow-lg" alt="Book" />
if anyone want to test it here's the [repo](https://github.com/M7ilan/D2Lore)
for comparing
- [uses img tag](https://bray.tech/3/4611686018516218859/2305843009845484706/collections/lore/2261683515)
- [uses Image component](https://d2lore.vercel.app/)
Ray
try setting unoptimized in the Image component
Ray
import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
Answer
Ray
your original image is png and the Image component converted it webp for better performance and also smaller size
M7ilanOP
Works perfectly for me, Thanks man.
They should have mentioned this prop in the [Props](https://nextjs.org/docs/app/api-reference/components/image#props) section
M7ilanOP
I mean yea it's there but if it were in the [Props](https://nextjs.org/docs/app/api-reference/components/image#props) section I wouldn't be here.