이미지 형식 비교표 (PNG/JPG/WebP/AVIF/GIF)
웹 개발과 앱 개발에서 자주 쓰이는 이미지 형식의 특징을 비교표로 정리했습니다. 용도에 맞는 최적의 형식 선택에 활용하세요.
이미지 형식 비교 목록
아래 표는 주요 이미지 형식의 기능과 특성을 비교한 것입니다. 압축 방식, 투명도(알파 채널) 지원, 애니메이션 지원, 브라우저 지원 등을 확인할 수 있습니다.
| 형식 | 압축 방식 | 투명도 | 애니메이션 | 색 심도 | 브라우저 지원 |
|---|---|---|---|---|---|
| PNG | 무손실 압축 | 지원(8bit 알파) | APNG(제한적) | 최대 48bit + 16bit 알파 | 모든 브라우저 |
| JPEG | 손실 압축 | 미지원 | 미지원 | 24bit(약 1677만 색) | 모든 브라우저 |
| WebP | 무손실 / 손실 | 지원(8bit 알파) | 지원 | 24bit + 8bit 알파 | 주요 브라우저 지원(IE 미지원) |
| AVIF | 무손실 / 손실 | 지원(8/10/12bit 알파) | 지원(AVIF Sequence) | 최대 12bit HDR | Chrome/Firefox/Safari 16.4+ |
| GIF | 무손실 압축(LZW) | 1bit(투명/불투명만) | 지원 | 8bit(256색) | 모든 브라우저 |
파일 크기 비교
같은 이미지를 다른 형식으로 저장했을 때의 파일 크기 기준입니다. 실제 크기는 이미지 내용과 압축 설정에 따라 크게 달라집니다.
| 형식 | 사진(상대 크기) | 일러스트(상대 크기) | 스크린샷(상대 크기) |
|---|---|---|---|
| PNG | 큼 | 보통 | 보통 |
| JPEG(품질 80) | 작음 | 보통~큼 | 보통 |
| WebP(품질 80) | 매우 작음 | 작음 | 작음 |
| AVIF(품질 60) | 매우 작음 | 매우 작음 | 매우 작음 |
| GIF | 권장하지 않음 | 큼(256색 제한) | 큼 |
각 형식의 상세와 사용처
PNG（Portable Network Graphics）
무손실 압축이므로 화질 저하가 없고 알파 채널을 통한 투명 처리가 가능합니다. 로고, 아이콘, 스크린샷, 텍스트가 포함된 이미지 등 정밀한 묘사가 필요한 경우에 적합합니다. 다만 사진 같은 자연 이미지에서는 파일 크기가 커지는 경향이 있습니다.
- 최적 용도: 로고, 아이콘, 스크린샷, 투명도가 필요한 이미지
- 피해야 할 용도: 사진(파일 크기가 불필요하게 커짐)
JPEG（Joint Photographic Experts Group）
손실 압축을 통해 사진이나 그라데이션이 많은 이미지를 효율적으로 압축할 수 있습니다. 품질 파라미터(0~100)로 압축률과 화질의 균형을 조정할 수 있습니다. 투명도와 애니메이션은 지원하지 않습니다. Exif 정보(촬영 일시, 카메라 정보)를 보존할 수 있습니다.
- 최적 용도: 사진, 자연 이미지, 그라데이션
- 피해야 할 용도: 텍스트 이미지, 로고(압축 아티팩트가 눈에 띔), 투명도가 필요한 이미지
WebP
Google이 개발한 이미지 형식으로, JPEG 대비 25~34%, PNG 대비 26% 정도 파일 크기를 줄일 수 있습니다. 무손실과 손실 양쪽을 모두 지원하며 알파 채널과 애니메이션도 지원합니다. IE를 제외한 주요 브라우저에서 지원됩니다.
- 최적 용도: 웹사이트 전반(사진과 일러스트 모두 대응)
- 피해야 할 용도: IE 지원이 필요한 경우, 인쇄 용도
AVIF（AV1 Image File Format）
AV1 동영상 코덱을 기반으로 한 차세대 이미지 형식입니다. WebP보다 더 높은 압축 효율을 가지며 HDR(High Dynamic Range)도 지원합니다. 인코딩 속도가 다소 느리다는 과제가 있지만 화질과 파일 크기의 균형은 가장 뛰어납니다.
- 최적 용도: 높은 압축이 요구되는 웹사이트, HDR 이미지
- 피해야 할 용도: 구형 브라우저 지원이 필요한 경우, 실시간 인코딩이 필요한 경우
GIF（Graphics Interchange Format）
256색까지라는 제한이 있지만 애니메이션을 지원하는 역사가 긴 형식입니다. 현재는 동영상과 WebP/AVIF 애니메이션으로 대체되고 있지만, 높은 호환성 덕분에 SNS와 메신저 앱의 짧은 애니메이션에 여전히 사용됩니다.
- 최적 용도: 짧은 애니메이션, 레거시 시스템 대응
- 피해야 할 용도: 사진, 고화질이 필요한 이미지(256색 제한 때문)
웹 개발에서의 권장 사례
모던 웹사이트에서는 <picture> 요소를 사용해 여러 이미지 형식을 폴백과 함께 제공하는 것이 가장 좋은 방법입니다.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文">
</picture>이렇게 작성하면 AVIF를 지원하는 브라우저에서는 AVIF, WebP를 지원하는 브라우저에서는 WebP, 그 외에는 JPEG가 표시됩니다. DevLab은 각 형식의 테스트용 이미지 파일을 제공하므로 형식 변환이나 크기 비교 검증에 활용하세요.