WebP转Base64 - 免费、即时、浏览器内完成

WebP 本身就是那个小个子。一个在 PNG 下 40 KB 的文件，转成 WebP 常常只有 15 KB 左右，这意味着 Base64 增加的那 33% 在绝对值上比任何其他格式都更轻微。这让 WebP 成为格外适合内联的候选——但有一个与体积无关的隐患。

如何将 WebP 转换为 Base64

1. 1 把 .webp 文件拖到上传区域。
2. 2 编码后的各种形式会立刻出现，并附上转换前后的体积。
3. 3 复制合适的那种形式：data URI、原始字符串，或 CSS 规则。

内联会拿掉你的回退方案

提供 WebP 的常规做法是使用 picture 元素：先给 WebP，再给 JPG 或 PNG，让每个浏览器各取所能。data URI 做不到这一点——它是带有单一媒体类型的单个字符串，无法解码 WebP 的浏览器就只会什么都不显示。如今支持面已经很广，所以在开放网络上这很少咬人——但在邮件客户端、老旧的嵌入式浏览器，以及用老引擎渲染 HTML 的桌面应用里，它确实会咬。

什么场合适合

凡是你能掌控运行环境、并确知 WebP 可以解码的地方：内部仪表盘、管理后台、浏览器扩展、Electron 应用、面向纯现代受众的设计系统。在这些场合，你同时拿到了 WebP 的压缩和零额外请求，这大概就是内联能达到的最佳状态。而在面向公众的营销页面上，哪怕百分之几的访客也仍然重要，那就优先使用 picture 元素和普通文件。

更大的损失仍然是缓存

正因为 WebP 文件小，人们才容易忍不住内联很多张。第二项代价恰恰在这里叠加：每一张内联图片都住在样式表里，所以只要改动一行 CSS，它们就会同时全部失效，访客要重新下载整套。内联十张小图，很容易比十个可缓存的文件更糟。把数量压低，确保每一张都真的极小，其余的仍旧留作普通文件，让浏览器能缓存并跨页面复用。