🌟 next/image
Next에서는 자체적으로 이미지 최적화를 지원해주고 있다. 이를 이용함으로써 얻을 수 있는 장점은 다음과 같다.
- 사이즈 최적화
- 디바이스 사이즈에 따라 WebP and AVIF와 같은 모던 이미지 포맷으로 적절한 사이즈의 이미지를 내려줌
- 이미지가 로드될 때 레이아웃이 변경되는 것을 방지
- 이미지 로딩 시, 다른 element들을 밀어내면서 레이아웃이 변경되는 것
- lazy loading(placeholder 설정 가능)를 통한 빠른 페이지 로드 - 사용자가 보는 곳에 있는 이미지만 로드
next/image를 사용하기 위해서는 width와 height 속성을 지정해 주어야 하는데, 이는 종횡비를 위함이지 렌더링되는 사이즈와는 관계가 없고, 이미지가 로드될 때 레이아웃이 변경되는 것을 방지(장점 2)하기 위해 사용된다고 한다.
👊 WebP, AVIF
- WebP
- PNG, JPEG 등 기존 이미지 포맷보다 파일 크기가 작음
- 다양한 웹 브라우저와 호환
- 파일 저장 시, 무손실/손실 압축 선택 가능
- AVIF
- WebP보다 더 압축된 이미지
- 지원하는 브라우저가 많지 않음
👀 어떻게 알고 브라우저마다 지원하는 확장자의 이미지를 내려줄까
WebP도 그렇고 AVIF도 그렇고 지원하지 않는 브라우저 및 버전이 있는데, 이런 걸 어떻게 판별해서 내려주는 걸까? 답은 이미지를 요청하는 과정에서 헤더에 Accept라고 브라우저 본인이 허용하는 이미지 확장자를 실어 보내는데, 이를 바탕으로 검증해서 지원하는 확장자로 내려주게 되어있다.
- 크롬
