Image decision

next/image 속성은 의미, 자리, 전송량, 출처 순서로 결정한다

`src`만 채우면 최적화가 끝난 것처럼 보이지만, 실제 품질은 접근성, CLS 방지, 후보 이미지 크기, 외부 출처 제한을 함께 정할 때 나온다.

무슨 이미지인가

src와 alt로 정보 이미지인지 장식인지 정한다.

width/height 또는 fill로 CLS를 막는다.

sizes와 quality로 화면 폭에 맞는 후보를 보낸다.

remotePatterns와 priority를 필요할 때만 좁게 쓴다.

속성 묶음	결정 기준	잘못 쓰면 보이는 신호	판정
`src` `alt`	이미지를 못 보는 사용자에게도 같은 정보가 전달되는가?	외부 URL 로딩 실패, 장식 이미지에 장황한 설명	항상 먼저 확정
`width` `height` `fill`	브라우저가 이미지 영역을 로딩 전에 계산할 수 있는가?	이미지가 늦게 뜨며 본문이 밀리고 CLS가 증가	레이아웃 계약
`sizes` `quality`	모바일과 데스크톱 표시 폭 차이를 후보 이미지에 반영했는가?	모바일에서 필요 이상으로 큰 이미지를 다운로드	전송량 조절
`priority`	첫 화면 LCP 후보 이미지가 맞는가?	여러 이미지에 우선순위를 줘 네트워크 순서가 흐려짐	대표 이미지에만
`remotePatterns`	외부 이미지의 protocol, hostname, pathname을 좁게 제한했는가?	도메인이 너무 넓거나 누락되어 보안/로딩 문제가 생김	출처 경계

핵심: next/image 속성은 보기 옵션이 아니라 접근성, 레이아웃 안정성, 네트워크 비용, 출처 정책을 묶는 계약이다.