网页图片怎么换成 WebP？提速、兼容与回退全攻略

WebP 为什么适合网页：体积优势

WebP 是谷歌推出的图片格式，同时支持有损、无损、透明和动图，相当于 JPG、PNG 和 GIF 的结合体。同样画质下，WebP 文件比 JPG 小 25% 到 35%，比 PNG 小更多，图片多的页面换成 WebP 后加载速度提升非常明显。

页面加载速度直接影响用户体验和搜索排名，谷歌明确把速度作为排名因素之一。图片是网页体积的大头，把图片换成 WebP 是性价比最高的提速手段，比改代码和换服务器都划算。

兼容性：老浏览器怎么办

主流浏览器都支持 WebP：Chrome、Edge、Firefox、Safari 新版本全都支持，覆盖了绝大多数用户。只有很老的浏览器版本打不开 WebP，但这些用户的占比已经非常低了。

稳妥的做法是加上回退方案：网页代码里同时提供 WebP 和 JPG 两个版本，浏览器支持 WebP 就加载 WebP，不支持就自动加载 JPG。HTML 的 picture 标签就是干这个的，写一次就能全站通用。

转换方法：单张转与批量转

图片少的时候用在线工具最方便，上传 JPG 或 PNG，选 WebP 格式，下载即可；也可以用谷歌的 Squoosh 工具，在线调画质、看压缩效果，所见即所得。

图片多的时候用批量软件：XnConvert、IrfanView 都支持批量转 WebP，一次处理整个文件夹；也可以用命令行工具 cwebp 写脚本批量处理，适合技术人员。转换时把画质设到 85% 左右，文件小了三成，画质几乎没有损失。

CDN 自动转换：最省事的方案

图片量大的网站没必要手动一张张转，用 CDN 的图片优化功能最省事：上传 JPG 原图，CDN 会根据访问者的浏览器自动返回 WebP 或 JPG 版本，全程不用人工干预。

Cloudflare、Cloudinary 等服务都提供图片自动优化，开启后自动压缩、自动转格式、自动按设备尺寸裁剪。成本不高，效果立竿见，是中小网站最推荐的方案。

上线检查：别让图片裂了

图片换成 WebP 上线前，先在不同浏览器里打开页面检查一遍，确认图片都正常显示、没有裂图；再用测速工具对比一下换前换后的加载时间，确认真的变快了。

保留一份 JPG 原图备份，万一 WebP 出问题随时可以切回去。拿不准目标格式的兼容范围时，先用 image-converter 查一下 WebP 和 AVIF 各自的支持情况，再决定网站图片用什么格式最合适。

常见问题

所有浏览器都支持 WebP 吗？

能，主流浏览器都支持 WebP，只有很老的浏览器版本打不开。网站上线时加上 JPG 回退方案，老浏览器会自动加载 JPG 版本，用户完全感觉不到区别。

网站图片有必要换成 WebP 吗？

需要，WebP 的压缩效率比 JPG 高，同样画质下文件小 25% 到 35%，页面加载更快。图片多的网站换成 WebP 后，首屏加载时间能明显缩短，手机用户感受最明显。

图片转 WebP 需要什么工具？

可以用在线工具单张转，也可以用 Squoosh、XnConvert 等免费软件批量转；图片多的网站可以用 CDN 自动转换，上传 JPG 后自动生成 WebP 版本，省去手动转换的麻烦。

JPG 转 WebP 会损失画质吗？

会，但幅度很小，WebP 的有损压缩在画质 85% 以上时肉眼基本看不出来。建议转换时把画质设到 85% 左右，文件小了三成，画质几乎没有损失，性价比最高。

检查我的材料

→ 使用图片格式转换。按需要继续使用下面的相关工具。

• 图片压缩

官方来源与适用范围

本文为中文整理的生活指南，数字为估算或区间，具体以官方最新公布为准。

• MDN·图片格式指南
• Can I use·WebP 支持情况
• 维基百科·WebP