이미지를 WebP로 변환하는 방법 (완벽 가이드)

용량 비교

같은 사진을 각 포맷으로 내보낸 대략적인 결과입니다.

방법 1: 브라우저에서 변환

가장 간단합니다. 파일을 끌어다 놓고 WebP를 선택한 뒤 품질 슬라이더를 움직이면서 용량 변화를 실시간으로 봅니다. 서버 업로드가 없는 도구를 쓰면 파일이 기기를 떠나지 않습니다.

한두 장이거나 민감한 이미지라면 이 방법이 가장 빠르고 안전합니다.

방법 2: 명령줄에서 cwebp

cwebp는 Google의 공식 WebP 인코더입니다. 배치 처리에는 이쪽이 압도적으로 빠릅니다.

# 파일 하나 변환
cwebp -q 75 input.jpg -o output.webp

# -q 75      품질 (0~100, 기본값 75)
# -lossless  무손실 압축 (로고와 그래픽용)
# -resize 800 0   가로 800px로 리사이즈 (0은 자동 높이)

# 폴더의 모든 JPG를 한 번에
for f in *.jpg; do
  cwebp -q 75 "$f" -o "${f%.jpg}.webp"
done

# GIF를 애니메이션 WebP로
gif2webp -q 75 animation.gif -o animation.webp

# 결과 확인
webpinfo output.webp

방법 3: CMS 자동 변환

최신 WordPress 플러그인과 대부분의 CMS는 업로드 시점에 WebP를 자동 생성합니다. Next.js의 next/image처럼 프레임워크가 요청에 맞춰 실시간 변환을 해 주는 경우도 있습니다.

이 방식의 장점은 원본을 그대로 두고 배포본만 WebP가 된다는 점입니다. 나중에 포맷을 바꾸고 싶어도 원본이 살아 있습니다.

HTML: picture로 대체 처리하기

WebP 지원율이 97%를 넘어도 나머지를 위해 대체를 두는 편이 안전합니다. AVIF까지 함께 주려면 순서가 중요합니다. 브라우저는 위에서부터 지원하는 첫 번째를 고릅니다.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="설명"
       width="1200" height="800" loading="lazy">
</picture>

<img>는 반드시 마지막에 두고, 여기에 alt, width, height를 답니다. 이 속성들은 <source>가 아니라 <img>에서 읽힙니다.

품질 설정 기준

• 75 — 기본값. 대부분의 사진에서 육안 차이가 없습니다.
• 80~85 — 디테일이 중요한 제품 이미지.
• 65~70 — 배경이나 장식용 사진.
• 60 미만 — 보통 눈에 띕니다. 권하지 않습니다.

흔한 실수

• 편집하려고 WebP를 다시 PNG로 — 손실 변환을 반복할 때마다 품질이 떨어집니다. 원본 PNG나 TIFF를 보관하고 WebP는 최종 배포용으로만 내보내세요.
• width와 height를 빼먹기 — 변환한 이미지에도 크기 속성은 필요합니다. 없으면 레이아웃 이동이 생깁니다.
• 로고와 아이콘을 WebP로 — SVG가 더 낫습니다. 무한히 확대되고 훨씬 작습니다. WebP는 사진과 복잡한 일러스트용입니다.
• 사진에 무손실 WebP — 사진에서는 무손실이 손실보다 오히려 큽니다. 무손실은 평면 색상, 글자, 픽셀 단위 정확도가 필요한 투명 그래픽에만 쓰세요.

자주 묻는 질문

2026년에 WebP와 AVIF 중 무엇을 써야 하나요?

둘 다입니다. AVIF를 먼저 주고 WebP를 대체로 두세요. AVIF가 더 작지만 지원율이 조금 낮고 인코딩이 느립니다. <picture> 하나로 두 이점을 모두 가집니다.

WebP가 검색 순위에 도움이 되나요?

직접적인 순위 요소는 아니지만 LCP를 개선하고, LCP는 Core Web Vitals의 하나입니다. 간접적으로 영향을 줍니다.

기존 이미지를 전부 바꿔야 하나요?

한꺼번에 할 필요는 없습니다. 첫 화면에 나오는 큰 이미지부터 바꾸면 체감 효과가 가장 큽니다. 나머지는 점진적으로 하세요.

WebP도 투명도를 지원하나요?

지원합니다. 알파 채널을 PNG처럼 다루면서 용량은 훨씬 작습니다. 투명 배경 로고를 PNG로 두고 있다면 바꿀 만합니다.