WebP와 PNG 모두 무손실 압축과 투명도를 지원하지만, WebP는 무손실 이미지에서 PNG보다 약 26% 작은 파일을 생성합니다. 손실 모드를 사용하면 차이는 더 벌어집니다.
문제는 WebP의 우수한 압축이 보편적으로 자리 잡은 PNG에서 전환할 만한 가치가 있느냐입니다. 대상 플랫폼과 용도에 따라 답이 달라집니다.
Comparison Table
| 특성 | WebP | PNG |
|---|---|---|
| 무손실 크기 | 약 26% 더 작음 | 기준 |
| 손실 모드 | 지원 (VP8 기반) | 미지원 |
| 투명도 | 지원 (손실·무손실 모두) | 지원 (무손실만) |
| 애니메이션 | 지원 (손실·무손실 모두) | APNG (제한적 지원) |
| 브라우저 지원 | 97% 이상 (모든 모던 브라우저) | 100% |
| 색상 깊이 | 채널당 8비트 | 채널당 최대 16비트 |
| 소프트웨어 지원 | 빠르게 확대 중 | 보편적 |
| 등장 시기 | 2010년 | 1996년 |
Detailed Analysis
웹 용도에서 WebP는 거의 모든 측정 가능한 기준에서 확실한 우위에 있습니다. Google의 자체 연구와 독립 벤치마크 모두 WebP 무손실 이미지가 PNG보다 26% 작고, WebP 손실 이미지가 동급 JPEG보다 25~34% 작다는 결과를 일관되게 보여줍니다.
WebP는 더 발전된 예측·엔트로피 코딩으로 이 차이를 만들어냅니다. 무손실 모드에서는 공간 예측, 컬러 캐시, LZ77 스타일 역참조, 다중 허프만 트리 허프만 코딩을 사용합니다. PNG의 DEFLATE 압축은 견실하지만 1990년대의 범용 알고리즘입니다.
다만 PNG가 유리한 영역도 있습니다. PNG는 채널당 16비트 색상 깊이를 지원하는데, 이는 과학 영상, HDR 콘텐츠, 전문 사진 워크플로에서 중요합니다. 또한 데스크톱 출판, 이미지 에디터, 레거시 시스템 등 웹 외 환경에서는 PNG의 소프트웨어 지원이 훨씬 넓습니다.
웹에서 WebP를 꺼리게 했던 가장 큰 이유는 이미 사라졌습니다. 2020년 Safari 지원을 끝으로 모든 모던 브라우저가 WebP를 네이티브 지원하며, 전체 브라우저 점유율의 97%를 넘깁니다.
When to Use WEBP
- 파일 크기가 페이지 속도에 직결되는 웹 이미지
- PWA(프로그레시브 웹 앱) 및 모바일 퍼스트 사이트
- 투명도와 손실 압축을 동시에 활용해야 하는 이미지
- GIF를 대체하는 웹 애니메이션 이미지
- 모던 브라우저를 대상으로 하는 프로젝트 (97% 이상 지원)
- 대역폭 비용이 중요한 CDN 배포 콘텐츠
When to Use PNG
- 모든 플랫폼과 소프트웨어에서 최대 호환성이 필요한 경우
- 16비트 색상 깊이가 필요한 전문 이미징
- 데스크톱 애플리케이션 및 웹이 아닌 환경
- 형식의 장기 지속성이 중요한 보관용 이미지
- WebP 지원이 불확실한 환경
- 픽셀 아트 및 레트로 게임 에셋 (기존 워크플로 유지)
Conclusion
2024년 기준, 웹 이미지에서는 WebP가 더 나은 선택입니다. 더 작은 파일을 만들면서 PNG가 제공하는 모든 기능(투명도, 무손실, 애니메이션)을 지원하고, 브라우저 호환성도 거의 보편적입니다. 웹 외 환경에서 최대 호환성이 필요하거나, 16비트 색상 깊이가 필요하거나, WebP를 아직 지원하지 않는 도구를 사용해야 할 때는 PNG를 선택하면 됩니다.