JPG to WebP 변환기 — 파일 크기 최대 30% 절감

JPG → WebP 변환기

WebP 포맷의 역사와 탄생 배경

WebP는 Google이 2010년 9월 30일에 처음 공개한 이미지 포맷으로, 웹에서의 이미지 전송 속도를 극적으로 개선하려는 목적에서 만들어졌다. Google이 2009년에 인수한 On2 Technologies의 VP8 동영상 코덱 기술을 이미지 압축에 적용한 것이 핵심이다.

2010년대 초반, 웹 페이지의 트래픽 중 이미지가 차지하는 비중은 전체의 50~65%에 달했다. JPEG는 1992년에, PNG는 1996년에 표준화된 오래된 포맷이었고, 모바일 인터넷이 급속도로 확산되면서 더 효율적인 이미지 압축 기술의 필요성이 절실해졌다.

단계별 발전 역사

• 2010년: 손실 압축(Lossy) WebP 첫 공개. Google은 JPG 대비 39% 더 작은 파일 크기를 달성했다고 발표했다.
• 2012년: 무손실 압축(Lossless) WebP와 투명도(알파 채널) 지원 추가. PNG를 대체할 수 있는 기반이 마련되었다.
• 2013년: 애니메이션 WebP 지원 추가. GIF를 대체할 가능성을 열었다.
• 2016년: Chrome 9 이후 꾸준히 지원해왔으며, Android 4.0+에서 기본 지원 시작.
• 2018년: Firefox 65에서 WebP 지원 추가. 주요 브라우저 대부분이 지원하게 되었다.
• 2020년: 가장 큰 장벽이었던 Apple Safari 14에서 WebP 지원 시작. iOS 14, macOS Big Sur 동시 지원.
• 2022년 이후: AVIF, JPEG XL 등 후속 차세대 포맷이 등장했지만, WebP는 범용성에서 여전히 우위를 점하고 있다.

Google의 전략적 배경

Google이 WebP를 개발한 데는 단순한 기술 향상 이상의 전략적 이유가 있었다. 당시 Google은 전 세계 인터넷 트래픽의 상당 부분을 자사 서비스(YouTube, Google 이미지, Gmail 등)가 차지하고 있었고, 이미지 포맷의 효율화는 곧 인프라 비용 절감으로 이어졌다. Google은 실제로 YouTube 썸네일을 WebP로 전환하여 연간 수천 TB의 트래픽을 절감했다고 밝혔다.

WebP vs JPG vs PNG vs AVIF 완전 비교

Google 공식 연구 결과 (2016년 기준)

• 손실 WebP는 JPEG 대비 평균 25~34% 더 작은 파일 크기
• 무손실 WebP는 PNG 대비 평균 26% 더 작은 파일 크기
• 손실 WebP는 동일 SSIM(구조 유사도) 기준으로 JPEG보다 10~80% 더 작음
• 대규모 데이터셋(수백만 장)에 적용 시 평균 압축률 30% 이상 향상

WebP 손실 압축 vs 무손실 압축 원리

손실 압축 (Lossy WebP)

손실 WebP는 JPEG와 유사한 DCT(이산 코사인 변환) 기반 방식을 사용하지만, VP8 코덱의 고급 예측 인코딩(Predictive Coding)을 추가로 적용한다. 이미지를 4×4 픽셀 블록으로 나누어 주변 픽셀을 기반으로 현재 블록의 값을 예측하고, 예측값과 실제 값의 차이(잔차)만을 DCT로 변환하여 저장한다.

이 과정은 크게 네 단계로 이루어진다:

1. 색공간 변환: RGB 이미지를 YUV(명도+색상차) 공간으로 변환. 인간 눈은 밝기 변화에 민감하고 색상 변화에 덜 민감하다는 점을 이용해 색상 채널을 더 강하게 압축한다.
2. 인트라 예측: 이미 인코딩된 주변 블록을 참조하여 현재 블록의 픽셀값을 예측. 16가지 이상의 예측 모드 중 잔차가 가장 작은 모드를 선택한다.
3. DCT 변환 및 양자화: 잔차 신호에 DCT를 적용해 주파수 계수로 변환한 뒤, 품질 인수에 따른 양자화 행렬로 나누어 중요도가 낮은 고주파 성분을 제거한다.
4. 엔트로피 코딩: 양자화된 계수를 산술 코딩(Arithmetic Coding)으로 압축. JPEG의 허프만 코딩보다 5~10% 더 효율적이다.

무손실 압축 (Lossless WebP)

무손실 WebP는 완전히 다른 알고리즘을 사용한다. 크게 세 가지 기법을 결합한다:

