PNG는 1996년 특허 문제로 골치를 앓던 GIF를 대체하기 위해 등장한 이후, 웹의 기본 무손실 이미지 포맷 자리를 지켜왔습니다. 2010년 Google이 설계해 2020년에 모든 주요 브라우저가 지원하게 된 WebP는 단 하나의 약속을 들고 등장했습니다: 같은 품질, 더 작은 파일. 이 약속은 실제로도 사실이지만, 두 포맷의 차이는 벤치마크 헤드라인보다 훨씬 미묘합니다. 이 글에서는 파일 크기, 투명도, 애니메이션, 브라우저 지원, 인코딩 속도 등 실질적인 차이와, 어떤 프로젝트에서도 쓸 수 있는 결정 트리를 정리합니다.

짧은 답

2026년 새 웹 작업이라면 WebP가 더 안전한 기본값입니다. 최근 6년 사이 출시된 모든 브라우저가 WebP를 지원하고, 시각적으로 동일한 품질에서 PNG보다 25~35% 작습니다. PNG를 유지해야 할 이유는 (1) 다운스트림 도구가 WebP를 못 읽어 비트 단위로 일치하는 출력이 필요한 에셋 파이프라인이거나, (2) 소비자가 브라우저가 아닌 경우(예: 디코더가 업데이트되지 않은 데스크톱 애플리케이션) 정도입니다.

내부 구조의 차이

PNG는 단일 압축 알고리즘(행 단위 예측 필터에 DEFLATE)을 사용합니다. 항상 무손실이고, 채널당 8비트 고정이며, 투명도를 위한 단일 알파 채널을 지원합니다. 효율보다 충실도를 위해 설계되어, 인코더에 시각적 품질을 바꾸는 노브가 없습니다.

WebP는 두 개의 코딩 경로를 겹쳐놓았습니다. 손실(lossy) WebP는 WebM 영상 코덱과 같은 VP8의 인트라프레임 코더를 가져왔습니다. 무손실(lossless) WebP는 LZ77에 컬러 변환 예측기 스택을 더한 것입니다. 한 WebP 파일은 두 모드 중 하나가 될 수 있고, 대부분의 최신 인코더는 입력에 더 작은 결과를 내는 모드를 자동 선택합니다. WebP는 두 모드 모두에서 알파 채널, 애니메이션 프레임(GIF 대체), 메타데이터까지 지원합니다.

파일 크기 — 실제로 얼마나 줄어드나

벤치마크는 이미지마다 다르지만, 수천 장의 실측 데이터에서 나온 대략적인 경험칙은:

사진성 콘텐츠(풍경, 인물, 제품 사진): 품질 80의 손실 WebP는 PNG보다 30~45% 작은 파일을 만들고, 일반적인 보기 크기에서 차이를 알아볼 수 없습니다. 같은 품질의 JPEG는 WebP와 거의 비슷하지만, 낮은 비트레이트에서는 WebP가 우세합니다.
스크린샷과 UI 목업: 무손실 WebP는 보통 PNG보다 20~30% 작습니다. UI 이미지에서 무손실 코더가 DEFLATE보다 진짜로 더 낫습니다.
플랫 일러스트, 로고, 차트: 무손실 WebP가 40~50% 감소까지 갈 수 있습니다. 단색 영역이 매우 적극적으로 압축됩니다.
픽셀 아트, 256×256 이하 아이콘: WebP와 PNG가 비슷합니다. WebP 컨테이너 오버헤드가 고정이라 매우 작은 크기에서는 PNG가 이기기도 합니다.

투명도: 함정 포인트

PNG의 투명도는 단순합니다. WebP의 투명도도 단순하지만, 일부 인코더(특히 구버전 명령줄 cwebp)가 기본으로 프리멀티플라이드 알파(premultiplied alpha)를 쓰는 함정이 있습니다. 부분 투명 픽셀의 색이 조용히 바뀌어, 다른 배경 위에 합성하면 후광이나 색 변이가 생깁니다. 인코더가 프리멀티플라이드로 변환했다는 신호입니다. 원본 RGB+A를 보존하려면 cwebp -exact 또는 사용 인코더의 동등한 옵션을 쓰세요.

애니메이션

애니메이션 WebP는 MP4/WebM 비디오는 과한, 그러나 GIF로는 답답한 영역에서 GIF를 대체합니다. 480p, 5초, 적당한 품질의 애니메이션이 애니메이션 WebP에서 약 200KB, 최적화 GIF에서 1.2MB, MP4에서 80KB 정도입니다. 애니메이션에 투명도가 필요한데(MP4는 못 함) GIF 크기는 피하고 싶을 때 WebP가 중간 답입니다.

2026년 브라우저 지원

Safari 14(2020년 9월) 이후 모든 에버그린 브라우저에서 보편적으로 지원됩니다. WebP가 패배하는 흔한 시나리오는:

iOS < 14 — 점유율은 미미하지만 일부 엔터프라이즈 청중에게는 여전히 의미 있음
레거시 안드로이드(4.x 이하)의 임베디드 WebView
이메일 클라이언트 — 대부분 여전히 WebP 인라인을 렌더링하지 않습니다. 메일은 PNG/JPEG로.
일부 데스크톱 이미지 뷰어 — macOS Preview는 OK, Windows 기본 사진 앱도 OK입니다.

결정 트리

새 에셋이 들어올 때마다 제가 내리는 판단:

HTML 페이지용인가? WebP. Safari 13보다 오래된 브라우저에서 정확히 보여야 한다면 <picture>에 PNG fallback을 추가하세요.
이메일용인가? PNG 또는 JPEG. 2026년에도 메일 클라이언트의 WebP 지원은 깨져 있습니다.
내가 통제할 수 없는 다운스트림 도구가 처리하는가? 도구를 먼저 테스트하세요. 의심이 들면 PNG로.
작은 아이콘(64×64 이하)? 둘 다 OK. 빌드 파이프라인이 이미 만드는 쪽을 그대로 쓰세요.

안전하게 변환하기

대부분 이미지에서 품질 80 손실 WebP는 원본과 구분이 안 됩니다. 스크린샷, UI 목업, 날카로운 에지가 있는 콘텐츠는 무손실 모드로 — DEFLATE 기반 PNG는 이런 콘텐츠에서 WebP의 무손실 코더를 이길 수 없습니다. PNG 더미를 한 번에 변환할 때는, 저희 PNG → WebP 변환 도구가 브라우저에서 전부 실행되므로 이미지가 기기를 떠나지 않습니다.

결론

WebP는 웹 콘텐츠 영역에서 PNG의 사용 사례를 모두 포함하는 상위 집합이며, 모든 의미 있는 카테고리에서 의미 있게 더 작은 파일을 만듭니다. PNG는 이메일, 레거시 소비자, 아직 못 따라온 다운스트림 도구를 위해 남겨두세요. 그 외에는 WebP를 쓰세요.