Image Budget

next/image 로딩 우선순위

자동 최적화에 맡기기 전에 어떤 이미지가 첫 화면을 좌우하고 어떤 이미지는 지연해도 되는지 구분합니다.

layout

공간을 먼저 예약

고정 크기나 반응형 sizes를 명시해 이미지 로딩 전후의 CLS를 줄입니다.

format

적절한 포맷 전달

브라우저와 설정에 맞춰 더 효율적인 포맷과 크기의 이미지를 제공하도록 돕습니다.

alt

의미 있는 대체 텍스트

장식 이미지와 정보 이미지를 나누어 접근성과 검색 문맥을 함께 관리합니다.

이미지 로딩 정책

모든 이미지에 같은 최적화 옵션을 붙이지 않습니다

히어로, 썸네일, 아이콘, 사용자 업로드 이미지는 로딩 방식과 캐시 전략이 서로 다릅니다.

next/image remotePatterns 점검

LCP첫 화면 주요 이미지가 너무 늦게 로드되지 않는지 측정합니다.
도메인허용하지 않은 외부 이미지가 오류를 만들지 않는지 확인합니다.
품질과한 quality 값으로 전송 용량이 늘지 않았는지 비교합니다.