4K 이미지 vs 최적화된 800px WebP: 성능과 품질의 균형

말테페의 18테이블 타바 식당에는 명확한 문제가 있었다: 손님이 QR을 스캔하면 메뉴 화면이 5-6초 동안 비어 있었다. 원인은 DSLR로 찍은 4K JPEG, 상품 카드당 4-6 MB. 해결책은 4K를 버리는 것이 아니라 올바른 크기로 제공하는 것.

Core Web Vitals: LCP의 마지노선

Google의 Largest Contentful Paint (LCP) 임계값은 2.5초. 4K 이미지로 로딩되는 메뉴 카드는 테스트에서 4.2-6.1초 LCP — "Poor" 카테고리. 800px WebP로 바꾸면 같은 카드가 1.2-1.8초로 내려가 "Good" 안에 들어온다.

LCP는 SEO 순위에 직접 영향을 미친다. 모바일 검색 상위 3위 식당의 평균 LCP는 1.9초 미만; 4초 초과는 2-3페이지로 밀려난다.

800px WebP가 충분한 이유

최신 스마트폰(iPhone 14, Galaxy S23) 화면은 CSS 390-430px. 레티나 ×2 = 최대 860px. 800px WebP는 이미 물리적 상한. 4K의 나머지 3,200픽셀은 어떤 가시 픽셀에도 대응하지 않는다.

동일 화질에서 WebP는 JPEG보다 25-35% 작다. 800px WebP(180 KB) vs 4K JPEG(5.2 MB) = 96.5% 대역폭 절감.

thMenu 반응형 이미지 파이프라인

4K 원본을 업로드하면 thMenu가 자동으로 320px, 640px, 800px, 1200px WebP+AVIF 파생본을 생성한다. 브라우저는 srcset으로 적합한 크기를 선택.

Lazy loading 기본 활성. First Contentful Paint 600ms 미만; 나머지는 스크롤 시 로딩.

FAQ

4K 원본을 삭제해야 하나요? 아니요. thMenu는 R2에 원본을 보관해 향후 8K 디스플레이에 대비합니다.

AVIF는 얼마나 작은가요? 동일 화질에서 JPEG보다 50%, WebP보다 20% 작습니다. 브라우저 94%가 지원.

사진 품질이 손상되나요? 아니요. 모바일 800px에서 4K는 구분할 수 없습니다 — 인간의 눈은 손에 든 상태로 300 PPI 이상을 식별하지 못합니다.

도움이 되셨나요? 공유해 주세요.