Image props

이미지 속성은 레이아웃 안정성과 LCP 우선순위로 결정한다

먼저 이미지가 차지할 공간을 확정하고, 실제 표시 폭을 `sizes`로 알려 준 뒤, 첫 화면 대표 이미지에만 `priority`를 적용한다.

1. 공간을 먼저 고정

고정 비율이면 widthheight, 부모 영역을 채우면 fill을 쓴다.

반응형 레이아웃에서는 sizes가 후보 이미지 폭을 줄이는 핵심이다.

첫 화면 대표 이미지만 priority를 사용한다. 목록 이미지에 남발하지 않는다.

외부 이미지는 remotePatterns로 protocol, host, path를 좁힌다.

상황	먼저 묻는 질문	선택	틀리면 생기는 문제
이미지 비율이 고정	원본 또는 표시 비율을 아는가?	width + height	공간 예약 실패로 CLS가 늘어난다.
부모 영역 채우기	부모가 position과 높이를 갖는가?	fill + object-fit	부모 높이가 없으면 이미지가 보이지 않는다.
반응형 폭	뷰포트별 표시 폭이 다른가?	sizes	모바일에도 큰 후보 이미지를 받을 수 있다.
첫 화면 대표 이미지	LCP 후보인가?	priority	남발하면 lazy loading 이점이 줄어든다.

판단 순서: 공간 예약 → 후보 폭 제한 → 첫 화면 우선순위 → 원격 출처 제한.