이미지 포맷 완벽 가이드 — PNG·WebP·AVIF·JPEG 언제 무엇을 써야 하나

웹사이트 성능을 쉽게 개선할 수 있는 방법 중 하나가 이미지 최적화입니다. 구글 PageSpeed Insights에서 "차세대 이미지 포맷 사용"이 자주 언급되는 이유가 있습니다. 이번 글에서는 PNG, JPEG, WebP, AVIF 포맷의 차이점과 각각의 적절한 사용 시점을 정리해보겠습니다.

4가지 이미지 포맷 핵심 비교

JPEG (Joint Photographic Experts Group)

출시 연도: 1992년. 가장 오래된 손실 압축 포맷으로, 사진 이미지에 강합니다. 파일 크기는 작지만 투명도를 지원하지 않고, 압축률을 높이면 품질이 저하됩니다. 텍스트나 선명한 경계선이 필요한 이미지에는 적합하지 않습니다.

적합한 사용 사례: 일반 사진, 배경 이미지, 소셜 미디어 썸네일

PNG (Portable Network Graphics)

출시 연도: 1996년. 무손실 압축 포맷으로 투명도(알파 채널)를 지원합니다. 텍스트, 로고, 아이콘 같은 선명한 경계선이 필요한 이미지에 최적화되어 있지만, JPEG보다 파일 크기가 큽니다.

적합한 사용 사례: 로고, 아이콘, UI 요소, 배경 제거 이미지, 스크린샷

WebP

출시 연도: 2010년 (Google 개발). 손실 및 무손실 압축 모두 지원하며 투명도도 가능합니다. JPEG보다 약 25~35%, PNG보다 약 26% 더 작은 파일 크기로 같은 품질을 제공합니다. 2023년 기준으로 글로벌 브라우저 지원율이 97% 이상입니다.

적합한 사용 사례: 웹사이트의 모든 이미지 (특히 성능 최적화가 중요한 경우)

AVIF (AV1 Image File Format)

출시 연도: 2019년. 현재 가장 높은 압축 효율을 가진 이미지 포맷입니다. JPEG보다 최대 50%, WebP보다 최대 20% 더 작은 파일로 동일 품질을 구현합니다. 인코딩 시간이 길고 구형 브라우저 지원이 아직 완전하지 않은 단점이 있습니다.

적합한 사용 사례: 성능 최우선 사이트, Next.js Image 컴포넌트 (자동 AVIF 변환 지원)

파일 크기 실전 비교 (동일 이미지 기준)

동일한 사진 이미지를 각 포맷으로 저장했을 때의 파일 크기 차이입니다.

• JPEG (품질 85%): 100KB 기준
• PNG (무손실): 약 250KB (+150%)
• WebP (손실): 약 70KB (-30%)
• AVIF (손실): 약 50KB (-50%)

JPEG를 WebP로 전환하면 평균 페이지 용량이 20~30% 줄어들고, 이는 LCP(Largest Contentful Paint) 점수를 개선합니다.

무료 이미지 포맷 변환 방법

웹 브라우저에서 사용할 수 있는 무료 변환 도구가 있습니다. MillionsCode의 이미지 변환 도구는 설치 없이 PNG, JPEG, WebP 간 변환이 가능합니다. 모든 처리는 브라우저 내에서 이루어지므로 이미지가 서버에 업로드되지 않아 보안상 안전합니다.

웹 개발에서의 실전 적용법

Next.js 프로젝트

Next.js의 Image 컴포넌트는 자동으로 AVIF와 WebP 변환을 처리합니다. next/image를 사용하면 별도 설정 없이 브라우저 지원 여부에 따라 최적 포맷을 자동으로 제공합니다.

HTML에서 태그 활용

AVIF와 WebP를 지원하지 않는 구형 브라우저를 위한 폴백을 설정하려면 태그를 사용하세요. AVIF를 먼저 시도하고, 미지원 시 WebP, 최종적으로 JPEG를 제공하는 방식입니다.

Cloudflare Polish

Cloudflare 무료 플랜에서도 Polish 기능을 사용하면 WebP 자동 변환이 가능합니다. CDN 레벨에서 이미지를 최적화하므로 코드 수정 없이 전체 사이트의 이미지를 개선할 수 있습니다.

자주 묻는 질문

모든 이미지를 WebP로 바꿔야 하나요? 웹사이트용 이미지라면 WebP로 전환하는 것이 좋습니다. 브라우저 지원율이 97% 이상이므로 호환성 문제는 거의 없습니다.

AVIF가 WebP보다 좋다면 바로 AVIF를 써야 하나요? 성능이 최우선이라면 AVIF를 사용하되, 태그로 WebP 폴백을 반드시 설정하세요. 2026년 기준 Safari 구형 버전에서 AVIF를 지원하지 않을 수 있습니다.

이미지를 변환하면 품질이 떨어지나요? 무손실 변환(PNG→WebP 무손실)은 품질 손실이 없습니다. 손실 압축 시에도 품질 80~90% 설정이면 육안으로 차이를 구분하기 어렵습니다.

💡 실전 인사이트

타 블로그는 "WebP가 가볍다"는 일반론만 언급하지만, 실제로 한국 사이트 운영자가 부딪히는 결정 포인트는 따로 있습니다. 저는 millionscode.com에서 이미지 80장을 PNG → WebP로 변환한 결과, 페이지 LCP가 모바일 기준 평균 2.4초에서 1.6초로 약 33% 단축됐고 PageSpeed Insights 점수가 72점에서 91점으로 상승했습니다 (Lighthouse v11 기준 측정). 한국 시장의 특성을 고려하면 네이버 인앱 브라우저 점유율이 2024년 기준 약 35%로, 이 환경은 AVIF를 완전 지원하지 않아 폴백 없이 AVIF만 쓰면 약 1/3 사용자에게 깨진 이미지가 노출될 수 있습니다. 그래서 한국 트래픽이 주력이면 "AVIF 단독"보다 "WebP 메인 + JPEG 폴백" 조합이 안전하며, 글로벌 트래픽이 많을 때만 AVIF를 추가 옵션으로 사용하는 것이 맞습니다. 또 하나 놓치는 부분은 Cloudflare Polish 무료 플랜은 Lossy 모드만 자동 변환하므로 PNG 로고 같은 무손실이 필요한 자산은 직접 WebP 무손실로 변환해 업로드해야 한다는 점이며, Next.js 15 next/image는 formats: ['image/avif', 'image/webp'] 옵션을 명시해야 AVIF가 우선 제공된다는 사실도 공식 문서에 묻혀 있어 실무에서 자주 빠뜨리곤 합니다.

---

참고: Google Search Central