웹 디자인이나 고화질 아이콘 작업 시 배경이 투명한 무손실 이미지를 저장하기 위해 많은 분이 PNG를 사용해 왔습니다. 하지만 투명 배경을 지원하면서도 압축률이 훨씬 뛰어난 차세대 포맷 WebP의 등장으로 판도가 바뀌고 있습니다. 화질 저하 없이 웹 로딩 성능을 최적화하기 위해 두 포맷을 어떻게 선택해야 하는지 정리해 드립니다.
WebP 무손실 압축의 기술적 우위
구글 조사에 따르면, WebP 무손실(Lossless) 압축 포맷은 동일한 비트맵 이미지를 기준으로 PNG보다 파일 크기가 평균 26% 더 작습니다. 이는 WebP가 예측 코딩(Predictive Coding) 기법을 사용하기 때문입니다. 주변 픽셀들의 색상 변화 패턴을 미리 예측하고 그 예측 오차만 기록하는 방식을 취하여 화질 손상 없이 훨씬 조밀하게 데이터를 저장할 수 있습니다.
그럼에도 PNG가 여전히 쓰이는 이유
WebP가 용량 면에서 무조건 압축적 우위를 점하고 있음에도, PNG가 여전히 산업 표준으로 넓게 활용되는 이유는 '완벽한 호환성' 덕분입니다.
- 구형 소프트웨어 호환성: 포토샵 구버전이나 인쇄용 특수 출력기 등 고전적인 환경에서는 WebP 확장자를 직접 읽지 못해 플러그인을 설치해야 하는 불편함이 있습니다.
- 웹 환경에서의 구형 기기 대응: 아주 오래된 구형 iOS 기기나 특정 특수 브라우저 환경에서는 WebP를 표시하지 못할 수 있어, 여전히 PNG 폴백 처리가 필요합니다.
실측: 같은 픽셀을 저장하는 데 드는 바이트
무손실끼리는 화질이 동일하므로 비교할 것은 용량 하나뿐입니다. 세 종류의 원본을 PNG와 무손실 WebP로 각각 저장해 실제 바이트를 재봤습니다.
| 원본 종류 | PNG | WebP (무손실) | 절감 |
|---|---|---|---|
| 사진 (연속 계조) | 3,591 KB | 1,603 KB | 55% 감소 |
| 플랫 그래픽 | 23 KB | 9 KB | 59% 감소 |
| 화면 캡처 | 94 KB | 17 KB | 82% 감소 |
세 경우 모두 무손실 WebP가 더 작고, 특히 화면 캡처에서 격차가 큽니다. PNG 94 KB가 17 KB로 줄어 82%가 사라졌습니다. 글자와 UI 요소처럼 같은 패턴이 반복되는 이미지에서 WebP의 예측 압축이 특히 잘 듣기 때문입니다.
성공적인 용량 최적화 실무 팁
가장 추천하는 실무 전략은 개발 중인 소스 원본(인쇄/보관 목적)은 완벽한 호환성을 지닌 PNG로 유지하되, 이를 실제 웹사이트에 배포하거나 전송할 때는 WebP로 일괄 변환하여 탑재하는 것입니다. Switching의 브라우저 로컬 변환 기능을 활용하면 PNG를 WebP로 즉각 인코딩하여 웹 용량을 평균 1/4 이상 대폭 감축할 수 있습니다.