반응형 2022/09/191 next/image : next.js에서 제공하는 이미지 최적화 태그 지금까지 몰랐다. 공식문서를 흐린눈으로 보다가 우연히 알게 되었다. next.js에서 제공하는 태그의 확장 컴포넌트인 태그는 이미지 최적화 기능이 있다고 한다. Improved Performance : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공 Visual Stability : width,height를 명시하여 이미지 만큼의 공간 확보 -> CLS방지 CLS : 현재 보고있는 페이지에 갑자기 발생하는 레이아웃의 변경 -> 잘못된 클릭의 원인이 될 수 있음 Faster Page Loads : 이미지가 뷰포트에 들어왔을 경우만 로드(Lazy load) -> 페이지 로드 속도 향상 Asset Flexibility : 외부에 저장되어 있는 이미지까지 리사이징 가능 외부링크 사용할 때 next.confi.. 2022. 9. 19. 이전 1 다음 반응형