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

Google PageSpeed Insights를 돌렸을 때 "차세대 형식을 사용해 이미지 제공"이라는 항목을 본 적이 있다면, 구글이 요구하는 것이 바로 이것입니다. JPG와 PNG 이미지를 WebP로 바꾸라는 뜻이죠. 사이트 성능에 가장 큰 영향을 주면서도 적용하기 가장 쉬운 조치 중 하나입니다.

WebP로 바꿔야 하는 이유

WebP는 구글이 개발해 2010년에 공개한, 웹을 위해 설계된 형식입니다. JPG나 PNG보다 최신 압축 알고리즘을 쓰며, 같은 화질에서 다음과 같은 이점을 줍니다.

• 손실 압축 모드에서 JPG보다 25~35% 가벼움
• 무손실 압축 모드에서 PNG보다 20~30% 가벼움
• 투명도(알파 채널) 지원 — JPG에는 없는 기능입니다
• 애니메이션 지원 — PNG는 기본적으로 지원하지 않습니다

체감 효과도 분명합니다. 장당 300KB짜리 JPG 사진 20장으로 이뤄진 쇼핑몰 상품 갤러리(총 6MB)는 같은 화질의 WebP로 바꾸면 4MB까지 줄어듭니다. 페이지 무게가 33% 가벼워지는 셈입니다. 구글 입장에서는 LCP가 빨라지고 PageSpeed 점수가 오르며, 순위에도 도움이 될 수 있습니다.

WebP를 쓰지 말아야 할 때

요즘 웹에는 가장 좋은 형식이지만, WebP가 정답이 아닌 경우도 있습니다.

• 이메일 마케팅: 아웃룩이나 애플 메일 같은 메일 프로그램은 WebP 지원이 들쭉날쭉합니다. HTML 메일에는 여전히 JPG와 PNG가 안전합니다.
• 인쇄물 제작: 인쇄소와 전통적인 인쇄용 소프트웨어는 WebP를 다루지 못합니다. 인쇄용 파일에는 고품질 JPG나 PNG를 쓰세요.
• 형식에 제한이 있는 플랫폼: 유튜브는 썸네일 업로드에 WebP를 받지 않습니다(JPG와 PNG만 가능). 오래된 시스템의 일부 양식은 JPG를 요구합니다. 변환하기 전에 허용 형식을 확인하세요.
• 아무 컴퓨터에서나 열려야 하는 파일: 내려받기 링크를 눌러 윈도우 기본 뷰어로 파일을 열려는 사용자는, 오래된 버전에서 WebP가 열리지 않는 문제를 겪을 수 있습니다.

방법 1 — 온라인 변환(가장 빠르고 설치 불필요)

이미지 몇 장만 바꾸거나 아무 설정 없이 빠른 결과가 필요할 때는 온라인 변환기가 가장 빠릅니다. ImageTools의 이미지 변환 도구는 JPG, PNG를 비롯한 여러 형식을 브라우저 안에서 바로 WebP로 바꿔 주며, 파일을 외부 서버로 보내지 않습니다.

1. 이미지 변환 도구에 접속합니다.
2. 업로드 영역에 이미지를 선택하거나 끌어다 놓습니다.
3. 저장 형식으로 WebP를 고릅니다.
4. 변환된 이미지를 한 장씩, 또는 여러 장이면 ZIP으로 내려받습니다.

방법 2 — 워드프레스(사이트 전체 자동 적용)

워드프레스 사이트라면 WebP 변환과 제공을 자동으로 해 주는 플러그인을 쓰는 것이 가장 효율적입니다. 이미지를 하나씩 다시 처리할 필요가 없습니다.

워드프레스 6.1 이상(기본 변환 기능)

6.1 버전부터 워드프레스는 업로드할 때 이미지를 자동으로 WebP로 변환합니다. 서버에 libwebp 라이브러리가 있어야 하는데, PHP 8 이상을 쓰는 요즘 서버는 대부분 갖추고 있습니다. 따로 할 일은 없습니다. 워드프레스가 WebP 버전을 만들고 브라우저마다 알맞은 형식을 알아서 내보냅니다.

켜져 있는지 확인하려면 설정 → 미디어로 들어가 WebP 변환 항목을 찾아보세요. 보이지 않는다면 서버가 지원하지 않는 것이니 플러그인을 쓰는 편이 좋습니다.

플러그인 사용(이전 버전이거나 더 세밀한 제어가 필요할 때)

워드프레스에서 WebP 변환에 가장 많이 쓰이는 플러그인은 다음과 같습니다.

• ShortPixel Image Optimizer — 업로드하는 새 이미지를 변환하고, 기존 라이브러리 전체를 다시 처리하는 기능도 있습니다. 월 100장까지 무료입니다.
• Imagify — 화면이 단순하고 자동 변환과 일괄 최적화를 지원합니다. 무료 요금제가 있습니다.
• WebP Express — WebP에 특화된 플러그인으로, 변환과 서버 설정까지 알아서 처리합니다.

