AVIF와 WebP로 사이트 속도 향상하기: 완전 가이드

Fri, 10 Apr 2026 00:00:00 +0000

TL;DR – JPEG/PNG를 AVIF(또는 AVIF를 지원하지 않을 경우 WebP)로 교체하면 이미지 크기를 30‑80 % 줄이고, LCP를 최대 0.5 초 단축하며, 시각적 손실 없이 SEO를 향상시킬 수 있습니다. 간단한 대체 방법이나 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>
  <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>

브라우저는 이해할 수 있는 첫 번째 포맷을 선택합니다; 오래된 브라우저는 태그를 무시하고 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 대체)를 출력하는 빌드 단계를 추가합니다.
블록을 사용하거나 서버‑사이드 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

next-gen-web-graphics-avif-webp on File Format Blog