libwebp 사용법: cwebp, dwebp, webpinfo로 WebP 다루기

웹사이트의 로딩 속도를 줄이려면 이미지 최적화가 빠질 수 없죠. JPEG이나 PNG 대신 WebP 포맷을 사용하면 동일한 화질에서 파일 크기를 25~35% 정도 줄일 수 있는데요.

WebP는 Google이 2010년에 발표한 이미지 포맷으로, 손실(lossy)과 무손실(lossless) 압축을 모두 지원합니다. 현재 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원하고 있어서 실무에서도 안심하고 사용할 수 있어요.

Google은 WebP 포맷과 함께 libwebp라는 공식 도구 모음도 제공하고 있는데요. 이 패키지에는 인코딩용 cwebp, 디코딩용 dwebp, 파일 정보 확인용 webpinfo 등 WebP를 다루는 커맨드가 모두 들어 있습니다. 이번 글에서는 이 도구들의 사용법을 하나씩 살펴보겠습니다.

설치

libwebp는 Google이 관리하는 WebP 도구 모음 패키지입니다. 설치하면 cwebp, dwebp, webpinfo, gif2webp 등 여러 커맨드가 함께 제공돼요.

macOS에서는 Homebrew로 설치하면 됩니다.

brew install webp

Ubuntu/Debian에서는 apt로 설치합니다.

sudo apt install webp

설치가 완료되면 버전을 확인해볼까요?

cwebp -version

1.3.2

기본 사용법

cwebp의 기본 사용법은 아주 간단합니다. 입력 파일을 지정하고 -o 옵션으로 출력 파일 이름을 넘기면 됩니다.

cwebp photo.png -o photo.webp

Saving file 'photo.webp'
File:      photo.png
Dimension: 1200 x 800
Output:    48312 bytes Y-U-V-All-PSNR 41.32 43.18 44.56   42.08 dB
           (0.40 bpp)
block count:  intra4:        876  (23.36%)
              intra16:       2874  (76.64%)
              skipped:       1532  (40.85%)
bytes used:  header:            249  (0.5%)
             mode-partition:   4908  (10.2%)

JPEG, PNG, TIFF 파일을 입력으로 받을 수 있어요. 아무 옵션 없이 실행하면 기본 품질 75로 손실 압축이 적용됩니다.

품질 조절

이미지를 변환할 때 가장 중요한 건 파일 크기와 화질 사이의 균형을 맞추는 것이겠죠. -q 옵션으로 압축 품질을 0에서 100 사이로 지정할 수 있습니다. 숫자가 높을수록 화질은 좋아지지만 파일 크기도 커집니다.

# 품질 80으로 변환
cwebp -q 80 photo.jpg -o photo.webp

여러 품질 값으로 변환해보면 감을 잡기가 좋습니다.

cwebp -q 60 photo.jpg -o photo-q60.webp
cwebp -q 75 photo.jpg -o photo-q75.webp
cwebp -q 85 photo.jpg -o photo-q85.webp
cwebp -q 95 photo.jpg -o photo-q95.webp

예를 들어 500KB짜리 JPEG 사진을 각 품질로 변환하면 대략 이 정도 크기가 됩니다.

일반적인 웹 사진이라면 75~85 사이가 가장 균형이 좋은 구간입니다. 눈으로 봤을 때 원본과 거의 차이가 느껴지지 않으면서도 파일 크기를 상당히 줄일 수 있거든요. 반면에 95 이상으로 올리면 크기 대비 화질 개선이 미미하므로 비효율적입니다.

무손실 변환

PNG처럼 화질 손실 없이 변환하고 싶다면 -lossless 옵션을 사용합니다. 로고, 아이콘, 스크린샷처럼 선명한 경계가 중요한 이미지에 적합해요.

cwebp -lossless photo.png -o photo.webp

무손실 WebP는 같은 화질의 PNG보다 보통 25~30% 정도 파일 크기가 작습니다. PNG를 대체하는 용도로 쓰기에 딱이죠.

