구글 PageSpeed Insights로 속도를 측정했을 때 "차세대 형식으로 이미지 제공"이라는 항목을 본 적이 있다면, 그건 이미지를 WebP로 바꾸라는 권고였습니다. 구글이 웹 이미지의 현대적 표준으로 보는 형식이고, 그렇게 볼 만한 이유가 충분합니다.
WebP라는 이름은 무슨 뜻일까
WebP는 구글이 개발해 2010년에 공개한 이미지 형식입니다. 이름은 Web과 그림을 뜻하는 Picture를 붙인 것입니다. 목표는 분명했습니다. JPG와 PNG보다 뛰어난 압축률로 웹페이지 용량을 줄이되 눈에 보이는 품질은 그대로 유지하는 것이었습니다.
손실 압축만 되는 JPG, 무손실 압축만 되는 PNG와 달리 WebP는 두 가지 압축 방식을 모두 지원하고, 여기에 알파 채널 투명도와 애니메이션까지 얹었습니다. 사실상 JPG와 PNG, GIF를 파일 하나로 대신할 수 있는 형식인 셈입니다.
WebP는 어떻게 작동할까
손실 방식의 WebP는 역시 구글이 만든 영상 코덱 VP8을 바탕으로 합니다. 여기에는 블록 예측이라는 기법이 쓰입니다. 픽셀을 하나하나 저장하는 대신, 이웃한 블록을 근거로 각 픽셀 블록의 값을 예측하고 예측값과 실제값의 차이만 저장하는 방식입니다. 차이가 작을수록 파일도 작아집니다.
무손실 방식의 WebP는 공간 예측과 색 변환, 그리고 LZ77과 허프만 부호화를 결합한 엔트로피 압축 등 자체 기법을 함께 씁니다. 그 결과 같은 내용을 담은 PNG보다 확실히 작은 무손실 파일이 나옵니다. 평균 26% 정도 작습니다.
WebP는 정말 JPG와 PNG보다 작을까
그렇습니다. 게다가 차이가 꽤 큽니다. 구글이 공개한 자료를 보면 이렇습니다.
| 비교 대상 | 평균 용량 감소 |
|---|---|
| 손실 WebP와 JPG(같은 화질) | 25~35% 작음 |
| 무손실 WebP와 PNG(같은 품질) | 약 26% 작음 |
| 투명 WebP와 PNG | 약 22% 작음 |
쉽게 말해, 제품 사진 500장을 JPG로 올려 둔 온라인 쇼핑몰이라면 WebP로 바꾸는 것만으로 전체 이미지 용량을 3분의 1가량 덜어낼 수 있습니다. 눈에 보이는 화질 손실도 없습니다.
💡 SEO에 미치는 영향: 구글은 페이지 로딩 속도를 검색 순위 요소로 씁니다. WebP 이미지는 코어 웹 바이탈의 핵심 지표 중 하나인 LCP(최대 콘텐츠 표시 시간)를 낮춰 주므로, 검색 결과 순위에도 직접적으로 도움이 됩니다.
WebP의 장점
- 같은 품질에 더 작은 파일: 손실 방식이든 무손실 방식이든 WebP의 압축 효율은 JPG와 PNG를 앞섭니다.
- 투명도 지원: PNG처럼 256단계 불투명도를 다루는 완전한 알파 채널을 지원하면서 파일은 더 작습니다.
- 애니메이션 지원: 애니메이션 WebP는 GIF를 대신하면서 파일은 훨씬 작고 색 표현은 더 좋습니다. GIF가 256색에 묶여 있는 반면 WebP는 수백만 색을 씁니다.
- 한 형식 안에 손실·무손실이 모두: 사진이든 로고든 아이콘이든 애니메이션이든 형식 하나로 해결됩니다.
- 메타데이터 지원: EXIF와 XMP 메타데이터를 지원해 카메라 정보와 위치, 저작권 정보를 그대로 담을 수 있습니다.
- 요즘 브라우저는 모두 기본 지원: 크롬, 파이어폭스, 사파리, 엣지, 오페라 모두 2020년부터 WebP를 지원합니다.
WebP의 한계
- 웹 밖에서는 호환성이 제한적: 오래된 이미지 편집 프로그램과 뷰어, 구형 시스템은 아직 이 형식을 기본으로 인식하지 못합니다. 윈도우 10 이하에서는 파일 탐색기에서 WebP를 열려면 코덱을 따로 설치해야 합니다.
- 일부 플랫폼은 업로드를 거부: 카카오톡 같은 메신저나 일부 이메일 마케팅 도구는 아직 WebP 업로드를 받지 않습니다. 이럴 때는 JPG나 PNG가 여전히 필요합니다.
- 편집 환경이 좁음: WebP 편집을 온전히 지원하는 전문 프로그램은 아직 많지 않습니다. 편집 작업은 RAW나 TIFF, PSD 원본으로 하고 최종본만 WebP로 내보내는 편이 좋습니다.
- 이메일에서는 표시되지 않음: 아웃룩이나 애플 메일 같은 이메일 클라이언트는 WebP를 그려 주지 않습니다. 이메일에 넣을 이미지는 JPG나 PNG로 준비하십시오.
WebP·JPG·PNG·SVG 전체 비교
| 항목 | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| 압축 방식 | 손실·무손실 모두 | 손실 | 무손실 | 벡터 |
| 투명도 | 지원 | 미지원 | 지원 | 지원 |
| 애니메이션 | 지원 | 미지원 | 미지원* | 지원 |
| 사진에 적합 | 지원 | 지원 | 미지원 | 미지원 |
| 로고·아이콘에 적합 | 지원 | 미지원 | 지원 | 지원 |
| 확대해도 깨지지 않음 | 미지원 | 미지원 | 미지원 | 지원 |
| 파일 크기 | 매우 작음 | 작음 | 중간~큼 | 매우 작음 |
| 전반적인 지원 | 최신 브라우저 | 어디서나 지원 | 어디서나 지원 | 최신 브라우저 |
* 움직이는 PNG(APNG)가 있긴 하지만 지원 범위가 좁습니다.
WebP는 언제 쓸까
요즘 웹사이트와 웹 앱에 올라가는 이미지라면 대부분 WebP가 가장 나은 선택입니다.
- 쇼핑몰 제품 사진: 같은 화질을 유지하면서 JPG보다 용량이 25~35% 가벼워 페이지가 더 빨리 뜹니다.
- 배너와 대표 이미지: 이미지 용량이 LCP와 사용자 경험에 곧바로 영향을 주는 자리입니다.
- 투명한 로고와 아이콘: 완전한 알파 채널을 지원하면서 PNG보다 작은 파일로 대신할 수 있습니다.
- 블로그와 포트폴리오 이미지: 화질은 그대로인데 용량은 가볍고 PageSpeed 점수도 좋아집니다.
- 움직이는 GIF 대체: 애니메이션 WebP는 GIF보다 파일이 훨씬 작고 색 표현도 비교가 되지 않습니다.
반대로 이메일에 첨부할 이미지, WebP를 받지 않는 소셜 플랫폼 업로드, 앞으로 편집할 작업 파일에는 WebP를 피하고 JPG나 PNG를 쓰십시오.
지금 이미지를 WebP로 변환해 보십시오
화질 손실 없이 이미지 용량을 최대 35%까지 줄일 수 있습니다. JPG와 PNG를 브라우저 안에서 무료로 WebP로 변환하십시오.
WebP로 변환하기구형 브라우저를 위한 대체 이미지는 어떻게 넣을까
요즘 브라우저는 모두 WebP를 지원하지만, 호환성을 확실히 하려면 JPG나 PNG 대체 이미지를 함께 두는 편이 좋습니다. HTML에서는 <picture> 태그로 처리합니다.
이렇게 해 두면 WebP를 지원하는 브라우저는 작은 쪽을 내려받고, 나머지는 대체로 지정한 JPG나 PNG를 알아서 불러옵니다. 폭넓은 호환성이 필요한 사이트에 구글이 권하는 방식입니다.