목록이미지 최적화 (1)

코린이의 개발 일지

[Next.js] Image 컴포넌트와 이미지 최적화

Image 컴포넌트 기능 Next.js에서 제공하는 Image 컴포넌트가 기본적으로 지원하는 최적화 기능이 있다. 1. 포맷 및 사이즈 변환 용량 최소화를 위해 png 포맷에서 webp 포맷으로 변경되어 다운로드 된 것을 확인할 수 있다. 또한 원래 이미지 사이즈가 아닌 현재 컴포넌트에 맞춰서 자동으로 사이즈 변환된 것을 확인할 수 있다. 이러한 포맷 및 사이즈 변환 작업은 이미지에 대한 최초 요청시에 Next.js 서버에서 진행되며, 이후 요청에는 캐시가 만료될 때까지 캐시된 이미지가 제공되기 때문에 첫번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있다. 만약 파일 크기 및 포맷 변환을 막고 이미지 퀄리티 그대로 가져오고 싶다면 unoptimized 옵션을 false로 주면 된다. 2. lazy loa..
웹 (web)/프론트엔드 2023. 7. 13. 00:38
이전 Prev 1 Next 다음