우선 -z 옵션으로 무손실 압축 수준을 0에서 9 사이로 지정할 수 있습니다. 숫자가 높을수록 파일이 더 작아지지만 인코딩 시간이 길어집니다.

# 최대 압축 (느리지만 파일이 가장 작음)
cwebp -lossless -z 9 photo.png -o photo.webp

또한 -q 옵션을 -lossless와 함께 사용하면 압축 속도와 크기의 균형을 조절할 수 있어요. 이때 -q는 화질이 아니라 인코딩 속도를 제어하는 역할을 합니다.

cwebp -lossless -q 90 photo.png -o photo.webp

리사이징

이미지 크기를 줄이면서 동시에 WebP로 변환하고 싶을 때가 있죠. -resize 옵션으로 가로와 세로 크기를 픽셀 단위로 지정할 수 있습니다.

# 가로 800px, 세로 600px로 리사이징
cwebp -resize 800 600 photo.jpg -o photo.webp

가로 세로 비율을 유지하고 싶다면 한쪽을 0으로 지정하면 됩니다. 그러면 나머지 한쪽이 비율에 맞게 자동으로 계산됩니다.

# 가로 800px, 세로는 비율에 맞게 자동 조정
cwebp -resize 800 0 photo.jpg -o photo.webp

# 세로 600px, 가로는 비율에 맞게 자동 조정
cwebp -resize 0 600 photo.jpg -o photo.webp

품질 옵션과 함께 사용하면 리사이징과 압축을 한 번에 처리할 수 있어서 편리합니다.

cwebp -q 80 -resize 1920 0 photo.jpg -o photo.webp

고급 옵션

cwebp는 인코딩을 세밀하게 제어할 수 있는 옵션이 많습니다. 자주 쓰이는 것들을 정리하면 다음과 같습니다.

• -mt — 멀티스레드 인코딩을 활성화합니다. CPU 코어를 활용해서 인코딩 속도가 빨라지므로 대부분의 경우 켜두는 게 좋습니다.
• -af — 자동 필터링을 적용합니다. 인코더가 디블로킹 필터의 강도를 자동으로 최적화해서 화질과 크기의 균형을 맞춰줍니다.
• -m — 압축 방법을 0에서 6 사이로 지정합니다. 0이 가장 빠르지만 파일이 크고, 6이 가장 느리지만 파일이 작습니다. 기본값은 4입니다.
• -metadata — 메타데이터 처리 방식을 지정합니다. none은 모든 메타데이터를 제거하고, all은 모두 보존합니다. exif, icc, xmp 중에서 원하는 것만 골라서 보존할 수도 있습니다.
• -short — 출력 정보를 간략하게 표시합니다. 스크립트에서 사용할 때 유용합니다.
• -print_psnr — 변환 후 PSNR(최대 신호 대 잡음비) 값을 출력합니다. 화질을 수치로 비교하고 싶을 때 쓸 수 있습니다.

여러 옵션을 조합해서 최대한 최적화된 출력을 만들 수 있어요.

cwebp -q 80 -m 6 -mt -af -metadata none photo.jpg -o photo.webp

이 명령어는 품질 80, 최대 압축, 멀티스레드, 자동 필터링을 적용하면서 메타데이터를 제거합니다. 웹용 이미지를 만들 때 권장하는 설정이에요.

dwebp로 디코딩하기

WebP 파일을 다시 PNG나 JPEG으로 변환해야 할 때가 있습니다. 예를 들어 WebP를 지원하지 않는 편집 도구에서 이미지를 열어야 하는 경우가 그렇죠. 이때 dwebp 명령어를 사용합니다.

# WebP를 PNG로 변환
dwebp photo.webp -o photo.png

Decoded photo.webp. Dimensions: 1200 x 800. Format: lossy. Now saving...
Saved file photo.png

JPEG으로 저장하고 싶으면 출력 파일의 확장자만 바꾸면 될 것 같지만, dwebp는 기본적으로 PNG 포맷으로 출력합니다. 그래서 다른 포맷으로 저장하려면 별도 옵션을 사용해야 해요.