• 예측 변환 (Predictor Transform): 각 픽셀을 인근 픽셀로부터 예측하고 잔차만 저장. PNG의 필터와 유사하지만 더 많은 예측 모드를 지원한다.
• 컬러 변환 (Color Transform): 색상 채널 간의 상관관계를 제거해 데이터 중복을 줄인다. 녹색 채널을 기준으로 빨강/파랑 채널의 잔차를 저장하는 방식이다.
• LZ77 + 허프만 코딩: 반복되는 픽셀 패턴을 LZ77 알고리즘으로 참조화하고, 최종 출력을 허프만 코딩으로 추가 압축한다. 팔레트 이미지나 반복 패턴이 많은 그래픽에서 특히 효율적이다.

웹 성능 최적화와 Core Web Vitals에서 WebP의 역할

Google은 2021년부터 Core Web Vitals(CWV)를 검색 랭킹 신호로 활용하고 있다. CWV의 세 가지 핵심 지표 중 이미지 최적화와 가장 밀접한 관련이 있는 것은 LCP(Largest Contentful Paint)다. LCP는 페이지에서 가장 큰 콘텐츠 요소(주로 히어로 이미지나 배너)가 화면에 렌더링되는 시간을 측정한다.

LCP 개선에서 WebP의 구체적 효과

• 같은 시각적 품질에서 파일 크기가 작아 다운로드 시간 단축
• 모바일 LTE 환경에서 JPG 300KB → WebP 200KB 변환 시 LCP 약 0.3~0.5초 개선 가능
• Google PageSpeed Insights에서 "차세대 형식으로 이미지 제공" 권고사항 해결
• Lighthouse 점수의 이미지 관련 항목 최적화

올바른 HTML 구현: <picture> 태그 폴백

WebP가 지원되지 않는 구형 환경을 위해 <picture> 태그로 폴백을 제공하는 것이 표준 방식이다:

<picture>
  <!-- AVIF 지원 브라우저 우선 -->
  <source srcset="hero.avif" type="image/avif">
  <!-- WebP 지원 브라우저 -->
  <source srcset="hero.webp" type="image/webp">
  <!-- 폴백: 모든 브라우저 -->
  <img src="hero.jpg" alt="히어로 이미지" width="1200" height="600"
       loading="lazy" decoding="async">
</picture>

이미지 CDN과의 연동

대부분의 현대 이미지 CDN은 Accept 헤더를 읽어 브라우저가 WebP를 지원하면 자동으로 WebP를 제공한다. 별도의 HTML 수정 없이 CDN 설정만으로 전체 사이트 이미지를 WebP로 서빙할 수 있다.

WebP 지원 브라우저 현황 (2026 기준)

2026년 기준 글로벌 브라우저 점유율을 기준으로 WebP 지원 브라우저 비율은 97% 이상으로, 사실상 모든 현대 브라우저에서 지원된다고 볼 수 있다. IE11은 이미 2022년 6월 Microsoft가 공식 지원을 종료했으므로, 특별한 요구사항이 없는 한 IE11 지원을 위해 WebP 사용을 포기할 필요가 없다.

WebP를 사용하면 안 되는 경우

WebP가 만능 포맷은 아니다. 다음 상황에서는 WebP 대신 다른 포맷을 선택해야 한다.

• 이메일 첨부 및 뉴스레터 이미지: 대부분의 이메일 클라이언트(Outlook, Apple Mail 일부 버전)는 WebP를 지원하지 않는다. 이메일에 삽입할 이미지는 여전히 JPG 또는 PNG가 안전하다.
• 인쇄·출판 용도: WebP는 CMYK 색공간을 지원하지 않는다. 인쇄물에 사용할 이미지는 TIFF 또는 고해상도 JPG를 사용해야 한다.
• 이미지 편집 소스 파일: Photoshop, Lightroom 등에서의 편집 워크플로에서 WebP는 원본 소스 포맷으로 적합하지 않다. RAW, TIFF, PSD로 원본을 보관하고 배포용으로만 WebP를 사용해야 한다.
• 카카오톡, 라인 등 메신저 공유: 일부 메신저 앱은 WebP 파일을 올바르게 처리하지 못하거나 미리보기가 표시되지 않을 수 있다.
• SNS 업로드: 인스타그램, Twitter(X) 등 일부 SNS 플랫폼은 WebP 업로드를 지원하지 않거나 자동으로 다른 형식으로 변환한다. 업로드 전 JPG로 변환하는 것이 안정적이다.
• 범용 호환성이 최우선인 경우: 다양한 환경에서 열어야 하는 파일(예: 정부 문서, 공식 첨부파일)은 JPG/PNG가 더 적합하다.

CDN·이미지 최적화 서비스와 WebP 자동 변환

주요 이미지 CDN 서비스

Apache/Nginx에서 WebP 자동 서빙 설정

서버에 WebP 버전을 미리 생성해두고, 브라우저 지원 여부에 따라 자동으로 서빙하는 방법이다:

# Nginx 설정 예시
map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

location ~* \.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

WebP에 대한 흔한 오해 5가지

자주 묻는 질문 (FAQ)

관련 이미지 도구