오랫동안 완전한 알파 채널 투명도를 지원하면서 어디서나 열리는 형식은 PNG뿐이었습니다. 로고와 아이콘, 배경이 투명한 이미지의 기본값이 된 이유입니다. WebP가 이 구도를 바꿔 놓았습니다. WebP 역시 완전한 알파 채널을 지원하고(반투명과 가장자리 안티앨리어싱 포함), 파일은 눈에 띄게 작습니다. 2026년 기준으로 둘 중 무엇을 고를지는 결국 그 이미지를 어디에 쓸 것인지에 달려 있습니다.
한눈에 보는 비교
| 항목 | PNG | WebP |
|---|---|---|
| 투명도(알파 채널) | ✅ 완전한 알파 채널 | ✅ 완전한 알파 채널 |
| 반투명 | ✅ 256단계 | ✅ 256단계 |
| 무손실 압축 | ✅ 지원(기본 방식) | ✅ 지원(옵션 지정) |
| 손실 압축 | ❌ 미지원 | ✅ 지원(사진용) |
| 파일 크기(단순한 로고) | 기준(1×) | 20~30% 작음 |
| 브라우저 호환성 | 100% | >97% (2026) |
| 이메일 지원 | ✅ 어디서나 지원 | ⚠️ 불완전 |
| Office·Word·PowerPoint 지원 | ✅ 완전 지원 | ⚠️ 부분 지원(최신 버전만) |
| 구형 소프트웨어 지원 | ✅ 어디서나 지원 | ⚠️ 제각각 |
| 확대·축소되는 로고에는 SVG가 낫나요? | PNG는 확대에 약함 | WebP도 확대에 약함 |
실제로 크기 차이는 얼마나 날까
배경이 투명한 단순한 로고와 아이콘이라면, 무손실 WebP는 PNG보다 이미지 복잡도에 따라 15%에서 40%까지 작아집니다. 색이 적고 디테일이 단순한 로고일수록 WebP의 이점이 커집니다.
투명 영역이 더 복잡한 이미지, 이를테면 가장자리가 섬세하게 따진 제품 컷이라면 알파 채널을 쓰는 손실 WebP가 훨씬 유리합니다. 눈에 띄는 화질 저하 없이 같은 PNG보다 50~70%까지 작아지기도 합니다.
📌 요즘 웹사이트의 로고라면 SVG가 둘 다보다 낫습니다. SVG는 벡터라서 어떤 크기로 키워도 계단 현상이 생기지 않고 CSS로 색까지 바꿀 수 있습니다. PNG와 WebP는 해상도가 고정된 비트맵입니다. 웹사이트 로고에는 가능한 한 SVG를 쓰고, SVG를 받지 않는 곳에서만 PNG나 WebP를 쓰십시오. 자세한 내용은 SVG vs PNG.
PNG를 써야 할 때
- 이메일 마케팅에 넣는 로고와 아이콘(호환성이 확실합니다)
- Word, PowerPoint, 구글 문서에 삽입하는 이미지
- WebP를 못 읽을 수도 있는 환경에서 파일을 열게 될 때
- 메신저 스티커(투명 PNG로만 받는 경우가 많습니다)
- 오래된 플랫폼에 업로드하는 로고
투명 WebP를 써야 할 때
- 요즘 웹사이트와 웹 앱의 로고와 아이콘
- 쇼핑몰의 배경 제거된 제품 컷(Shopify, WooCommerce 등)
- 배너나 웹페이지 구성 요소로 쓰는 투명 이미지
- 원래 PNG를 골랐을 자리인데 최종 목적지가 요즘 웹인 경우
투명 WebP가 모든 상황에서 PNG를 대체할 수 있나요?
요즘 웹에서라면 그렇습니다. 다만 이메일이나 오피스 문서처럼 오래된 소프트웨어와의 호환성이 중요한 곳에서는 PNG가 여전히 안전합니다. 두 버전을 모두 보관해 두고 웹사이트에는 WebP를, 그 밖의 용도에는 PNG를 쓰는 방식을 권합니다.
WebP의 투명도는 PNG와 똑같이 작동하나요?
네. WebP도 PNG와 똑같이 256단계 불투명도를 다루는 8비트 알파 채널을 지원합니다. 반투명 표현이나 가장자리의 부드러운 안티앨리어싱까지 그대로 담깁니다. 투명도만 놓고 보면 두 형식 사이에 눈에 띄는 차이는 없습니다.
WebP가 더 효율적인데 왜 아직도 PNG를 쓸까요?
관성과 호환성 때문입니다. PNG는 1996년부터 쓰여 온 형식이라 어떤 소프트웨어에서도, 어떤 플랫폼에서도 열립니다. WebP는 브라우저 지원이 훌륭한 반면 이메일과 구형 소프트웨어에는 아직 빈틈이 남아 있습니다. 무엇보다 WebP도 PNG와 똑같이 투명도를 지원한다는 사실 자체를 모르는 사람이 많습니다.