PNG vs WebP vs AVIF｜이미지 형식 선택 및 변환 방법
카테고리: 이미지·성능
이 기사는 현재 일본어로만 제공됩니다. 번역본은 순차적으로 공개될 예정입니다.
웹사이트의 표시 속도에 영향을 미치는 가장 중요한 요소 중 하나가 이미지 형식 선택입니다. 2026년 현재 주요 선택지는 <strong>PNG / JPEG / WebP / AVIF</strong> 4가지입니다. 본 글에서는 각각의 특징, 용도, 브라우저 지원 상황을 정리하고 최적의 형식을 선택하는 방법을 설명합니다.
포맷 비교표
| 포맷 | 압축 방식 | 투명도 | 애니메이션 | 화질 | 파일 크기 | 브라우저 지원 |
|---|---|---|---|---|---|---|
| PNG | 무손실 (손실 없음) | ✅ | APNG | 최고 (손상 없음) | 큼 | 모든 브라우저 |
| JPEG | 손실 압축 (손실) | ❌ | ❌ | 품질 조정 가능 | 소규모～중규모 | 모든 브라우저 |
| WebP | 무손실 / 손실 | ✅ | ✅ | JPEG보다 더 나음 | JPEG보다 25-35% 작음 | 95%+ |
| AVIF | 손실 / 무손실 | ✅ | ✅ | WebP보다 우수함 | WebP보다 20% 작음 | 92%+ |
어떤 형식을 선택해야 할까요
PNG를 선택하는 경우
- <strong>로고·아이콘·스크린샷</strong> 등 품질 저하가 허용되지 않는 경우
- 텍스트가 포함된 이미지(압축으로 흐려지면 읽기 어려워짐)
- 투명도가 필요하고 IE11 지원이 필요한 경우 (거의 불필요)
JPEG를 선택할 경우
- 사진·그래디언트가 많은 이미지에서 <strong>최대 호환성</strong>이 필요한 경우
- 이메일 첨부 또는 구형 기기에 배포하는 경우
WebP를 선택하는 경우 (권장)
- <strong>웹사이트의 대부분의 이미지</strong> — JPEG 대비 25~35% 더 작음
- 투명도 + 압축 병행 (PNG 대체)
- 애니메이션(GIF 대체 — 훨씬 작음)
- 브라우저 지원율이 95%+이므로 거의 문제가 없습니다
AVIF를 선택하는 경우 (최첨단)
- <strong>최소 파일 크기</strong>를 추구하는 경우 — WebP보다 20% 더 작습니다
- 고품질 사진을 최대한 가볍게 유지하고 싶은 경우
- 브라우저 지원율 92%+ (Safari 16+, Chrome 85+, Firefox 93+)
구현 패턴: <code>picture</code> 요소로 분기
<code><picture></code> 요소로 여러 형식을 지정하는 방법이 가장 확실합니다. 브라우저가 지원하는 첫 번째 소스를 선택합니다.
<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를 로드합니다.
도구로 변환
<a href="/ja/tools/image-convert/">DevLab의 이미지 포맷 변환 도구</a>를 사용하면 브라우저만으로 PNG ⇄ WebP ⇄ JPEG ⇄ AVIF 변환을 할 수 있습니다. 품질 슬라이더로 파일 크기와 화질의 균형을 확인하면서 변환 가능합니다. 서버 업로드도 불필요하므로 프라이버시도 안전합니다.
관련: <a href="/ja/tools/exif/">EXIF 뷰어</a>로 촬영 메타데이터 확인 및 위치정보 삭제, <a href="/ja/tools/image-base64/">이미지 → Base64 변환</a>으로 인라인 Data URL 생성 가능합니다.
요약
- 확실하지 않으면 <strong>WebP</strong> 선택 — 최고의 균형
- 더 작게 하고 싶다면 <strong>AVIF</strong> (picture로 폴백)
- 손실 없음이 필요하면 <strong>PNG</strong>
- 최대 호환성이 필요하면 <strong>JPEG</strong>를 사용하세요