WebP는 2010년 Google이 개발한 이미지 포맷으로, WebM 동영상 포맷에 사용된 VP8 비디오 코덱 기술에서 파생되었습니다. JPEG와 PNG 두 포맷을 하나로 대체하기 위해 설계되었으며 — 사진, 그래픽, 투명 이미지를 모두 지원합니다. 핵심 성능: 동일한 시각적 품질에서 WebP 파일은 JPEG보다 25–35% 작고, 무손실 PNG보다 약 26% 작습니다. 트래픽이 많은 웹사이트에서 이 차이는 직접적으로 더 빠른 로딩 속도와 낮은 대역폭 비용으로 이어집니다.

손실 WebP: VP8 코덱

손실 WebP는 WebM의 동영상 프레임을 압축하는 동일한 코덱인 VP8을 기반으로 합니다. 이 유산 덕분에 손실 WebP는 1992년에 설계된 JPEG가 갖지 못한 기능을 보유합니다.

JPEG와 마찬가지로 손실 WebP는 주파수 영역에서 작동합니다. 이미지 블록을 주파수 계수로 변환하고 인간의 눈이 가장 덜 민감한 고주파 세부 정보를 버립니다. 그러나 JPEG가 이미지 전체에 8×8 블록 크기를 사용하는 반면, VP8은 유연한 매크로블록 기반 예측을 사용합니다. 각 16×16 매크로블록을 인코딩하기 전에, 인코더는 이미 인코딩된 인접 블록을 기반으로 해당 블록의 모습을 예측한 다음 차이(잔차)만 인코딩합니다. 이 방식 덕분에 부드러운 그라디언트와 텍스처가 훨씬 적은 비트로 표현됩니다.

인트라 프레임 예측 — VP8은 휘도(밝기) 매크로블록에 대해 수평, 수직, DC, 대각선 모드를 포함한 10가지 예측 모드를 지원합니다. JPEG에는 이에 해당하는 예측 단계가 없습니다.
유연한 엔트로피 코딩 — VP8은 잔차에 Huffman 코딩 대신 산술 코딩을 사용합니다. 산술 코딩은 이미지 블록과 같이 상관관계가 있는 데이터에서 이론적 정보 엔트로피 한계에 더 가깝게 도달합니다.
향상된 그라디언트 및 텍스처 처리 — 예측 모드와 산술 코딩의 조합으로 VP8은 동일한 파일 크기에서 JPEG보다 훨씬 적은 아티팩트로 하늘, 피부톤, 흐릿한 배경 같은 부드러운 그라디언트를 인코딩합니다.

실제로 손실 WebP는 동일한 지각적 품질에서 JPEG보다 25–34% 작은 파일 크기를 달성합니다. 수천 개의 제품 이미지나 기사 사진을 제공하는 일반적인 웹사이트에서 WebP로 전환하면 눈에 보이는 품질 변화 없이 이미지 페이로드를 3분의 1 줄일 수 있습니다.

무손실 WebP: VP8L 코덱

무손실 WebP는 무손실 압축을 위해 특별히 개발된 VP8L이라는 별도의 코덱을 사용합니다. VP8에서 파생된 것이 아니며, PNG를 대체하도록 설계되었습니다. PNG의 Deflate 알고리즘이 사용하지 않는 네 가지 핵심 압축 변환을 적용합니다.

공간 예측 — 각 픽셀은 14가지 예측 모드 중 하나를 사용하여 이미 인코딩된 인접 픽셀에서 예측됩니다. 실제 값과 예측 값 사이의 차이만 저장됩니다.
색상 공간 변환 — VP8L은 녹색, 빨간색, 파란색 채널을 변환하여 서로 더 상관관계를 갖게 만들고, 후속 압축 단계를 더 효율적으로 만들 수 있습니다.
색상 인덱싱 및 팔레트 모드 — 이미지가 256개 미만의 고유 색상을 사용하면 VP8L은 색상 값을 팔레트 인덱스로 대체합니다. 인덱스 컬러 PNG와 유사하지만 더 효율적인 인코딩 방식입니다.
LZ77 역참조 및 Huffman 코딩 — PNG의 Deflate처럼 VP8L은 LZ77을 사용하여 반복되는 픽셀 패턴을 참조하고 Huffman 코딩으로 출력을 압축합니다. 하지만 VP8L은 위의 변환 이후에 이를 적용하므로 훨씬 더 규칙적인 데이터를 처리합니다.

