next/image 최적화 결정 기준

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

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

로컬인가, 외부인가?

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

공간

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

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

후보 폭

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

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

우선순위

정말 첫 화면 대표 이미지인가?

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

대체 텍스트

이미지가 의미를 전달하는가?

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

핵심A 기준 공간 예약, 후보 폭, 출처 제한, alt가 모두 보인다.