방법 3 — cwebp 명령줄(개발자용)

구글은 WebP 공식 인코더인 cwebp를 무료로 배포합니다. 터미널에서 변환할 때 쓰는 도구로, 서버나 빌드 파이프라인에서 많은 이미지를 한꺼번에 변환할 때 가장 빠릅니다.

설치

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — 실행 파일 내려받기: https://developers.google.com/speed/webp/download

기본 변환

# JPG 파일 하나를 품질 80으로 WebP 변환
cwebp -q 80 photo.jpg -o photo.webp

# PNG를 무손실 WebP로 변환
cwebp -lossless logo.png -o logo.webp

# 폴더 안의 모든 JPG 변환 (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

-q 옵션이 품질(0~100)을 조절합니다. 웹용이라면 75에서 85 사이가 화질과 용량의 균형이 가장 좋습니다. 로고나 글자가 있는 화면 캡처처럼 무손실 압축이 필요한 이미지에는 -lossless를 쓰세요.

방법 4 — sharp를 쓰는 Node.js(빌드 파이프라인용)

Next.js, Gatsby, Nuxt처럼 Node.js를 쓰는 프로젝트나 자동화된 빌드 환경이라면, 파이프라인에서 WebP로 변환할 때 sharp 라이브러리가 가장 효율적입니다.

// npm install sharp

const sharp = require('sharp');

// JPG를 품질 80으로 WebP 변환
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// PNG를 무손실 WebP로 변환
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// 폴더 안의 모든 파일 변환
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp는 네이티브 라이브러리인 libvips를 사용해서 순수 자바스크립트 방식보다 훨씬 빠릅니다. 정적 사이트를 빌드하면서 WebP 버전을 만들어 내기에 알맞습니다.

구형 브라우저용 대체 이미지와 함께 WebP 적용하기

2026년 기준 WebP 호환성은 97%가 넘지만, 대체 이미지가 필요한 상황이 아직 남아 있습니다. IE11을 쓰는 사내 시스템, 아주 오래된 기기, 또는 그저 호환성을 최대로 보장하고 싶을 때가 그렇습니다.

정석은 HTML의 <picture> 태그입니다. 대체 이미지 소스를 우선순위대로 지정할 수 있습니다.

<!-- 브라우저가 WebP를 지원하면 WebP를, 아니면 JPG를 사용 -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="사진 설명" width="800" height="600">
</picture>

<!-- 레티나 화면을 위한 여러 크기 제공 -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="사진 설명"
    width="800" height="600" loading="lazy">
</picture>

브라우저는 선언된 순서대로 소스를 확인합니다. WebP를 지원하면 type="image/webp"가 붙은 <source>를 쓰고, 지원하지 않으면 <img>의 JPG로 내려옵니다. 마지막의 <img> 태그는 반드시 있어야 합니다. alt과 크기, 기본 동작을 정의하는 것이 이 태그이기 때문입니다.

서버에서 WebP를 자동으로 내보내도록 설정하기(아파치)

<picture> 대신 서버에서 브라우저의 WebP 지원 여부를 감지해 알맞은 버전을 자동으로 내보내는 방법도 있습니다. 아파치라면 .htaccess에 다음을 추가하세요.

<IfModule mod_rewrite.c>
  RewriteEngine On

  # .webp 파일이 있고 브라우저가 받아들이면 그것을 제공
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

이렇게 설정해 두면 원본과 같은 폴더에 .webp 파일만 나란히 두면 됩니다. 아파치가 Accept 헤더로 브라우저의 WebP 지원 여부를 확인하고, HTML은 전혀 손대지 않은 채 알맞은 버전을 내보냅니다.

PageSpeed로 결과 확인하기

WebP를 적용한 뒤에는 사이트 주소로 Google PageSpeed Insights(pagespeed.web.dev)를 돌려 보세요. "차세대 형식을 사용해 이미지 제공" 항목이 사라지거나 눈에 띄게 줄어들어야 합니다. 개선 기회 항목에서는 아직 변환하지 않은 이미지마다 절약 가능한 용량을 확인할 수 있습니다.

다른 확인 방법도 있습니다. 크롬 개발자 도구(F12)를 열고 Network 탭에서 "Img"로 걸러 낸 뒤, 불러온 이미지의 "Type" 열을 보세요. webp라고 나오면 변환이 제대로 적용된 것입니다.

변환할 때 품질은 얼마로 할까?

WebP의 품질 값은 JPG와 같은 원리로 작동합니다. 값이 높을수록 디테일이 살아나지만 파일이 커집니다. 다만 같은 화질을 내는 데 WebP는 보통 JPG보다 10~15포인트 낮은 품질 값을 씁니다.

자주 묻는 질문