PNG vs WebP vs AVIF｜이미지 형식 선택 및 변환 방법
카테고리: 이미지·성능
웹사이트의 표시 속도에 영향을 미치는 가장 중요한 요소 중 하나가 이미지 형식 선택입니다. 2026년 현재 주요 선택지는 PNG / JPEG / WebP / AVIF 4가지입니다. 본 글에서는 각각의 특징, 용도, 브라우저 지원 상황을 정리하고 최적의 형식을 선택하는 방법을 설명합니다.
포맷 비교표
| 포맷 | 압축 방식 | 투명도 | 애니메이션 | 화질 | 파일 크기 | 브라우저 지원 |
|---|---|---|---|---|---|---|
| PNG | 무손실 (손실 없음) | ✅ | APNG | 최고 (손상 없음) | 큼 | 모든 브라우저 |
| JPEG | 손실 압축 (손실) | ❌ | ❌ | 품질 조정 가능 | 소규모～중규모 | 모든 브라우저 |
| WebP | 무손실 / 손실 | ✅ | ✅ | JPEG보다 더 나음 | JPEG보다 25-35% 작음 | 95%+ |
| AVIF | 손실 / 무손실 | ✅ | ✅ | WebP보다 우수함 | WebP보다 20% 작음 | 92%+ |
어떤 형식을 선택해야 할까요
PNG를 선택하는 경우
- 로고·아이콘·스크린샷 등 품질 저하가 허용되지 않는 경우
- 텍스트가 포함된 이미지(압축으로 흐려지면 읽기 어려워짐)
- 투명도가 필요하고 IE11 지원이 필요한 경우 (거의 불필요)
JPEG를 선택할 경우
- 사진·그래디언트가 많은 이미지에서 최대 호환성이 필요한 경우
- 이메일 첨부 또는 구형 기기에 배포하는 경우
WebP를 선택하는 경우 (권장)
- 웹사이트의 대부분의 이미지 — JPEG 대비 25~35% 더 작음
- 투명도 + 압축 병행 (PNG 대체)
- 애니메이션(GIF 대체 — 훨씬 작음)
- 브라우저 지원율이 95%+이므로 거의 문제가 없습니다
AVIF를 선택하는 경우 (최첨단)
- 최소 파일 크기를 추구하는 경우 — WebP보다 20% 더 작습니다
- 고품질 사진을 최대한 가볍게 유지하고 싶은 경우
- 브라우저 지원율 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
구현 패턴: picture 요소로 분기
<picture> 요소로 여러 형식을 지정하는 방법이 가장 확실합니다. 브라우저가 지원하는 첫 번째 소스를 선택합니다.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>이 방법을 사용하면 AVIF 지원 브라우저는 AVIF를, WebP만 지원하면 WebP를, 둘 다 미지원이면 JPEG를 로드합니다.
도구로 변환
DevLab의 이미지 포맷 변환 도구를 사용하면 브라우저만으로 PNG ⇄ WebP ⇄ JPEG ⇄ AVIF 변환을 할 수 있습니다. 품질 슬라이더로 파일 크기와 화질의 균형을 확인하면서 변환 가능합니다. 서버 업로드도 불필요하므로 프라이버시도 안전합니다.
관련: EXIF 뷰어로 촬영 메타데이터 확인 및 위치정보 삭제, 이미지 → Base64 변환으로 인라인 Data URL 생성 가능합니다.
요약
- 확실하지 않으면 WebP 선택 — 최고의 균형
- 더 작게 하고 싶다면 AVIF (picture로 폴백)
- 손실 없음이 필요하면 PNG
- 최대 호환성이 필요하면 JPEG를 사용하세요
❓ 자주 묻는 질문
지금 AVIF 로 전면 이행해도 괜찮나요?
주요 브라우저는 대응했지만 단독으로 교체하기보다 picture 요소로 AVIF, WebP, JPEG 을 나란히 두는 편이 안전합니다. AVIF 는 인코딩이 무겁고 작은 이미지에서는 WebP 에 밀리기도 합니다. 빌드 시간과 전송 크기를 모두 측정한 뒤 효과가 있는 이미지에만 AVIF 를 쓰는 것이 현실적입니다.
로고나 아이콘은 어떤 형식이 좋나요?
먼저 SVG 를 검토하세요. 벡터라서 확대해도 열화되지 않고 단순한 도형이면 PNG 보다 작으며 CSS 로 색을 바꿀 수 있습니다. 사진 같은 그러데이션이 있는 로고나 SVG 를 받지 않는 배포처에만 래스터로 내리고, 그 경우 투과가 필요하므로 PNG 나 WebP 를 고릅니다.
WebP 로 변환했는데 파일이 커졌습니다.
무손실 모드로 변환했을 가능성이 높습니다. 사진을 무손실 WebP 로 만들면 PNG 에 가까운 거동이 되어 원래 JPEG 보다 커집니다. 사진은 손실(품질 75〜85 전후), 투과가 있는 도판은 무손실처럼 입력의 성질로 전환하세요. 이미 강하게 압축된 JPEG 을 재인코딩해도 늘어날 수 있습니다.