사용 방법
- WebP 파일을 드롭 영역에 끌어다 놓거나, 클릭해서 선택하거나, 이미지를 붙여넣습니다. PNG와 JPEG 파일도 사용할 수 있습니다.
- 다른 형식으로 WebP를 만들려면 ‘변환 형식’에서 WebP를 선택하고 ‘품질’을 설정합니다.
- 필요하면 ‘최대 너비’를 설정한 뒤 원본 크기와 인코딩 후 크기를 비교합니다.
- 필요한 출력(data URI, 순수 Base64, HTML img 태그, CSS 배경 이미지, Markdown)을 복사하거나 다운로드합니다.
WebP란?
WebP는 Google이 2010년에 발표한 이미지 형식입니다. VP8 비디오 코덱 기반의 손실 압축, 별도의 무손실 모드, 알파 채널, 애니메이션을 모두 한 형식에서 지원합니다. MIME 유형은 image/webp이며, 파일이 RIFF 컨테이너이므로 Base64 출력은 UklGR로 시작합니다. Google에 따르면 무손실 WebP는 PNG보다 약 26% 작고, 손실 WebP는 비슷한 품질의 JPEG보다 25~34% 작습니다.
WebP가 data URI에 잘 맞는 이유
Base64는 어떤 파일이든 똑같이 3분의 1을 늘리므로 원본이 작을수록 문자열이 짧아집니다. 그래서 WebP가 잘 맞습니다. 투명 PNG 아이콘을 WebP로 변환하면 투명도는 유지되면서 대개 크기가 줄고, JPEG 사진은 비슷한 화질에서 더 작아집니다. 다만 품질을 아주 높게 설정하면 최적화된 원본보다 파일이 커질 수 있으므로 복사하기 전에 인코딩 후 크기를 확인하십시오.
애니메이션 WebP 파일은 변환하지 않고 인코딩하면 모든 프레임이 유지됩니다. 변환하거나 크기를 조정하면 프레임 하나만 다시 렌더링됩니다.
브라우저와 클라이언트 지원
현재 주요 브라우저인 Chrome, Edge, Firefox, Opera, Safari 14 이상은 모두 WebP를 표시합니다. Internet Explorer 같은 아주 오래된 브라우저만 지원하지 않습니다. 이메일은 사정이 다릅니다. Windows용 Outlook을 비롯한 여러 데스크톱 메일 클라이언트가 WebP를 렌더링하지 않으므로 이메일 템플릿에는 PNG나 JPEG를 사용하십시오.
JavaScript로 WebP data URI 만들기
// 사용자가 선택한 파일 읽기
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// canvas를 품질 80%의 WebP로 다시 인코딩
const uri = canvas.toDataURL('image/webp', 0.8);브라우저가 WebP를 인코딩할 수 없으면 toDataURL은 아무 경고 없이 PNG로 대체하므로, 결과가 data:image/webp로 시작하는지 확인하십시오.
자주 묻는 질문
여기서 PNG나 JPEG를 WebP Base64로 변환할 수 있습니까?
예. 이미지를 불러와 ‘변환 형식’에서 WebP를 선택하고 ‘품질’을 설정하십시오. 변환에는 브라우저에 내장된 인코더를 사용하며 결과는 data:image/webp로 인코딩됩니다.
Base64로 인코딩해도 WebP 애니메이션이 유지됩니까?
예. 변환을 선택하지 않고 ‘최대 너비’도 설정하지 않았다면 유지됩니다. 이 경우 Base64 문자열에는 모든 프레임이 담긴 원본 파일이 그대로 들어 있습니다.
모든 브라우저가 data:image/webp 이미지를 표시합니까?
현재 버전의 Chrome, Edge, Firefox, Opera, Safari는 모두 WebP data URI를 정상적으로 표시합니다. 이를 표시하지 못하는 것은 IE와 버전 14 이전의 Safari 같은 오래된 브라우저뿐입니다.