# PPM 포맷으로 출력
dwebp photo.webp -ppm -o photo.ppm

# BMP 포맷으로 출력
dwebp photo.webp -bmp -o photo.bmp

# TIFF 포맷으로 출력
dwebp photo.webp -tiff -o photo.tiff

JPEG으로 직접 변환하는 옵션은 없지만, PNG로 변환한 뒤 다른 도구로 JPEG을 만들 수 있습니다.

webpinfo로 파일 정보 확인

WebP 파일의 내부 구조나 메타데이터를 확인하고 싶을 때 webpinfo를 사용합니다.

webpinfo photo.webp

File: photo.webp
RIFF HEADER:
  File size: 48312
  Chunk VP8 at offset     12, length 48276
    Width: 1200
    Height: 800
    Alpha: 0
    Animation: 0
    Format: Lossy

파일이 손실 압축인지 무손실 압축인지, 알파 채널이 있는지, 애니메이션인지 등을 한눈에 파악할 수 있습니다.

요약 정보만 간략하게 보고 싶다면 -summary 옵션을 사용합니다.

webpinfo -summary photo.webp

여러 WebP 파일의 정보를 한꺼번에 확인할 수도 있어요.

webpinfo *.webp

일괄 변환

실무에서는 이미지 한두 개가 아니라 폴더 안의 수십, 수백 개 파일을 한꺼번에 변환해야 하는 경우가 많죠. 쉘 반복문을 활용하면 간단하게 일괄 처리할 수 있습니다.

현재 디렉토리의 모든 JPEG 파일을 WebP로 변환하는 예제부터 살펴봅시다.

for f in *.jpg; do
  cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

PNG 파일까지 함께 처리하고 싶다면 패턴을 추가하면 됩니다.

for f in *.jpg *.png; do
  cwebp -q 80 -mt "$f" -o "${f%.*}.webp"
done

하위 디렉토리까지 포함해서 재귀적으로 변환하려면 find와 함께 쓰면 됩니다.

find . -name "*.jpg" -exec sh -c '
  cwebp -q 80 -mt "$1" -o "${1%.jpg}.webp"
' _ {} \;

변환 전후의 파일 크기를 비교하고 싶다면 이런 스크립트를 활용해볼 수 있어요.

for f in *.jpg; do
  cwebp -q 80 -short "$f" -o "${f%.jpg}.webp"
  orig=$(stat -f%z "$f" 2>/dev/null || stat -c%s "$f")
  webp=$(stat -f%z "${f%.jpg}.webp" 2>/dev/null || stat -c%s "${f%.jpg}.webp")
  ratio=$((webp * 100 / orig))
  echo "$f: ${orig}B → ${webp}B (${ratio}%)"
done

photo1.jpg: 524288B → 186420B (35%)
photo2.jpg: 312400B → 98752B (31%)
photo3.jpg: 1048576B → 345600B (32%)

마치며

libwebp는 Google이 직접 관리하는 WebP 공식 도구 모음인 만큼 가장 안정적이고 세밀한 제어가 가능합니다. 특히 cwebp는 품질 조절, 무손실 변환, 리사이징, 메타데이터 처리 등 WebP 인코딩에 필요한 모든 기능을 갖추고 있어서 웹 이미지 최적화의 기본 도구로 충분하죠.

물론 libvips나 ImageMagick에서도 WebP 변환을 지원합니다. 하지만 WebP 인코딩 옵션을 가장 세밀하게 제어할 수 있는 건 역시 cwebp인데요. 특히 -m, -af, -metadata 같은 옵션은 다른 도구에서는 직접 접근하기 어려운 인코더 수준의 설정이에요.

Node.js 환경에서 프로그래밍 방식으로 WebP 변환이 필요하다면 Sharp도 좋은 선택입니다. 변환한 WebP 이미지를 HTML에서 제대로 활용하려면 <picture> 요소를 활용해서 브라우저별로 최적의 포맷을 제공하는 것도 잊지 마세요.

더 자세한 내용은 libwebp 공식 문서를 참고하시면 좋겠습니다.