Logo

WebP 압축: 왜 JPEG보다 나은가

By Artur6분 소요

JPEG는 30년 동안 기본 이미지 포맷이었다. 어디에나 있다. 모든 카메라, 모든 스마트폰, 모든 웹사이트가 사용한다.

하지만 JPEG는 나이를 보이고 있다. 같은 품질에서 더 작은 파일을 만드는 새로운 포맷이 있다. 투명도를 지원한다. 사진과 그래픽을 모두 잘 처리한다. 그리고 모든 현대 브라우저가 지원한다.

그 포맷이 WebP다. 웹 이미지에서 JPEG를 이기는 이유와 사용을 시작하는 방법을 알아보자.

WebP는 JPEG보다 얼마나 작은가?

숫자가 명확하다. WebP는 같은 시각적 품질에서 JPEG보다 25-35% 작은 파일을 만든다.

Google은 WebP를 만들 때 광범위한 테스트를 했다. 100만 장의 이미지 데이터셋에서 WebP 손실 파일은 동등한 JPEG 파일보다 25-34% 작았다. 무손실 압축에서 WebP는 PNG보다 26% 작았다.

실제로는 어떻게 보이나? 품질 80의 JPEG로 압축한 제품 사진이 200KB일 수 있다. 같은 이미지를 WebP로 같은 시각적 품질로 만들면 약 140KB다. 이미지당 60KB 절약.

이것을 웹사이트 전체로 확장해 보자. 제품 이미지 10장이 있는 페이지는 600KB를 절약한다. 전체 게시물에 이미지 50장이 있는 블로그는 3MB를 절약한다. 수천 개의 상품이 있는 이커머스 사이트? 대역폭 절약이 빠르게 쌓인다.

이것들은 이론적인 숫자가 아니다. 실제 압축 비교에서 나온 것이다. 절약 효과는 다양한 유형의 사진에서 일관적이다. 인물, 풍경, 제품 사진, 음식 사진. WebP는 파일 크기에서 JPEG를 일관되게 이긴다.

다양한 압축 방법의 작동 원리에 대해 더 깊이 알고 싶다면, 이미지 압축 완벽 가이드에서 기본을 다룬다.

WebP가 JPEG보다 더 효율적으로 압축하는 이유는?

JPEG는 1992년에 설계되었다. 이산 코사인 변환(DCT)이라는 기법을 사용해 8x8 픽셀 블록으로 이미지를 압축한다. 당시에는 뛰어난 기술이었지만, 블록 기반 접근 방식은 낮은 품질 설정에서 눈에 보이는 아티팩트를 만든다. 본 적 있을 것이다: JPEG 품질을 너무 낮추면 나타나는 블록 같은 픽셀화 패치.

WebP는 더 현대적인 접근 방식을 사용한다. VP8 비디오 코덱(WebM 비디오와 같은 기술)에 기반한다. 고정된 8x8 블록 대신 WebP는 가변 크기 블록을 사용한다. 주변 블록을 기반으로 각 픽셀 블록이 어떻게 보일지 예측한다. 예측과 실제 이미지의 차이만 저장한다.

이 예측 기반 접근 방식이 훨씬 효율적이다. WebP는 같은 이미지 데이터를 더 적은 바이트로 기술할 수 있다.

WebP는 날카로운 가장자리 처리도 더 뛰어나다. JPEG는 텍스트와 하드 에지 주변에 "링잉" 아티팩트를 자주 만든다. WebP의 예측 모델은 이 전환을 더 깔끔하게 처리한다. 그래서 WebP는 더 작은 파일 크기에서도 JPEG보다 더 좋아 보인다.

무손실 압축에서 WebP는 여러 기법의 조합을 사용한다. 변환 코딩, 공간 예측, 색 공간 변환, 효율적인 엔트로피 코더. 이것들이 합쳐져 PNG보다 25-30% 더 효율적으로 무손실 이미지를 압축한다.

실용적인 결과? 같거나 더 좋아 보이는 더 작은 파일. 그게 전부다.

모든 브라우저가 WebP를 지원하나?

그렇다. 실용적으로 WebP는 어디서든 작동한다.

2026년 현재, WebP는 전 세계 브라우저의 97% 이상에서 지원된다. Chrome, Firefox, Safari, Edge, Opera, 그리고 모든 주요 모바일 브라우저가 WebP를 기본 지원한다. Safari가 2020년(Safari 14)에 지원을 추가했는데, 이것이 마지막 주요 미지원 브라우저였다.

WebP를 지원하지 않는 브라우저는 Internet Explorer(Microsoft가 중단함)와 거의 아무도 사용하지 않는 매우 오래된 모바일 브라우저뿐이다.

현재 브라우저 지원:

