为什么网站要用 WebP
WebP 是 Google 在 2010 年推出的图片格式,目标就是让网页图片更小。对于照片,同样的视觉质量下 WebP 一般比 JPG 小 25–35%。一个页面上如果有十几张商品图或文章配图,换成 WebP 后总大小能少几百 KB 甚至几 MB,手机上打开明显更快。
页面加载速度也会影响搜索排名:Google 的核心网页指标(Core Web Vitals)里的“最大内容绘制”(LCP)往往就是页面上最大的那张图片,它变小了,这项指标就更容易达标。各类网站测速工具也会提示“采用新一代格式提供图片”,指的就是 WebP 和 AVIF。
适合转成 WebP 的场景
- 独立站和外贸网站。 Shopify、WordPress 等建站系统都支持 WebP,商品图换成 WebP 能明显提升移动端速度。
- 博客和官网。 文章配图、Banner、案例图片都适合。
- 小程序和 H5 页面。 包体和图片流量都更小,但要按上面 FAQ 里提到的方式确认显示支持。
- 前端项目的静态资源。 打包前把 JPG 素材批量转成 WebP。
不适合用 WebP 的场景
- 网上报名、政务办事、招聘网站。 这些系统通常写明只收 JPG、JPEG、PNG,上传 WebP 会被拒绝。
- 发给别人或拿去打印。 部分旧版 Windows 看图软件、旧版 Office 和打印店的电脑可能打不开 WebP。
- 需要反复编辑的原图。 原始照片请保留 JPG 或无损格式,WebP 作为最终发布版本。
质量怎么选
| 用途 | 建议质量 | 说明 |
|---|---|---|
| 首页大图、Banner | 80–85 | 大面积显示,留一些余量 |
| 文章配图、商品图 | 75–85 | 画质和体积最均衡 |
| 缩略图、列表图 | 65–75 | 显示尺寸小,看不出差别 |
转换前最好先把图片缩到网页实际显示的尺寸。一张 4000 像素宽的照片放在 800 像素宽的位置上,再怎么换格式也浪费;先用调整图片尺寸缩小,再转 WebP,效果最好。
转换是怎么做的
JPG 在浏览器的后台线程里解码,按 EXIF 方向转正,然后用 libwebp 编码成 WebP,原照片的 GPS 位置、拍摄设备等信息不会带进新文件。如果想要比 WebP 更小的文件,也可以试试 AVIF;带透明背景的 PNG 素材请用 PNG 转 WebP。