🖼️ WebP 图像
Google 开发的格式,压缩率优于 PNG 与 JPEG,当前浏览器全面支持
✅ 永久免费
🚫 无需注册
⚡ 即刻下载
100 KB
WEBP
102,400 bytes
image/webp
100 MB
WEBP
104,857,600 bytes
image/webp
10 KB
WEBP
10,240 bytes
image/webp
10 MB
WEBP
10,485,760 bytes
image/webp
1 MB
WEBP
1,048,576 bytes
image/webp
25 MB
WEBP
26,214,400 bytes
image/webp
500 KB
WEBP
512,000 bytes
image/webp
50 MB
WEBP
52,428,800 bytes
image/webp
5 MB
WEBP
5,242,880 bytes
image/webp
关于WebP 图像
WebP 是 Google 开发的图像格式,同时支持无损与有损压缩。在同等画质下比 PNG 小约 26%,比 JPEG 小约 25〜34%。MIME 类型为 image/webp,当前主流浏览器均已支持。
提供从 10 KB 到 100 MB 的各种大小,可用于确认浏览器支持、测试 WebP 转换流程以及验证图像优化组件。
WebP 的特点
- 同时支持无损与有损模式,可按用途选择
- 同时支持透明与动画(可兼顾 PNG 与 GIF 各自的用途)
- 采用 RIFF 容器格式,若仅凭前 4 个字节判断,会与其他 RIFF 系格式混淆
- 较旧的服务端 GD / ImageMagick 构建可能不支持
PNG、WebP 与 AVIF 的详细比较请参见 PNG vs WebP vs AVIF 深度比较。
相关参考与文章
📖 常见的坑
提供 1 KB 到 100 MB 各种大小的 PNG / JPEG / GIF / WebP,可用于确认上传上限、缩略图生成与验证图像库。各格式的差异见上文说明,而实现中真正踩到的多是与格式无关的共通陷阱。
| 情形 | 会发生什么 | 怎么处理 |
|---|---|---|
| 图片很小却把内存耗尽 | 所需内存取决于解码后的像素数而非文件大小。20 KB 的 PNG 若为 10,000 × 10,000 像素,按 RGBA 计约需 400 MB。 | 除大小上限外还要设置尺寸上限。解码前可仅读头部获取宽 × 高(PHP 用 getimagesize(),Python 的 Pillow 在 Image.open() 之后、load() 之前)。 |
| 竖拍的照片显示成横躺 | 相机不会旋转像素,只在 EXIF 的 Orientation 标签里记录朝向。不读该标签的处理程序就会按传感器方向显示。 | 生成缩略图前先读取 Orientation,真正旋转像素并清除该标签。只旋转却保留标签,支持该标签的浏览器会再转一次。可用 EXIF 查看器确认内容。 |
| 转换后动画和透明都没了 | 经过浏览器 Canvas 的转换一次只能容纳一帧,动图 GIF 会变成第一帧的静态图。转成 JPEG 时透明会被填成白色或黑色。 | 要保留动画,需要能处理多帧的工具,如 ImageMagick 或 libvips,而不是 Canvas。要保留透明,输出请选 PNG 或 WebP。 |
| 看着像图片的文件其实不是 | 扩展名与 Content-Type 都是发送方的声明。在末尾拼接了其他数据的图片,在查看器里照样能正常打开。 |
先用起始字节判断,再重新编码后保存。解码后重新写出会丢弃附加数据与嵌入的元数据。字节序列见魔术字节表。 |
若直接分发用户上传的图片,唯有 SVG 需要区别对待。SVG 不是图片,而是可执行脚本的文档,从同源分发就会成为跨站脚本的通道。请从独立域名分发,或用 Content-Security-Policy 与 Content-Disposition: attachment 加以限制。