使用方法
- 将 WebP 文件拖到上传区域，点击选择文件，或粘贴图片，PNG 和 JPEG 文件同样可以。
- 如需从其他格式生成 WebP，把目标格式设为 WebP 并调整质量。
- 可选择设置最大宽度，然后对比原始大小和编码后大小。
- 复制或下载 Data URI、纯 Base64、HTML img 标签、CSS background-image 或 Markdown。
什么是 WebP？
WebP 是 Google 于 2010 年推出的图片格式，集成了基于 VP8 视频编码的有损压缩、独立的无损模式、Alpha 透明通道和动画。它的 MIME 类型是 image/webp，由于文件采用 RIFF 容器，Base64 输出总以 UklGR 开头。据 Google 公布的数据，无损 WebP 比 PNG 小约 26%，有损 WebP 在相近画质下比 JPEG 小 25% 到 34%。
为什么 WebP 适合做 Data URI
Base64 会让每个文件都多出三分之一，所以源文件越小，字符串越短。这正是 WebP 的优势：带透明背景的 PNG 图标转换为 WebP 后仍保留透明度，体积通常更小；JPEG 照片在相近画质下也会变小。质量设得过高时，结果可能比优化过的原图还大，复制前请先确认编码后大小。
动态 WebP 在保持原格式编码时会保留全部帧；转换格式或缩放尺寸则只会重新渲染其中一帧。
浏览器和邮件客户端支持
所有主流浏览器的当前版本都能显示 WebP，包括 Chrome、Edge、Firefox、Opera 以及 Safari 14 及以上版本，只有 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);
// 以 80% 质量把 canvas 重新编码为 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 的当前版本都可以。Internet Explorer 和 14 以前的 Safari 不支持。