같은 "WebP 압축"이라도 사람마다 하려는 일이 완전히 다릅니다:
누군가는 한 줌의 JPG, PNG를 WebP로 변환하려 하고, 누군가는 이미 가진 WebP를 더 작게 압축하려 하며, 누군가는 움직이는 WebP를 다뤄야 합니다.
도구에 절대적인 우열은 없고, 맞는 것이 있습니다. 이 글은 시나리오별로 가장 편리한 도구를 소개합니다.
시작하기 전: 2분 안에 WebP 이해하기
WebP에는 실제로 세 가지 형태가 있습니다:
- 손실 WebP: JPEG와 원리가 유사하며 품질 매개변수에 따라 세부 정보를 버립니다. 용량이 작고 사진, 배너에 적합합니다.
- 무손실 WebP: PNG와 원리가 유사하며 픽셀이 완전히 변하지 않습니다. 스크린샷, UI 자재에 적합합니다.
- 애니메이션 WebP: 여러 프레임의 애니메이션이 있으며 손실이나 무손실 모두 가능하며, GIF에서 변환한 이모티콘이나 프레젠테이션 애니메이션에 자주 사용됩니다.
확인이 필요하면 Google의 공식 webpinfo를 사용하세요:
bash
brew install webp
webpinfo image.webp
출력에 VP8이 있으면 손실이고, VP8L이 있으면 무손실입니다. ANIM/ANMF가 있으면 애니메이션입니다.
또 하나 알아두면 좋은 점은 손실 WebP는 더 높은 품질 매개변수로 재인코딩하면 용량이 커지지만 화질이 향상되지 않는다는 것입니다. 잃어버린 세부 정보는 복구할 수 없습니다. 따라서 이미 WebP인 이미지의 경우, 좋은 압축 도구는 "압축할 수 없으면 압축하지 않음"을 판단해야 합니다.
시나리오 1: JPG / PNG를 일괄 변환하여 WebP로 만들기
이것은 대부분의 사람이 WebP를 처음 접할 때 수행하는 작업입니다.
그래픽 인터페이스 선택 XnConvert. 무료, 크로스플랫폼이며 한 번에 여러 이미지를 드래그하여 WebP 품질이나 무손실 모드를 설정하고 크기, 파일 이름도 함께 변경할 수 있습니다. 형식 변환 작업에서 가장 편리합니다.
빌드 프로세스에 넣으려면 cwebp 또는 sharp 선택. 웹사이트 프로젝트에서 수동으로 변환하는 대신 패키징 또는 CDN 업로드 시 자동으로 처리하는 것이 좋습니다:
bash
cwebp: 품질 75, 가장 느리지만 가장 효율적인 인코딩 방식, 색상 프로파일 보존
cwebp -q 75 -m 6 -metadata icc input.jpg -o output.webp
js
// sharp (Node.js)
await sharp('input.jpg').webp({ quality: 75, effort: 6 }).toFile('output.webp')
매개변수가 확신이 서지 않나요? 먼저 Squoosh로 시도하세요. Google의 온라인 도구로 한 번에 한 장씩 처리할 수 있지만, 좌우 슬라이드로 품질을 실시간으로 조절하여 효과를 확인할 수 있습니다. "이런 이미지는 얼마의 품질이 적당한지"를 파악한 후 위의 일괄 변환 도구에 매개변수를 입력하세요.
시나리오 2: 이미 WebP이므로 더 작게 압축
웹사이트는 이미 WebP로 전환되었지만 Lighthouse에서는 "이미지를 더 압축할 수 있음"을 계속 알립니다. 또는 자재 폴더에 많은 WebP가 있어 공간을 차지하고 있습니다. 이때 필요한 것은 형식 변환이 아니라 기존 파일을 원래 위치에서 더 작게 만드는 것입니다.
Mac 사용자: ImgZilla
ImgZilla는 우리가 만든 macOS 이미지 압축 도구로, 이 시나리오에서 가장 강력합니다:
- 원래 위치에서 압축, 경로 유지.
banner.webp를 압축해도banner.webp로 남습니다. 웹페이지, 코드, 문서의 참조를 한 줄도 수정하지 않아도 됩니다. - 전체 폴더를 드래그하여 처리. 하위 폴더를 재귀적으로 스캔하고 숨겨진 파일과
node_modules를 자동으로 건너뜁니다. WebP, JPG, PNG, GIF, AVIF, HEIC, SVG가 섞여 있어도 한 번에 처리할 수 있습니다. - 매개변수를 조절할 필요 없음. Google libwebp 인코딩을 사용하며 품질 75, 인코딩 노력도 4로 Squoosh의 기본값과 일치합니다. 투명 채널은 최고 품질로 보존되며 투명 배경에서 하얀색 가장자리가 생기지 않습니다.
- 압축할 수 없으면 강제하지 않음. 재인코딩 후 용량이 0.4% 이상 감소하지 않으면 "이미 최소"로 표시하고 원본 파일을 유지하며 더 큰 파일을 넘기지 않으며 무료 할당량도 차감하지 않습니다.
- 반복할 수 있음. 원본은 기본적으로 휴지통으로 이동되며, 어떤 이미지가 마음에 들지 않으면 마우스 오른쪽 버튼으로 "원래 위치로 복원"할 수 있습니다.
- 로컬에서만 실행. 자재는 어떤 서버에도 업로드되지 않습니다.
👉 Mac App Store에서 ImgZilla 다운로드
기타 플랫폼: Caesium 또는 TinyPNG
- Caesium Image Compressor: 무료 오픈소스이며 Windows, macOS, Linux에서 사용할 수 있습니다. WebP 일괄 압축을 지원하며 품질과 메타데이터 보존 여부를 설정할 수 있습니다.
- TinyPNG: 웹페이지 도구로 동일하게 WebP를 지원합니다. 드래그하여 처리하면 되지만 무료 버전은 이미지 개수와 크기에 제한이 있으며 이미지를 상대방 서버에 업로드해야 합니다.
시나리오 3: 애니메이션 WebP
애니메이션은 두 가지 요구 사항으로 나뉩니다:
GIF를 애니메이션 WebP로 변환: Google의 공식 gif2webp(cwebp와 동일하게 libwebp 도구 패키지에 있으며 Mac에서는 brew install webp로 설치 가능)를 사용하세요. 동일한 애니메이션은 일반적으로 GIF보다 훨씬 작습니다.
bash
gif2webp -q 75 -m 6 input.gif -o output.webp
기존 애니메이션 WebP를 더 작게 압축: 많은 도구가 애니메이션을 만나면 오류를 보내거나 첫 프레임만 유지합니다. ImgZilla는 애니메이션 WebP의 재압축을 지원합니다. 프레임별로 재인코딩하며 프레임 수, 프레임 지속 시간, 루프 횟수, 캔버스 크기는 모두 그대로 유지합니다. 애니메이션은 원래대로 유지되지만 파일 크기만 줄어듭니다. 정적 이미지와 마찬가지로 압축할 수 없으면 "이미 최소"로 표시하고 원본 파일을 유지합니다.
시나리오 4: 픽셀이 변하면 안 됨
UI 타일링은 디자인 초안과 엄격하게 일치해야 하고, 스크린샷은 픽셀 단위로 비교해야 하며, 자재는 나중에 계속 편집해야 한다면 무손실이 필요합니다.
cwebp 사용:
bash
순수 무손실
cwebp -lossless -z 9 input.png -o output.webp
근사 무손실: 픽셀에는 미세한 변화가 있지만 순수 무손실보다 훨씬 작음. 스크린샷과 UI에 적합
cwebp -near_lossless 60 input.png -o output.webp
참고: ImgZilla는 WebP에 대해 통일적으로 손실 인코딩을 사용합니다. 원래 무손실이었던 WebP도 포함됩니다. 일반적으로 용량은 현저히 줄어들지만 픽셀이 일대일로 동일하지 않게 됩니다. 또한 WebP의 메타데이터(색상 프로파일 포함)를 제거합니다. 일반적인 sRGB 이미지에는 영향이 없으며 Display P3 등 광범위한 색상 범위 프로파일을 가진 이미지는 색상 관리 소프트웨어에서 색상에 약간의 차이가 있을 수 있습니다. 픽셀과 색상에 엄격한 요구 사항이 있는 이미지는 cwebp를 사용하거나 압축 전에 별도로 선별하세요.
한눈에 보는 요약표
| 할 일 | 추천 | 대안 |
|---|---|---|
| JPG / PNG를 일괄 변환하여 WebP로 만들기 | XnConvert | cwebp, sharp (빌드 프로세스) |
| 매개변수 시험, 단일 처리 | Squoosh | — |
| 이미 WebP를 원래 위치에서 더 작게 압축 (Mac) | ImgZilla | Caesium |
| 이미 WebP를 더 작게 압축 (Windows / Linux) | Caesium | TinyPNG |
| GIF를 애니메이션 WebP로 변환 | gif2webp | — |
| 이미 애니메이션 WebP를 더 작게 압축 | ImgZilla | libwebp로 직접 스크립트 작성 |
| 픽셀이 변하면 안 됨 | cwebp -lossless / -near_lossless |
— |
다운로드 링크
| 도구 | 플랫폼 | 가격 | 다운로드 |
|---|---|---|---|
| ImgZilla | macOS 12.3+ | 무료: 하루 10장 | Mac App Store |
| XnConvert | Windows / macOS / Linux | 개인용 무료 | xnview.com |
| Caesium Image Compressor | Windows / macOS / Linux | 무료 오픈소스 | saerasoft.com |
| cwebp / gif2webp / webpinfo | 명령줄 | 무료 오픈소스 | Google 공식 다운로드, Mac: brew install webp |
| sharp | Node.js | 무료 오픈소스 | sharp.pixelplumbing.com, npm install sharp |
| Squoosh | 웹페이지 | 무료 | squoosh.app |
| TinyPNG | 웹페이지 | 무료 한도 있음 | tinypng.com |
마지막으로
WebP 자체는 이미 매우 효율적인 형식입니다. WebP가 CDN이나 빌드 도구로 합리적인 매개변수로 생성된 경우 추가 압축 공간은 크지 않으며 "이미 최소"라고 표시되는 것은 정상입니다. 진짜로 많이 아껴지는 것은 고품질 매개변수로 내보낸 것, PNG에서 무손실로 변환한 것, 또는 GIF에서 변환 후 추가 처리하지 않은 파일들입니다.
먼저 webpinfo로 현재 가진 것이 무엇인지 명확히 한 후 시나리오별로 도구를 선택하는 것이 여러 도구를 오가며 시도하는 것보다 훨씬 시간을 절약합니다.
ImgZilla는 현재 macOS(12.3 이상)만 지원하며 Mac App Store에서 다운로드할 수 있습니다. 무료 버전은 하루 10장을 압축할 수 있으며, 성공적인 압축에만 할당량이 적용됩니다. WebP로 가득 찬 폴더를 드래그하여 얼마나 많이 아낄 수 있는지 확인해 보세요.