WebP가 JPG·PNG·GIF보다 효율적인 이유 — 예측 코딩과 무손실·손실 모드의 과학
온라인에서 이미지는 항상 무겁습니다. 블로그 포스트 한 개에 5장의 사진만 포함해도 총 8~15MB가 되기 쉽고, 이는 페이지 로딩 속도를 3~5초 늘립니다. 구글 Core Web Vitals 지표에서 로딩 속도는 검색 순위에 직접 영향을 미치므로, 많은 웹마스터들이 이미지 최적화에 고민합니다. JPG와 PNG는 오래되었지만 여전히 널리 쓰이는데, 왜 WebP를 써야 할까요? 같은 화질을 유지하면서 더 작은 파일을 만드는 기술적 원리를 이해하면, 콘텐츠 배포 전략이 근본적으로 달라집니다.
JPG와 PNG의 압축 한계를 마주하다
JPG는 1992년 탄생한 손실 압축 포맷으로, 사진처럼 색상 그라데이션이 많은 이미지에 최적화되었습니다. 인간의 눈이 밝기 변화보다 색상 변화에 덜 민감하다는 특성을 이용해, YCbCr 색공간으로 변환 후 색상 정보(Cb, Cr)를 더 심하게 압축합니다. 이를 크로미낸스 서브샘플링이라 부르는데, 4:2:0 비율로 설정하면 색상 정보를 75% 줄일 수 있습니다. 그러나 JPG는 8×8 픽셀 블록 단위로 처리되므로, 압축률을 높이면 블록이 눈에 띄는 '블로킹 아티팩트'가 생깁니다.
PNG는 1996년 무손실 압축 포맷으로 등장했습니다. 투명도(알파 채널)를 지원하고 품질 손실이 없어서 로고, 아이콘, 스크린샷에 이상적입니다. 그러나 무손실 방식이므로 압축률이 본질적으로 낮습니다. 예를 들어 같은 사진을 JPG(85% 품질)로 저장하면 80KB가 되지만, PNG로 저장하면 320KB에 달합니다. GIF는 1987년 탄생했고 최대 256색만 지원해 현대 사진에는 부적합하지만, 애니메이션 지원으로 움짤 용도로는 여전히 쓰입니다. 다만 무손실 LZW 압축만 지원해서 파일이 매우 커집니다.
WebP의 핵심 기술 1: 예측 코딩(Predictive Coding)
WebP는 2010년 구글이 발표한 차세대 포맷으로, VP8 비디오 코덱을 기반으로 설계되었습니다. 첫 번째 혁신은 예측 코딩입니다. 이미지의 대부분 픽셀은 이웃한 픽셀과 비슷한 값을 가집니다. 예를 들어 파란 하늘 영역에서 한 픽셀의 값이 RGB(135, 180, 220)라면, 옆 픽셀은 RGB(134, 181, 219)일 확률이 높습니다.
WebP는 이 특성을 이용해 현재 픽셀을 인코딩할 때 '이웃 픽셀들로부터 현재 픽셀 값을 예측'하고, 실제 값과의 '차이'만 저장합니다. 차이는 원래 값보다 수치가 훨씬 작으므로, 같은 비트 수로 더 효율적으로 압축할 수 있습니다. 예를 들어 원래 값을 직접 저장하면 픽셀당 24비트(8×3)가 필요하지만, 예측과의 차이만 저장하면 픽셀당 4~6비트로 줄일 수 있습니다.
WebP는 픽셀의 위치에 따라 4가지 예측 모드를 적용합니다. 수직 방향으로 색상이 변하는 영역에서는 위쪽 픽셀을, 수평 방향으로 변하는 영역에서는 왼쪽 픽셀을 기준으로 예측합니다. 평탄한 영역에서는 평균값을, 대각선 엣지에서는 더 정교한 선형 보간을 사용합니다. 이렇게 지역별로 최적 예측 모드를 자동으로 선택하므로 JPG의 고정 8×8 블록 방식보다 훨씬 유연합니다.
WebP의 핵심 기술 2: 변환 코딩과 엔트로피 압축
예측 코딩으로 만든 차이값들은 여전히 통계적 성질을 가집니다. WebP는 여기에 변환 코딩(Transform Coding)을 적용합니다. 차이값 블록들을 이산 코사인 변환(DCT) 또는 워시-하다마드 변환(Hadamard Transform) 같은 수학 함수로 변환해, 에너지를 소수의 계수에 집중시킵니다. 이렇게 변환된 계수 중 작은 값들은 0으로 설정(양자화)하거나 버릴 수 있으므로, 최종 파일 크기가 크게 줄어듭니다.
그 다음은 엔트로피 압축입니다. 허프만 코딩이나 산술 코딩 같은 기법으로, 자주 나타나는 값에는 짧은 비트를, 드물게 나타나는 값에는 긴 비트를 할당합니다. 예를 들어 0이 전체의 70%를 차지하면 0은 1비트로 인코딩하고, 25는 0.1%만 나타나면 12비트로 인코딩하는 방식입니다. 이를 통해 평균 비트 수를 이론적 최소값에 가깝게 만듭니다.
JPG도 DCT와 허프만 코딩을 사용하지만, 무조건 8×8 고정 블록으로 나눈 후 처리합니다. WebP는 예측 코딩으로 먼저 수평·수직 상관성을 제거하고 난 후 변환 코딩을 적용하므로, 변환할 데이터양이 이미 줄어 있습니다. 결과적으로 같은 화질에서 JPG보다 25~35% 더 작은 파일을 만들 수 있는 것입니다.
WebP의 무손실 모드와 손실 모드의 전략적 선택
WebP는 손실과 무손실 두 가지 모드를 모두 지원합니다. 손실 모드는 위에서 설명한 예측 코딩과 변환 코딩을 조합해 사진처럼 색상이 복잡한 이미지에 최적화됩니다. 양자화 파라미터를 조절해 품질 0~100 범위에서 세밀하게 압축 정도를 설정할 수 있습니다. 일반적으로 품질 80~85에서 JPG 품질 85와 동일한 시각적 품질을 달성하면서 파일 크기는 20~30% 더 작습니다.
무손실 모드는 PNG와 비교됩니다. PNG는 Deflate 알고리즘(LZ77 + 허프만 조합)만 사용하지만, WebP 무손실 모드는 위의 예측 코딩과 변환 코딩을 그대로 적용합니다. 실제 측정치로 보면, 같은 PNG 파일을 WebP 무손실로 변환하면 평균 26% 파일 크기가 줄어듭니다. 로고와 스크린샷 같은 고유 색상이 적은 이미지에서는 40% 이상 줄어들기도 합니다.
실전에서는 이미지 성질에 따라 선택해야 합니다. 사진과 자연스러운 그라데이션이 있다면 손실 모드 WebP를 쓰되, 품질 80~85로 설정하는 것이 권장됩니다. 로고, 아이콘, 스크린샷, 텍스트가 있는 그래픽이라면 무손실 WebP를 쓰면 PNG보다 25~40% 더 작게 만들 수 있습니다. 투명도가 필요한 경우도 WebP의 무손실 모드가 알파 채널을 지원하므로 걱정 없습니다.
실전 비교: JPG vs PNG vs WebP의 파일 크기와 로딩 속도
구체적인 수치로 비교해봅시다. 2400×1600 해상도의 풍경 사진을 세 가지 포맷으로 저장했을 때의 결과입니다:
| 포맷 | 설정 | 파일 크기 | 상대 크기 | 시각적 품질 |
|---|---|---|---|---|
| JPG | 품질 85 | 245 KB | 100% | 약간의 블로킹 아티팩트, 실무에서 만족 |
| PNG | 무손실 | 945 KB | 386% | 완벽한 무손실, 디테일 유지 |
| WebP | 손실, 품질 80 | 163 KB | 67% | JPG와 동등 이상, 아티팩트 없음 |
| GIF | 256색 팔레트 | 1,240 KB | 506% | 색상 손실, 웹 사진에 부적합 |
같은 사진에서 JPG(85)는 245KB, WebP(80)는 163KB입니다. 차이는 82KB인데, 블로그에 이런 이미지 5장만 줄여도 410KB가 절약됩니다. 한 페이지 로딩 속도가 3G 환경에서 0.8초 단축되는 것입니다. 월 10만 방문자 블로그라면, 이 최적화로 월 80시간의 사용자 대기 시간을 절약할 수 있습니다.
로고와 같은 그래픽 이미지도 비교해봅시다. 투명도 있는 로고를 세 가지로 저장했을 때:
| 포맷 | 설정 | 파일 크기 | 상대 크기 |
|---|---|---|---|
| PNG | 무손실 + 투명도 | 42 KB | 100% |
| WebP | 무손실 + 투명도 | 31 KB | 74% |
같은 로고에서 PNG는 42KB, WebP 무손실은 31KB입니다. 26% 감소이며, 웹사이트에 로고가 수십 개 쓰인다면 상당한 절약이 됩니다.
WebP 채택 시 고려사항과 하위호환성
WebP는 혁신적이지만, Internet Explorer 11 이하에서 지원되지 않습니다. 2024년 현재 IE 시장점유율은 1% 미만이지만, 기업 환경이나 레거시 시스템이 있다면 대비가 필요합니다. 가장 권장되는 방법은 HTML의 <picture> 요소를 사용해 브라우저가 지원하는 포맷을 선택하도록 하는 것입니다.
예를 들어 다음과 같이 작성하면:
<picture><source srcset="image.webp" type="image/webp"><source srcset="image.jpg" type="image/jpeg"><img src="image.jpg" alt="설명"></picture>
모던 브라우저(Chrome, Firefox, Safari 14+, Edge)는 WebP를 사용하고, 구형 브라우저는 JPG를 사용합니다. 이 방법으로 호환성을 완벽히 유지하면서 70~80%의 사용자에게 WebP의 이점을 제공할 수 있습니다.
또 다른 고려사항은 편집 도구의 지원입니다. Photoshop 2023 이후, GIMP, Affinity Photo 등 주요 이미지 편집 소프트웨어는 모두 WebP를 지원하므로 접근성은 문제없습니다. 온라인 도구로도 editpixel의 이미지 편집기처럼 WebP 변환과 품질 조절이 가능해서, 별도 소프트웨어 설치 없이도 손쉽게 최적화할 수 있습니다.
실전 최적화 전략: 언제 어떤 포맷을 선택할 것인가
정리하면, 다음과 같은 의사결정 기준을 따르면 됩니다.
- 사진과 자연스러운 그라데이션: WebP 손실 모드(품질 80~85) 또는 JPG(품질 85). WebP가 가능하면 우선.
- 로고, 아이콘, 그래픽: WebP 무손실 또는 PNG. 투명도 필요시 반드시 WebP 무손실 권장.
- 애니메이션(움짤): WebP 손실 모드 애니메이션(지원 브라우저는 GIF보다 40% 작음) 또는 GIF. IE 지원이 필수라면 GIF.
- 스크린샷과 텍스트가 있는 이미지: WebP 무손실 또는 PNG 무손실. 텍스트 선명도를 위해 무손실 필수.
- 레거시 호환성이 중요한 경우:
<picture>요소로 WebP와 JPG/PNG를 함께 제공.
WebP의 효율성은 단순히 파일 크기 수치에 멈추지 않습니다. 예측 코딩으로 픽셀 간 상관성을 제거하고, 변환 코딩으로 에너지를 집중시키며, 엔트로피 압축으로 비트 낭비를 최소화하는 다층 구조 덕분에, 같은 시각적 품질에서 근본적으로 더 작은 파일을 만들 수 있습니다. 블로그, 전자상거래, SNS 등 이미지 기반 콘텐츠를 다루는 모든 웹마스터에게 WebP 도입은 이제 선택이 아닌 필수 최적화 전략입니다.