이미지 선택 기준

이미지 최적화 기준

next/image는 자동 최적화를 제공하지만, 개발자가 표시 크기와 LCP 후보를 정확히 알려줘야 CLS와 불필요한 다운로드를 함께 줄일 수 있습니다.

1

이미지 역할

본문 장식인지, 상품 대표 이미지인지, LCP 후보인지 먼저 분류합니다.

content / hero
2

레이아웃 선택

고정 비율은 width와 height, 컨테이너 채움은 fill을 사용합니다.

width height fill
3

반응형 크기

fill 이미지는 실제 표시 폭에 맞춰 sizes를 반드시 작성합니다.

sizes
4

로딩 전략

첫 화면 핵심 이미지만 priority로 두고 나머지는 lazy에 맡깁니다.

priority
5

출처 검증

외부 이미지는 remotePatterns와 alt 텍스트까지 함께 점검합니다.

images config
CLS 기준

공간 예약이 먼저입니다

이미지가 늦게 도착해도 영역이 이미 잡혀 있어야 합니다. 그래서 width/height나 비율이 있는 부모 컨테이너가 최적화의 출발점입니다.

object-fit: cover
상황
필수 설정
이미지 속성 한계
이미지 속성 검증
본문 이미지
width / height
원본 과대 업로드 금지
CLS 없음
카드 썸네일
fill + sizes
부모 position 필요
필요 폭만 다운로드
히어로 이미지
priority
한 화면에 1개 중심
LCP 개선