사용 방법
- Base64 문자열이나 data:image/webp;base64 URI를 붙여넣습니다. 다른 이미지 형식도 사용할 수 있습니다.
- 미리 보기, 감지된 형식, 디코딩 후 크기를 확인합니다.
- 변환하려면 ‘다운로드 형식’을 WebP로 두고, 디코딩된 바이트를 그대로 저장하려면 ‘원본’을 선택합니다.
- .webp 파일을 다운로드하고 원본과 크기를 비교합니다.
WebP 데이터 알아보기
WebP는 WAV 오디오와 같은 래퍼인 RIFF 컨테이너에 저장됩니다. 파일이 ASCII 텍스트 RIFF로 시작하므로 Base64는 UklGR로 시작하며, 몇 바이트 뒤에 오는 WEBP 표식이 컨테이너에 소리가 아닌 이미지가 들어 있음을 알려 줍니다. 내부 이미지는 손실(VP8), 무손실(VP8L), 또는 투명도·애니메이션·메타데이터를 추가하는 확장 형식(VP8X) 중 하나입니다. MIME 유형은 image/webp입니다.
WebP로 변환하는 이유
Google의 측정에 따르면 손실 WebP 파일은 비슷한 화질의 JPEG보다 약 25~34% 작고, 무손실 WebP는 PNG보다 약 26% 작습니다. JPEG와 달리 WebP는 알파 채널을 유지하므로 투명한 로고와 스티커도 깔끔하게 변환됩니다. 현재 모든 주요 브라우저가 WebP를 표시합니다.
이미지를 인라인으로 넣을 때는 파일 크기가 두 배로 중요합니다. 이미지가 가벼워지면 HTML, CSS, JSON에 들어가는 Base64 문자열도 짧아지기 때문입니다. 변환한 뒤에는 WebP Base64 변환 도구로 새 파일을 다시 인코딩할 수 있습니다.
결과가 항상 더 작지는 않습니다. 아주 작은 아이콘, 이미 잘 압축된 사진, 색상이 적은 단순한 그래픽은 오히려 커지기도 하며, 이럴 때는 PNG나 JPG가 더 나은 선택입니다. 빌드 파이프라인을 바꾸기 전에 특정 이미지가 얼마나 줄어드는지 빠르게 시험해 보는 용도로도 쓸 수 있습니다. Base64 PNG나 JPEG를 붙여넣고 WebP를 다운로드한 뒤 두 크기를 비교해 보십시오.
Pillow로 변환하기
서버에서 일괄 작업을 할 때는 Python의 Pillow 라이브러리로 몇 줄이면 같은 변환을 할 수 있습니다.
import base64, io
from PIL import Image
img = Image.open(io.BytesIO(base64.b64decode(b64_string)))
img.save('output.webp', 'WEBP', quality=80)
자주 묻는 질문
WebP는 투명도를 유지합니까?
예. WebP는 손실 모드와 무손실 모드 모두에서 완전한 알파 채널을 지원하므로 변환 후에도 투명한 영역이 투명하게 유지됩니다.
애니메이션 WebP를 유지할 수 있습니까?
모든 프레임을 유지하려면 ‘원본’으로 다운로드하십시오. 변환은 캔버스를 거치므로 정지된 프레임 하나만 담깁니다.
WebP 출력이 항상 입력보다 작습니까?
아니요. 큰 사진과 스크린샷은 대개 작아지지만, 작거나 이미 많이 최적화된 이미지는 커질 수 있습니다. 도구에 표시되는 디코딩 후 크기와 다운로드한 파일의 크기를 비교해 보십시오.
일부 소프트웨어에서 WebP 파일이 열리지 않습니다. 어떻게 해야 합니까?
오래된 이미지 뷰어나 오피스 프로그램은 WebP를 지원하지 않을 수 있습니다. 같은 Base64를 붙여넣고 PNG나 JPG로 다운로드하십시오.