브라우저 WebP 지원
Chrome 지원 (2014년부터)
Firefox 지원 (2019년부터)
Safari 지원 (2020년부터)
Edge 지원 (2018년부터)
Opera 지원 (2014년부터)
Samsung Internet 지원
iOS Safari 지원 (iOS 14부터)

안전망이 필요하면 <picture> 요소와 JPEG 폴백을 사용하라:

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

브라우저는 WebP를 사용할 수 있으면 WebP를 선택한다. 못 하면 JPEG로 폴백한다. JavaScript 불필요. 추가 복잡도 없음. 오래된 브라우저의 2-3% 사용자도 여전히 이미지를 본다.

하지만 2026년 대부분의 사이트에서는 모든 사람에게 안전하게 WebP를 제공할 수 있다.

모든 이미지를 WebP로 변환해야 하나?

대부분의 웹 이미지에 대해서는 그렇다. WebP는 눈에 보이는 품질 차이 없이 더 작은 파일을 제공한다. 사용하지 않을 이유가 거의 없다.

하지만 다른 포맷을 유지하는 것이 나은 상황이 몇 가지 있다.

JPEG를 유지할 때: 인쇄용으로 이미지를 배포하거나 오래된 데스크톱 소프트웨어에서 파일을 열 수 있는 사람과 공유할 때. 일부 사진 편집기와 인쇄 서비스는 JPEG를 선호한다. 하지만 웹에서는 WebP가 이긴다.

PNG를 유지할 때: 아카이빙이나 편집 워크플로우를 위해 픽셀 퍼펙트 무손실 압축이 필요할 때. WebP 무손실도 작동하지만, PNG는 데스크톱 도구와 디자인 소프트웨어에서 더 폭넓게 지원된다.

AVIF를 고려할 때: WebP보다 더 나은 압축을 원할 때. AVIF 파일은 WebP보다 20-30% 작다. 하지만 AVIF는 인코딩이 느리고 브라우저 지원이 약간 적다(~93%). 다음 단계이지만, 오늘날의 안전한 선택은 WebP다.

SVG를 사용할 때: 로고, 아이콘, 단순한 그래픽. SVG는 벡터 기반으로 모든 크기에 완벽하게 스케일된다. 단순한 형태와 텍스트에서는 보통 어떤 래스터 포맷보다 작다.

표준 웹 용도 — 제품 사진, 블로그 이미지, 히어로 배너, 썸네일 — 에서는 모두 WebP로 변환하라. 파일 크기 절약은 무료 성능 향상이다. 그리고 웹사이트 이미지 압축은 가장 쉬운 속도 향상 중 하나다.

WebP는 SEO와 페이지 속도에 어떤 영향을 주나?

더 작은 이미지는 더 빠른 페이지를 의미한다. 더 빠른 페이지는 더 좋은 순위를 의미한다. 그만큼 간단하다.

Google PageSpeed Insights는 "차세대 형식"으로 이미지를 제공할 것을 명시적으로 권장한다. WebP와 AVIF를 의미한다. 아직 JPEG나 PNG를 제공하고 있다면, Lighthouse 감사 때마다 이 경고를 보게 된다.

JPEG에서 WebP로 전환하면 Core Web Vitals가 직접 개선된다. 가장 많이 혜택을 받는 지표는 Largest Contentful Paint (LCP)다. 히어로 이미지가 LCP 요소라면(보통 그렇다), 30% 작은 파일은 30% 빠르게 로딩된다는 의미다. LCP를 0.5초 이상 줄일 수 있다.

데이터가 보여주는 것:

  • WebP 이미지를 제공하는 페이지는 같은 페이지에서 JPEG를 제공할 때보다 평균 200-500ms 빠르게 로딩된다.
  • 모바일 사용자는 더 느린 연결을 사용하므로 더 큰 개선을 본다.
  • Google Search Console 데이터는 현대적 이미지 포맷을 사용하는 사이트의 Core Web Vitals가 일관적으로 더 좋다는 것을 보여준다.

LCP 외에도, 더 작은 이미지는 더 적은 대역폭을 의미한다. 더 적은 대역폭은 더 낮은 호스팅 비용을 의미한다. 트래픽이 많은 사이트에서 절약은 현실적이다.

그리고 보너스: Google 이미지 검색은 WebP 파일을 문제없이 색인한다. 이미지는 여전히 이미지 검색 결과에 나타난다. WebP는 발견 가능성을 전혀 해치지 않는다.

JPEG를 WebP로 변환하는 방법은?

워크플로우에 따라 여러 가지 방법이 있다.

온라인 도구. 가장 간단한 방법. JPEG를 업로드하고, 품질 수준을 설정하고, WebP 파일을 다운로드한다. CompressIMG는 일괄 변환을 지원한다. 최대 20장을 한 번에 업로드하고, 품질을 고르고, 모두 WebP로 다운로드한다.

