optimization flow

이미지 최적화는 원본 축소, 속성 계약, 렌더 검증 순서로 점검한다

좋은 결과는 `` 하나로 끝나지 않는다. 원본을 줄이고, 화면 조건에 맞게 속성을 정한 뒤, 실제 전송량과 Core Web Vitals를 다시 확인해야 한다.

1원본 정리표시 크기보다 큰 원본을 줄이고 사진, 로고, 아이콘 성격을 나눈다.

2속성 계약공간, 후보 폭, 우선순위, 원격 출처를 명시한다.

3실측 확인LCP, CLS, 전송 KB가 실제로 줄었는지 본다.

단계	해야 할 일	결정 값	통과 기준
원본	최대 표시 크기보다 과한 이미지를 줄인다.	사진은 WebP/AVIF, 로고는 SVG/PNG	불필요한 원본 KB 감소
레이아웃	이미지 자리를 먼저 예약한다.	`width/height` 또는 `fill`	CLS가 안정적
전송	실제 표시 폭에 맞는 후보 이미지를 고른다.	`sizes`, `quality`	모바일에서 큰 후보 미전송
검증	첫 화면과 스크롤 후 이미지를 나눠 측정한다.	Lighthouse, Network, Core Web Vitals	LCP·CLS·KB가 함께 개선

LCP 이미지

첫 화면 대표 이미지만 `priority`를 주고, 나머지는 lazy loading을 유지한다.

외부 이미지

`remotePatterns`를 protocol, hostname, pathname까지 좁혀 예측 가능한 출처만 허용한다.