react-lazy-load-image-component1 [Next.js 14] 이미지 성능 개선 , Next/Image CPU 사용량 이슈 , react-lazy-load-image-component 적용기 프로젝트에 이미지가 많아지니 초기 로딩이 느려졌다.이미지 최적화가 필요해 Next/Image 컴포넌트를 사용해 봤다. Next.js Image 컴포넌트Next.js에서 제공하는 이미지 최적화 전용 컴포넌트브라우저에 효율적으로 이미지를 로드하고, 페이지 로딩 속도와 성능을 향상하기 위해 사용✅ 주요 기능 자동 최적화👉 이미지 사이즈, 포맷(avif, webp 등) 자동 변환Lazy Loading👉 화면에 보일 때만 로드 (초기 페이지 로딩 가벼움)Responsive 이미지👉 다양한 화면 크기에 맞게 사이즈 자동 조절이미지 CDN👉 Next.js가 제공하는 이미지 CDN으로 빠른 전송placeholder👉 이미지 로드 전 흐릿한 썸네일 효과 제공 propssrcstring | StaticImport.. 2025. 4. 16. 이전 1 다음