빌드 시 변환. Next.js, Astro, Gatsby 같은 프레임워크를 사용한다면 이미지 최적화가 자동으로 이루어지는 경우가 많다. Next.js의 Image 컴포넌트는 빌드 시 이미지를 변환하고 리사이즈한다. JPEG를 업로드하면 방문자에게 WebP가 전달된다.

커맨드라인 도구. Google의 cwebp 도구가 개별 파일을 변환한다. Sharp(Node.js)와 Pillow(Python)가 코드 내에서 변환을 처리한다. 커스텀 빌드 파이프라인에 유용하다.

CDN 기반 변환. Cloudflare와 Imgix 같은 서비스가 이미지를 즉석에서 변환한다. 원본 JPEG를 업로드하면 CDN이 지원하는 브라우저에 WebP를 제공한다. 빌드 단계 불필요.

대부분의 콘텐츠 크리에이터와 소규모 팀에게 온라인 도구가 가장 빠른 경로다. CMS나 호스팅 설정을 바꿀 필요 없다. 업로드 전에 이미지를 압축하고 변환하면 된다.

어떤 품질 설정을 써야 하나? 사진에는 WebP 품질 75-85가 훌륭한 결과를 준다. WebP 품질 80이 JPEG 품질 85와 동등하게 보인다는 것을 기억하라. WebP의 압축이 더 효율적이기 때문이다. 약간 낮은 숫자를 써도 같은 시각적 결과를 얻을 수 있다.

WebP의 투명도와 애니메이션 지원은?

JPEG에 대한 WebP의 장점 중 하나는 투명도와 애니메이션을 지원하는 것이다. JPEG는 둘 다 지원하지 않는다.

투명도: WebP는 PNG처럼 알파 채널을 처리한다. 완전히 투명한 배경, 반투명 오버레이, 부드러운 안티앨리어싱 가장자리를 가질 수 있다. 하지만 파일 크기는 PNG보다 훨씬 작다. 투명 WebP는 보통 같은 PNG보다 25-35% 작다.

이것이 WebP를 뛰어나게 만드는 용도:

  • 흰색이나 커스텀 배경 위의 제품 이미지
  • 로고 오버레이
  • 배지와 스티커 같은 UI 요소
  • 다른 콘텐츠 위에 놓여야 하는 모든 그래픽

애니메이션: WebP는 GIF처럼 애니메이션을 지원하지만 압축이 훨씬 좋다. 애니메이션 WebP는 같은 GIF보다 30-50% 작을 수 있다. 256색(GIF의 제한)을 넘는 색상도 지원해서, 사진 콘텐츠에서 애니메이션 WebP가 훨씬 좋아 보인다.

간단한 애니메이션과 밈에는 GIF도 괜찮다. 하지만 파일 크기가 중요하다면(웹에서는 항상 중요하다), 애니메이션 WebP가 더 좋은 선택이다.

이 다재다능함이 WebP를 특별하게 만든다. JPEG는 사진을 처리한다. PNG는 투명도를 처리한다. GIF는 애니메이션을 처리한다. WebP는 하나의 포맷으로 세 가지 모두를 처리하며, 모든 경우에서 더 나은 압축을 달성한다.

JPEG를 완전히 버릴 때가 됐나?

완전히는 아니다. 하지만 웹에서는 WebP가 기본이어야 한다.

JPEG는 여전히 자리가 있다. 모든 기기, 앱, 서비스가 이해하는 보편적 포맷이다. 이메일로 사진을 보내거나, USB 드라이브로 파일을 공유하거나, 인쇄소와 작업할 때 JPEG는 여전히 안전한 선택이다.

하지만 웹사이트의 이미지라면? 2026년에 WebP 대신 JPEG를 제공할 좋은 이유가 없다. 파일은 더 작다. 품질은 같거나 더 좋다. 브라우저 지원은 거의 보편적이다. 모든 현대 CMS와 프레임워크가 WebP를 처리할 수 있다.

TinyPNG, Squoosh, CompressIMG 비교는 모든 주요 압축 도구가 WebP를 지원한다는 것을 보여준다. 특정 도구나 워크플로우에 묶이지 않는다.

전환하라. 이미지는 더 작아진다. 페이지는 더 빨라진다. 방문자와 Google 모두 그 차이를 알아챌 것이다.

CompressIMG는 이미지를 WebP로 변환하고 압축한다. JPEG를 업로드하고, 품질을 설정하고, 25-35% 더 작은 WebP 파일을 다운로드하라. 무료이며 브라우저에서 바로 작동한다.

CompressIMG

품질 손실 없이 이미지를 압축하세요. 무료, 빠르고 브라우저에서 바로 가능합니다.

CompressIMG 무료 체험
Share