网站图片优化经常被简化成一句话：“全部转成 WebP 或 AVIF。”实际操作后却可能出现文字截图发糊、透明背景异常、旧浏览器空白，甚至生成的新文件比原图更大。格式只是工具，正确方法是按图片内容、质量目标和访问环境做选择。
JPEG、PNG、WebP和AVIF分别适合什么
- JPEG：照片兼容性好，原图质量适中时仍然实用，但不支持透明。
- PNG：适合界面截图、线条和透明图，复杂照片通常体积较大。
- WebP：兼顾有损、无损和透明，浏览器兼容范围广，适合作为大多数网站的通用现代格式。
- AVIF：照片类素材往往能获得更小体积，但编码更耗资源，某些细节、透明和工具链需要额外测试。
SVG 适合可控来源的图标和矢量图，但上传 SVG 涉及脚本安全，不能与普通位图一概处理。
不要只比较文件大小
同一张图应在相同展示尺寸下比较。至少观察主体边缘、渐变、文字、肤色和透明区域，再记录文件体积与编码耗时。AVIF 省下更多字节，如果服务器生成缩略图时 CPU 长时间满载，整体体验未必更好。
照片可以从中等质量开始测试；带小字的教程截图宜优先保证可读性；Logo 和界面元素要检查透明边缘。不要把一个质量参数套用到所有图片。
WordPress实施有三条路线
上传时自动生成
图片优化插件在上传时生成 WebP 或 AVIF，并按浏览器能力输出。优点是后续省心，缺点是会增加上传时间、磁盘文件数量和插件依赖。启用前要确认服务器的图像处理库支持目标格式。
CDN按需转换
部分图片 CDN 可以根据请求自动调整尺寸和格式，源站保留原图。它适合多终端和多尺寸场景，但要关注转换费用、缓存键以及更换服务后的回退方案。
离线批量处理
先在本地或任务服务器转换，再上传成品，质量最容易控制。缺点是编辑流程更复杂，需要明确文件命名、原图归档和缩略图规则。
兼容与回退怎么做
现代浏览器对 WebP 支持已经较普遍，AVIF 也越来越常见，但网站不能只看一台电脑。可使用 picture 元素提供 AVIF、WebP 和 JPEG/PNG 的顺序回退，或让服务器/CDN根据 Accept 请求头协商格式。
如果按请求头返回不同格式，缓存必须区分相应变体，否则支持 AVIF 的浏览器可能拿到旧格式，不支持的客户端也可能拿到无法显示的文件。上线后应分别用桌面、安卓、iOS、内置浏览器和社交分享抓取做抽查。
批量转换前先做四件事
- 完整备份原图和上传目录。
- 选照片、截图、透明图、动图各一组样本。
- 在测试站验证特色图、缩略图、懒加载、灯箱与社交分享。
- 记录原图到新图的映射，确认停用插件或CDN后如何回退。
不要转换完就立刻删除旧文件。搜索引擎缓存、邮件、RSS 和历史页面可能还在引用原地址，回退期应覆盖真实访问周期。
如何判断优化真正有效
随机抽取几类页面，比较优化前后的总图片字节、最大内容绘制时间、布局偏移和错误率。首页得分上升并不代表文章页、分类页和移动端都正常。还要看源站磁盘是否增加、CDN转换费用是否可控，以及图片质量是否满足内容需求。
大多数 WordPress 网站可以先采用 WebP 作为稳妥基础，再为照片量大的页面小范围测试 AVIF。需要查找图片服务、CDN 或建站工具时，可参考极跃圈资源导航，优惠和推广入口以本站当前信息为准。
