이미지 최적화
[Next.js] Next/Image의 sizes 속성 톺아보기
[Next.js] Next/Image의 sizes 속성 톺아보기
2024.05.13sizes뷰포트 크기에 따라 이미지가 표시될 크기를 정의하여 브라우저가 적절한 이미지를 srcset에서 선택하도록 도와주는 속성 💡 고유 크기(로드된 이미지 크기)는 next.config.js 파일의 imageSizes, deviceSizes 속성 값을 기준으로 결정된다(srcset). 사용자 디바이스 크기에 따라 아래 중단점 중 하나가 고유 크기가 된다.deviceSizes 기본값 : [640, 750, 828, 1080, 1200, 1920, 2048, 3840]imageSizes 기본값 : [16, 32, 48, 64, 96, 128, 256, 384] Next/Image에서 layout='responsive' 혹은 layout='fill' 일 때 sizes 속성을 지정하지 않으면 항상 100vw..