decision checklist

next/image는 출처, 크기, 우선순위, 접근성을 함께 점검해야 최적화된다

이미지 하나를 넣을 때마다 아래 다섯 질문을 통과해야 한다. 어느 하나가 빠지면 로딩은 되더라도 성능이나 접근성 문제가 남는다.

출처 로컬인가, 외부인가?

외부 URL이면 `remotePatterns`로 허용 범위를 좁힌다. 임의 도메인을 열어 두지 않는다.

공간 이미지 자리가 먼저 잡히는가?

`width/height` 또는 `fill`로 레이아웃 공간을 확정해 CLS를 줄인다.

후보 폭 브라우저가 필요한 크기를 고를 수 있는가?

`sizes`가 없으면 모바일에서도 큰 후보 이미지를 받을 수 있다.

우선순위 정말 첫 화면 대표 이미지인가?

LCP 후보가 아니면 `priority`를 붙이지 않는다. 여러 이미지를 동시에 당기지 않는다.

대체 텍스트 이미지가 의미를 전달하는가?

정보 이미지에는 구체적인 `alt`, 장식 이미지는 빈 `alt`로 스크린리더 부담을 줄인다.

측정 적용 후 실제로 줄었는가?

Lighthouse, Network 패널, Core Web Vitals에서 LCP·CLS·전송량을 다시 본다.

A 기준

공간 예약, 후보 폭, 출처 제한, alt가 모두 보인다.

주의

로딩은 되지만 LCP 또는 모바일 전송량이 나쁠 수 있다.

실패

이미지가 밀리거나, 외부 URL이 막히거나, 접근성 의미가 없다.