SoA 개발 일지 - <img> vs <Image>

먼저 Next.js의 태그를 사용 시

1. 이미지를 반응형으로 만들기 쉽고
2. 디바이스 별 이미지 크기 조정 쉽고
3. layout shift가 일어나지 않고
4. 뷰포트 밖의 이미지가 자동 lazy load 되기 때문에 (내 프로젝트에선 필요없지만)

태그 대신 태그를 사용하기로 했습니다.

Next.js의 태그를 사용했을 때 태그를 사용했을 때 보다 화질이 낮아짐..!

처음에 이미지가 원하는 위치에 원하는 크기로 나오는지 확인해보려고 시험 삼아 코드를 작성해보았는데 태그를 사용할 때 태그를 사용할 때 보다 화질이 낮고, 심지어 이미지를 확대하면 화질이 엄청나게 낮아지는 것을 확인하였습니다.

a. 태그의 quality 특성 활성화

quality 특성은 75가 default값으로 설정되어있습니다. 이 값을 100으로 바꾸고 비교해보았습니다.

quality = 75

quality = 100

보시다 싶이 별 차이가 없습니다.

차이가 없는 것은 아니지만 태그를 사용했을 때와 비교해보면 무의미한 정도입니다.

b. unoptimized 특성 활성화

unoptimized = {false}

<img alt="Home Map Image"loading="lazy"decoding="async"
 data-nimg="fill"
 style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent; transform: scale(1);"
 src="/_next/image?url=%2FSoA.jpeg&amp;w=3840&amp;q=100"
 sizes="100vw"
 srcset="/_next/image?url=%2FSoA.jpeg&amp;w=640&amp;q=100 640w, /_next/image?url=%2FSoA.jpeg&amp;w=750&amp;q=100 750w, /_next/image?url=%2FSoA.jpeg&amp;w=828&amp;q=100 828w, /_next/image?url=%2FSoA.jpeg&amp;w=1080&amp;q=100 1080w, /_next/image?url=%2FSoA.jpeg&amp;w=1200&amp;q=100 1200w, /_next/image?url=%2FSoA.jpeg&amp;w=1920&amp;q=100 1920w, /_next/image?url=%2FSoA.jpeg&amp;w=2048&amp;q=100 2048w, /_next/image?url=%2FSoA.jpeg&amp;w=3840&amp;q=100 3840w">

unoptimized = {true}

<img alt="Home Map Image" loading="lazy" decoding="async"
 data-nimg="fill"
 style="position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent; transform: scale(1);"
 src="/SoA.jpeg">

unoptimized를 활성화 했더니 화질이 다시 원래대로 돌아왔습니다.

그렇다면 원인을 좁혀보자면

1. 최적화 과정에서의 파일 형식 변환으로 인한 화질 저하

   개발자도구에서 확인한 결과 JPEG파일이 WebP형식으로 변환된 것을 확인하였습니다.

2. srcset으로 인한 해상도 변화

   네트워크 환경에 영향을 받기 때문에 낮은 해상도의 이미지가 로드 될 수 있습니다..!!

위 방법들을 살펴 보았을 때 Next.js가 이미지를 자동 최적화하는 과정에서 화질이 저하되는 문제가 발생함을 알게되었습니다.!!!!

그렇다면 왜!! 어느 부분이 화질을 저하시키는 직접적인 원인인지 두 가지 방법의 ( unoptimized 특성 true || false ) 브라우저 개발자 도구를 낱낱히 파해쳐보겠습니다.

(다음에… 좀 어렵네요 화질을 확인하는게ㅠㅠ)