WebP는 구글이 VP8 영상 코덱을 바탕으로 개발해 2010년에 내놓은 형식으로, 웹에서 JPG와 PNG를 더 효율적으로 대체한다는 분명한 목표가 있었습니다. 브라우저 지원률이 97%를 넘어선 2026년 현재, 웹사이트용으로는 그 약속을 지켰다고 볼 수 있습니다. 다만 WebP가 최선이 아닌 자리도 있고, 그런 곳에서는 JPG가 여전히 제 몫을 합니다.
항목별 비교
| 특징 | JPG | WebP |
|---|---|---|
| 압축 방식 | 손실 압축만 지원 | 손실·무손실 모두 지원 |
| 압축 효율 | 기준 (1배) | 같은 화질에서 25~35% 더 작음 |
| 투명도(알파 채널) | ❌ 지원하지 않음 | ✅ 지원함 |
| 애니메이션 | ❌ 불가 | ✅ 지원함 |
| 브라우저 호환성 | 100% | >97% (2026) |
| 이메일 지원 | ✅ 어디서나 가능 | ⚠️ 불완전 (Outlook, Apple Mail) |
| 인쇄용 소프트웨어 지원 | ✅ 어디서나 가능 | ⚠️ 제한적 |
| 인코딩 속도 | 매우 빠름 | 빠름 (JPG보다는 느림) |
| 구글 PageSpeed 권장 여부 | ❌ WebP로 교체 권장 | ✅ 차세대 형식 |
| 유튜브 썸네일 지원 | ✅ 사용 가능 | ❌ 사용 불가 |
압축 알고리즘의 차이
JPG는 8×8 픽셀 고정 블록에 이산 코사인 변환(DCT)을 적용합니다. 1992년에 정립된 방식입니다. 사진에는 잘 맞지만 압축을 강하게 걸면 블록 모양의 얼룩 같은 깨짐이 눈에 띕니다.
WebP는 VP8 코덱의 알고리즘을 씁니다. 블록 크기를 상황에 맞게 바꾸는 예측과 적응형 변환을 사용해, 이미지 속 패턴을 훨씬 영리하게 잡아냅니다. 그 결과 같은 화질을 더 적은 데이터로 담거나, 같은 용량에서 눈에 띄게 나은 화질을 얻습니다.
실제 예를 들면, 품질 85%로 저장한 500KB짜리 JPG 상품 사진은 WebP로 바꾸면 눈에 보이는 화질 차이 없이 320~350KB까지 줄어듭니다. 화면에서는 구분되지 않으면서 용량만 30~35% 가벼워지는 셈입니다.
⚡ PageSpeed에 미치는 영향: 구글 PageSpeed Insights의 "차세대 형식으로 이미지 제공" 항목은 WebP로 바꾸면 용량이 줄어들 자리에 JPG를 쓰고 있을 때 뜹니다. 이미지를 WebP로 변환하는 일은 성능 개선 효과가 가장 큰 작업 중 하나입니다.
JPG를 그대로 써야 할 때
- 이메일 마케팅: Outlook이나 Apple Mail 같은 메일 클라이언트는 WebP 지원이 들쭉날쭉합니다. JPG가 안전합니다.
- 인쇄물 제작: 인쇄 소프트웨어와 인쇄소는 JPG(그리고 TIFF)를 기준으로 작업합니다. 이 영역에서 WebP 지원은 제한적입니다.
- 유튜브 썸네일: 유튜브는 JPG와 PNG만 받고 WebP는 받지 않습니다.
- 사용자가 내려받아 직접 여는 파일: 오래된 시스템에서는 WebP를 바로 열지 못할 수 있습니다.
WebP로 옮겨야 할 때
- 요즘 웹사이트나 웹 앱에 올라가는 모든 이미지
- 쇼핑몰 상품 사진 (Shopify는 이미 자동으로 변환합니다)
- 블로그 이미지, 배너, 히어로 이미지
- 구글 PageSpeed가 최적화 대상으로 JPG를 지적할 때
WebP가 JPG를 완전히 대체하게 될까요?
웹에서는 이미 WebP가 권장 표준입니다. 다만 이메일, 인쇄, 오래된 소프트웨어, 그리고 이미 존재하는 수십억 개의 파일 속에서 JPG는 앞으로도 오래 남을 것입니다. 두 형식의 공존은 수십 년 이어질 가능성이 큽니다.
JPG와 WebP의 화질 차이가 눈에 보이나요?
일반적인 사용 환경에서는 거의 보이지 않습니다. 같은 화질이라면 WebP 쪽 파일이 더 작아집니다. 차이는 압축을 강하게 걸수록 뚜렷해집니다. 같은 용량으로 비교하면 WebP가 JPG보다 깨짐이 적으며, 특히 경계선과 미세한 그러데이션에서 차이가 납니다.
사이트에 이미 JPG 이미지가 많습니다. 전부 변환할 가치가 있을까요?
이미지 수에 따라 다릅니다. 이미지가 많은 사이트(쇼핑몰, 포트폴리오, 블로그)라면 일괄 변환만으로도 속도와 PageSpeed 점수가 눈에 띄게 달라집니다. 이미지가 적은 사이트라면 효과는 크지 않습니다. 용량이 큰 이미지와 첫 화면에 바로 보이는 이미지(배너, 히어로, 대표 상품 사진)부터 시작해 보세요.