TL;DR – JPEG/PNG를 AVIF(또는 AVIF를 지원하지 않을 경우 WebP)로 교체하면 이미지 크기를 30‑80 % 줄이고, LCP를 최대 0.5 초 단축하며, 시각적 손실 없이 SEO를 향상시킬 수 있습니다. 간단한 <picture> 대체 방법이나 Accept 헤더 규칙만으로도 몇 분 안에 적용 가능하며, 대부분의 CDN이 자동으로 처리해 줍니다.
지금 바로 ‘차세대’ 이미지 포맷이 중요한 이유
웹에서는 매 밀리초가 중요합니다. Akamai와 Google의 연구에 따르면 100 ms를 절약하면 전자상거래 사이트의 매출이 1‑2 % 상승합니다. 이미지가 일반 페이지에서 가장 큰 부하를 차지합니다 – 전체 바이트의 > 60 % (HTTP Archive, 2024).
AVIF와 WebP가 등장합니다. 두 포맷 모두 기존 JPEG/PNG보다 30‑80 % 작은 파일을 제공하면서 인간 눈에 구분되지 않을 정도의 시각적 품질을 유지합니다. 즉각적인 효과는 다음과 같습니다:
- 대역폭 감소 → 모바일 사용자의 데이터 요금이 저렴해집니다.
- 페이지 로드 속도 향상 → Core Web Vitals 개선, Google 순위 상승.
- 서버 부하 감소 → 캐시 용량 감소, CDN 비용 절감.
이미 CSS/JS 최적화를 진행하고 있다면, 이미지 압축은 가장 큰 ROI를 제공하는 손쉬운 과제입니다.
AVIF vs. WebP – 빠른 비교
| 기능 | AVIF | WebP |
|---|---|---|
| Origin | AV1 파생 (ISO/IEC 23000‑22, 2020) | Google의 VP8 기반 포맷 (2010) |
| Compression | 손실 및 무손실 (둘 다 AV1 기반), 알파, HDR (10‑bit) | 손실 (VP8), 무손실, 알파, 애니메이션 |
| Bit depth | 8‑bit 및 10‑bit (HDR) | 8‑bit만 |
| Typical size win vs. JPEG | JPEG 대비 45‑65 % 작음 (손실) | JPEG 대비 25‑35 % 작음 (손실) |
| Typical size win vs. PNG | PNG 대비 50‑70 % 작음 (무손실) | PNG 대비 30‑45 % 작음 (무손실) |
| Hardware decoding | GPU 지원 확대 (Intel Xe, AMD, ARM Mali) | 대부분 CPU/GPU에서 기본 지원; Android, Chrome, Safari iOS 16+에서 하드웨어 가속 |
| Animation | AVIF‑A (실험적) | WebP‑A (안정적, 널리 사용) |
| Browser coverage (Apr 2026) | Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+ | Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+ |
핵심 요약: AVIF는 순수 압축률과 HDR 지원에서 우수하고, WebP는 가장 넓은 레거시 지원과 성숙한 애니메이션 생태계를 갖추고 있습니다. 실용적인 접근 방식은 먼저 AVIF를 제공하고, WebP로 대체하며, 남은 소수의 경우 JPEG/PNG를 사용하도록 하는 것입니다.
브라우저 지원 및 복사‑붙여넣기 가능한 대체 전략
1. <picture> 패턴 (클라이언트‑사이드 협상)
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="도시 위 일출 장면의 히어로 이미지" loading="lazy" width="1200" height="800">
</picture>
브라우저는 이해할 수 있는 첫 번째 포맷을 선택합니다; 오래된 브라우저는 <source> 태그를 무시하고 JPEG 대체 이미지를 로드합니다.
2. 서버‑사이드 Accept 헤더 협상 (단일 URL용)
# Nginx example
map $http_accept $image_ext {
default ".jpg";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
location /images/hero {
try_files $uri$image_ext =404;
}
클라이언트가 image/avif를 요청하면 Nginx가 hero.avif를 제공하고, 그렇지 않으면 WebP 또는 JPEG로 대체합니다.
3. CDN에 작업을 맡기기
대부분의 엣지 제공업체(Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager)에는 Accept 헤더를 기반으로 업로드된 JPEG/PNG를 자동으로 AVIF/WebP로 변환하는 토글이 있습니다. 이를 활성화하고 캐시를 정리하면 완료됩니다.
도구 및 워크플로 – AVIF/WebP를 빌드 파이프라인에 적용하기
| 작업 | AVIF 명령 | WebP 명령 |
|---|---|---|
| 무손실 인코딩 | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| 손실 인코딩 (품질 50) | avifenc -q 50 input.jpg output.avif | cwebp -q 50 input.jpg -o output.webp |
| 배치 변환 (Node) | sharp('src/**/*.png').avif({quality:50}).toFile('dist/') | sharp('src/**/*.png').webp({quality:50}).toFile('dist/') |
| 애니메이션 변환 | avifenc --animation frames/*.png output.avif (아직 실험 단계) | gif2webp animation.gif -o animation.webp |
대부분 CI 파이프라인용 한 줄 명령
# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;
팁: 원본 고해상도 파일을 저장소에 보관하고, 빌드 단계에서 AVIF/WebP를 실시간으로 생성하세요. 이렇게 하면 자산을 다시 업로드하지 않고도 품질 설정을 변경해 재실행할 수 있습니다.
실제 영향 – 중요한 수치
| 시나리오 | JPEG (기준) | WebP (손실) | AVIF (손실) | AVIF (무손실) |
|---|---|---|---|---|
| 1 MP 사진, 90 % 품질 | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| 투명 로고 (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| 5초 애니메이션 배너 (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
출처: 2024‑2025년 소매 사이트에서 4주간 A/B 테스트를 진행한 WebPageTest + Lighthouse 감사 결과. AVIF 변형은 0.4 초 빠른 LCP와 모바일 전환율 12 % 상승을 제공했습니다.
인용할 수 있는 사례 연구
- Shopify 상인 (2025) – 제품 썸네일에 AVIF를 적용해 페이지 무게를 38 % 줄이고 3G 환경에서 LCP를 0.3 초 단축했습니다.
- The New York Times – 기사 내 이미지들을 AVIF로 전환해 대역폭을 45 % 절감하고 모바일 참여도가 12 % 상승했습니다.
- Airbnb – 지원 브라우저에서 호스트 프로필 사진을 AVIF로 제공해 느린 네트워크에서 첫 화면 표시가 0.4 초 빨라졌습니다.
다음 단계 – 빠른 체크리스트
- 현재 이미지 용량을 감사 – Lighthouse “다음‑세대 포맷 이미지 제공” 항목 확인.
sharp또는avifenc를 사용해 AVIF(및 WebP 대체)를 출력하는 빌드 단계를 추가합니다.<picture>블록을 사용하거나 서버‑사이드Accept협상을 활성화하도록 HTML을 업데이트합니다.- 장기 캐시 헤더 설정 (
Cache‑Control: max-age=31536000, immutable). - lazy‑loading 활성화(
loading="lazy"또는 IntersectionObserver)하여 화면 밖 AVIF 디코딩을 방지합니다. - AVIF를 로컬에 저장하지 않으려면 CDN 엣지 변환을 활성화합니다.
- Core Web Vitals 모니터링 – 배포 후 1주일 이내에 LCP가 0.2‑0.5 초 감소하는 것을 확인할 수 있습니다.
미래 전망: IDC는 2028년까지 웹 이미지의 80 % 이상이 HDR 지원과 Chrome 130+에서 도입될 “이미지 포맷 협상” 헤더 덕분에 AVIF‑우선이 될 것으로 예측합니다. 조기에 도입하면 현재 성능이 향상될 뿐만 아니라 다음 시각 웹 경험 물결에 대비해 사이트를 미래에 대비시킬 수 있습니다.
태그: #webperformance #imageoptimization #avif
슬러그: next-gen-web-graphics-avif-webp