누적 효과: 무손실 WebP 파일은 평균적으로 동등한 PNG 파일보다 26% 작습니다. 아이콘, 로고, UI 스크린샷, 일러스트레이션 등 웹 그래픽의 경우 PNG에서 무손실 WebP로 전환하면 품질 손실 없이 파일 크기를 줄일 수 있습니다.

알파 채널 지원

WebP가 JPEG에 비해 갖는 중요한 장점 중 하나는 기본 알파 투명도 지원입니다. WebP는 손실 및 무손실 모드 모두에서 알파를 지원하는 반면, JPEG는 투명도를 전혀 저장할 수 없습니다.

무손실 WebP에서 알파 채널은 RGB 데이터와 동일한 VP8L 코덱으로 무손실 압축됩니다. 손실 WebP에서 색상 데이터는 손실 압축되지만 알파 채널은 여전히 VP8L로 무손실 저장됩니다. 이는 선명하고 아티팩트 없는 가장자리를 유지하면서 투명 이미지에서도 손실 WebP의 파일 크기 이점을 얻을 수 있음을 의미합니다.

PNG 대비 — 투명 WebP는 알파가 있는 동등한 PNG보다 일반적으로 3배 작습니다. 로고, 제품 누끼, 투명도가 있는 UI 요소에서 이는 극적인 절약입니다.
JPEG 대비 — JPEG는 투명도를 전혀 저장할 수 없습니다. 사진에는 JPEG, 투명 자산에는 PNG를 사용하는 워크플로를 WebP 하나로 통합할 수 있어 이미지 파이프라인이 단순해집니다.
부분 투명도 — 완전 불투명 또는 완전 투명만 지원하는 GIF와 달리 WebP는 부드러운 반투명 그라디언트가 있는 8비트 알파를 완전히 지원합니다.

WebP 애니메이션

WebP는 ANIM(애니메이션 메타데이터)과 ANMF(애니메이션 프레임) 청크를 사용하여 여러 프레임을 저장하는 애니메이션 WebP 컨테이너 포맷을 통해 애니메이션을 지원합니다. 각 프레임은 별도의 손실 또는 무손실 WebP 이미지가 될 수 있으며, 컨테이너는 각 프레임의 타이밍, 루프 횟수, 블렌딩 모드를 저장합니다.

애니메이션 WebP는 GIF에 비해 상당한 장점을 가집니다.

색상 깊이 — GIF는 프레임당 256색으로 제한됩니다. 애니메이션 WebP는 알파 투명도와 함께 전체 24비트 색상(1670만 색상)을 지원합니다.
파일 크기 — Google 자체 벤치마크에 따르면 애니메이션 WebP 파일은 손실의 경우 동등한 GIF보다 64% 작고, 무손실의 경우 19% 작습니다.
투명도 품질 — GIF는 1비트 알파(켜기/끄기)만 지원합니다. 애니메이션 WebP는 프레임당 부드러운 8비트 알파를 지원하여 깔끔한 페이드 효과와 매끄러운 가장자리를 구현합니다.

이전에 GIF로 제공되던 웹 애니메이션 — 밈, 스티커, 짧은 루프 — 의 경우 애니메이션 WebP는 파일 크기의 일부만으로 훨씬 더 나은 품질을 제공합니다.

손실 WebP의 품질 설정

손실 WebP는 JPEG 품질과 유사하게 0에서 100까지의 품질 파라미터를 허용합니다. 값이 높을수록 파일 크기가 커지지만 더 많은 디테일이 보존됩니다. 관계는 선형적이지 않으며, 품질 100에서 약 85로 낮출 때 가장 큰 파일 크기 절감이 발생합니다.

품질 75–85 — 대부분의 웹 이미지에 적합한 최적점입니다. 품질 80에서 WebP 파일은 품질 80의 JPEG보다 약 30% 작으면서 유사한 시각적 출력을 제공합니다. 제품 이미지, 기사 사진, 마케팅 자산에 권장되는 범위입니다.
품질 60–75 — 완벽한 충실도가 필요하지 않은 썸네일, 소셜 미리보기, 장식용 배경에 적합합니다. 동등한 JPEG보다 40–50% 작은 파일이 만들어집니다.
품질 90–100 — 아카이브 또는 거의 무손실 사용을 위한 설정입니다. 파일이 크지만 최대 품질 JPEG보다 여전히 10–20% 작습니다. 웹 전달에는 거의 필요하지 않습니다.

