이미지 최적화
-
[Next.js] Image 컴포넌트에 대해 (feat. local & remote)FrontEnd/Next.js 2022. 12. 22. 19:15
1. Next.js 가 제공하는 Image 컴포넌트(공식문서 링크) 특징과 장점 특징 lazy loading 이미지 사이즈 최적화 placeholder (Local Image일 경우) 장점 성능 향상 : 적절한 사이즈 이미지 서빙 & 작은 용량의 포맷 사용 가능 시각적인 안전성: placeholder를 통해 이미지 로드전 CLS(Cumulative Layout Shift) 방지 빠른 페이지 로딩: lazy loading & 이미지 사이즈 최적화, placeholder를 통한 2. lazy loading 이미지 로드 하는 시점을 필요할 때 까지 지연시키는 기술을 의미한다. ( 페이지 로드 속도 빨라지는 이점) 사용자가 이미지가 나올때까지 스크롤 하지 않으면 이미지는 로드 되지 않는다. Next.js는 사용..