핵심 요약
이미지는 대부분 웹페이지 용량의 최대 비중을 차지한다. WebP는 JPEG보다 25~35% 작고 브라우저 지원이 사실상 완전하다. AVIF는 더 작지만(같은 화질에 JPEG의 절반 이하) 인코딩이 느리다. "AVIF 우선, WebP 폴백, 원본 최후"가 안전한 조합이다.
1. 포맷별 특징
| 포맷 | 압축 | 투명도 | 지원 |
|---|---|---|---|
| JPEG | 보통 | X | 완전 |
| PNG | 무손실(큼) | O | 완전 |
| WebP | 좋음 | O | 사실상 완전 |
| AVIF | 매우 좋음 | O | 최신 브라우저 |
2. picture로 안전하게 폴백
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="설명" width="1200" height="630">
</picture>브라우저가 위에서부터 지원하는 첫 포맷을 고른다. <img>는 최종 폴백이자 필수(alt·크기 지정).
3. 변환 명령
# cwebp / avifenc, 또는 sharp
cwebp -q 80 in.jpg -o out.webp
npx sharp-cli -i in.jpg -o out.avif --avif4. 이미지 성능 체크리스트
width·height를 항상 지정 → 레이아웃 이동(CLS) 방지- 스크롤 아래 이미지는
loading="lazy", 첫 화면 대표 이미지는loading="eager" srcset·sizes로 화면 크기별 다른 해상도 제공(모바일에 4K 안 보냄)- 아이콘·로고처럼 단순 도형은 SVG가 최선
5. 함정
- AVIF는 인코딩이 느리므로 빌드/업로드 시 미리 변환(런타임 변환은 부담)
- 이미 압축된 JPEG를 WebP로 다시 저장해도 극적으로 줄지 않을 수 있다 — 원본에서 변환
- 품질(q)을 너무 낮추면 배너·텍스트 이미지에서 눈에 띈다 — 80 전후로 시작해 조정
자주 묻는 질문
WebP와 AVIF 중 하나만 쓴다면요?
지원 범위와 인코딩 속도를 생각하면 WebP가 무난한 단일 선택입니다. 용량을 더 줄이고 싶고 빌드 시간에 여유가 있으면 AVIF를 추가해 picture로 우선 제공하고 WebP로 폴백하세요.
PNG는 이제 안 써도 되나요?
투명도가 필요한 이미지도 WebP·AVIF가 지원하므로 사진성 이미지는 대체 가능합니다. 다만 로고·아이콘처럼 선이 또렷한 그래픽은 벡터인 SVG가 확대에도 깨지지 않아 더 낫습니다.
Next.js 같은 프레임워크는 자동으로 해주지 않나요?
Next.js의 next/image는 요청 시 WebP·AVIF로 자동 변환하고 크기·lazy 로딩을 처리합니다. 프레임워크 이미지 컴포넌트를 쓰면 이 최적화를 대부분 자동으로 얻으니 적극 활용하세요.
댓글 0