실용적인 시작점: 품질 80으로 내보내고 시각적으로 비교하세요. 평평한 색상 영역이나 부드러운 그라디언트에서 아티팩트가 보이면 85로 올리세요. 복잡한 텍스처가 있는 사진의 경우 품질 75가 종종 85와 구별하기 어렵습니다.

브라우저 지원

모든 주요 브라우저는 2020년부터 WebP를 지원합니다. Chrome은 2011년, Firefox와 Edge는 2018년, Safari는 버전 14(macOS Big Sur, 2020년 출시)에서 지원을 추가했습니다. 2026년 현재 전 세계 WebP 지원은 97% 이상입니다. 유일하게 의미 있는 예외는 Microsoft에서 더 이상 지원하지 않는 Internet Explorer입니다.

아주 오래된 브라우저의 소수 트래픽을 위한 표준 폴백 패턴은 HTML <picture> 요소입니다.

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="설명" />
</picture>

WebP를 지원하는 브라우저는 <source>를 사용하고, 오래된 브라우저는 <img> 태그로 폴백합니다. 실제로 대부분의 팀은 이제 폴백을 건너뛰고 WebP를 직접 제공합니다.

이미지를 WebP로 변환하는 방법

기존 JPEG 또는 PNG 이미지를 WebP로 변환하는 가장 쉬운 방법은 Picovert의 JPG to WebP 변환기를 사용하는 것입니다. 브라우저에서 완전히 실행되며 — 파일이 서버에 업로드되지 않습니다 — 몇 초 만에 변환됩니다. 품질 슬라이더를 조정하여 파일 크기와 시각적 품질의 균형을 맞추고, 개별적으로 또는 ZIP 아카이브로 결과를 다운로드할 수 있습니다.

빌드 파이프라인에서 이미지를 처리하는 개발자에게는 sharp 라이브러리(Node.js)와 cwebp(Google의 커맨드라인 인코더)가 표준 도구입니다. cwebp 사용법:

cwebp -q 80 input.jpg -o output.webp

디렉토리의 모든 JPEG를 일괄 변환하려면:

for f in *.jpg; do cwebp -q 80 "$f" -o "$(basename $f .jpg).webp"; done

실용적인 권장 사항

웹 개발자와 콘텐츠 제작자를 위해 가장 일반적인 시나리오를 다루는 지침입니다.

모든 웹 이미지에 WebP 사용 — 97% 이상의 브라우저 지원으로 새 웹 콘텐츠에 기본적으로 JPEG나 PNG를 사용해야 할 이유가 더 이상 없습니다. WebP는 더 작은 파일과 동일하거나 더 나은 시각적 품질을 제공합니다.
원본은 JPEG 또는 PNG로 보관 — 항상 원본 파일을 원래 형식으로 유지하세요. 추가 편집을 위해 WebP를 재인코딩하면 손실 모드에서 추가 품질 손실이 발생합니다. WebP를 편집 형식이 아닌 전달 형식으로 취급하세요.
사진에는 손실 WebP 선택 — 이전에 JPEG로 저장되던 모든 이미지(사진, 제품 이미지, 히어로 이미지)는 손실 WebP로 전환해야 합니다. 웹 전달에는 품질 75–85를 사용하세요.
그래픽에는 무손실 WebP 선택 — 로고, 아이콘, 일러스트레이션, UI 스크린샷, 이전에 PNG로 저장되던 모든 이미지는 무손실 WebP로 전환해야 합니다. 품질 손실 없이 더 작은 파일을 얻을 수 있습니다.
중요 경로 이미지에 WebP 우선 적용 — 접힘 위에 표시되는 이미지 — 히어로 이미지, 목록 페이지의 제품 썸네일 — 는 체감 로딩 시간에 가장 큰 영향을 미칩니다. 이것들을 먼저 변환하세요.
애니메이션 GIF 감사 — 사이트의 모든 애니메이션 GIF는 애니메이션 WebP 또는 MP4로 변환할 후보입니다. 둘 다 파일 크기를 대폭 줄이며, MP4는 더 길고 동영상 같은 애니메이션에 더 적합한 선택입니다.

시작하려면 포맷 변환에는 Picovert의 이미지 변환기를, 파일 크기를 세밀하게 조정하려면 이미지 압축기를 사용하세요. 두 도구 모두 계정 없이 브라우저에서 바로 실행됩니다.