[Next.js] 이미지 태그 화질 조정하기

위 사진을 보면 화질이 뭔가 묘하게 안좋은 느낌이있다.

img태그를 사용했을때는 원본 화질이 잘 나왔는데, 넥스트의 이미지태그로 수정하니 화질이 떨어졌다.

 

해결 방법은 Image태그에 quality 속성을 지정하는것

기본값이 75이고, 100으로 지정해주면 원본과 같은 화질로 출력된다.

<Image
  width={256}
  height={176}
  alt="Recipe Thumbnail Image"
  className="w-64 h-44 object-cover object-center"
  src={item.RCP_IMG_SMALL ? item.RCP_IMG_SMALL : ""}
  quality={100}
/>

 

 

위 사진보다 확실히 화질이 좋아진 것을 확인할 수 있다.