next/image

next/image 비용 절감

이미지 파일을 바꾸는 것만으로는 부족하며 width, height, sizes, remotePatterns가 렌더링 품질을 좌우합니다.

width/height

레이아웃 공간 예약

이미지가 도착하기 전에도 자리 크기를 알 수 있어 CLS를 줄입니다.

sizes

반응형 후보 폭

모바일과 데스크톱에서 필요한 이미지 폭을 브라우저 선택 로직에 넘깁니다.

priority

LCP 이미지 우선

hero나 대표 썸네일처럼 첫 화면 지표에 직접 닿는 이미지만 먼저 당깁니다.

remotePatterns

외부 이미지 허용 범위

허용한 protocol, hostname, path만 최적화 파이프라인에 들어오게 제한합니다.

렌더링 안정성

크기 정보가 레이아웃 흔들림을 줄입니다

width와 height 또는 fill 설정을 명확히 두면 브라우저가 이미지 공간을 먼저 계산할 수 있습니다.

이미지 설정 연결

sizesCSS에서 실제로 차지하는 폭과 맞지 않으면 불필요하게 큰 파일을 받습니다.
priority여러 이미지에 남발하면 네트워크 우선순위가 흐려져 LCP 개선 효과가 줄어듭니다.
remotePatternsCMS나 CDN 도메인을 바꿀 때 배포 설정과 이미지 URL을 함께 검증합니다.