如何调试Serve images in next-gen formats？WordPress优化方案

针对你当前遇到的4.95s图片加载耗时、不想依赖插件、不使用WebP格式规避兼容性问题的约束，可以按下面的步骤操作，从根源解决Lighthouse检测出的图片格式类性能问题：

先压缩现有原生格式图片，抹平和next-gen格式的体积差 #

Lighthouse报“Serve images in next-gen formats”的核心判定逻辑，是对比你当前使用的JPEG/PNG图片，和同等视觉质量下next-gen格式的体积差——只要两者体积差小于10%，告警会直接消失，对应耗时也会大幅下降。很多人以为这个指标必须转WebP才算达标，其实是对检测规则的误解。

• 批量处理媒体库内的存量图片：用本地开源的无损/有损压缩工具，将JPEG图片调整到80%-85%的质量档位，剥离EXIF元数据、自动生成的冗余缩略图信息；将透明PNG图片做逐行优化，去掉多余的色板信息，把单张配图的体积控制在对应展示尺寸的100KB以内。绝大多数站点的图片加载慢，都是因为上传了数MB的相机直出原图，这部分冗余清理完，就能砍掉70%以上的单图加载耗时。
• 提前裁剪图片到实际展示尺寸：不要依赖CSS强制缩放图片，比如内容区实际展示宽度是750px，就提前把图片裁剪到对应宽度、72dpi分辨率，不要上传4000px宽度的原图让浏览器自行缩放，这部分客户端渲染的耗时也会被计入该指标的总检测时间。

用AVIF作为替代格式，完全规避WebP的兼容问题 #

AVIF是Lighthouse官方认可的next-gen格式，整体压缩率比WebP高30%左右，目前主流浏览器的覆盖率已经超过95%，剩下的极老版本浏览器可以通过原生的<picture>标签自动回退到原JPEG/PNG文件，完全不需要做WebP相关处理。

• 实现方式不需要插件，直接在主题模板的图片输出位置修改代码结构即可，把原来的单<img>标签替换为带原生回退的标签结构：

<picture>
  <source srcset="同路径/对应图片名.avif" type="image/avif">
  <img src="原图片路径.jpg" alt="图片描述" loading="lazy" width="对应展示宽度" height="对应展示高度">
</picture>

• 对应的AVIF文件不需要插件生成，用本地批量转换工具把原图转成同文件名的AVIF版本，上传到媒体库的同目录下即可，整个流程不需要加载任何第三方PHP插件，也不会影响低版本浏览器的访问体验。

服务端层面的无插件优化，压缩剩余加载耗时 #

• 直接在主机的面板配置、或者Apache/Nginx的站点配置文件中，给图片资源开启brotli/gzip压缩传输，不需要安装缓存类插件，浏览器请求图片时直接传输压缩后的数据流，进一步缩短网络传输时间。
• 给图片资源设置1年有效期的长期缓存头，配置规则为Cache-Control: public, max-age=31536000，回访用户不需要重新加载已访问过的图片，对应指标的检测耗时会进一步降低。

避坑提醒 #

• 不要为了消解检测告警强制使用低兼容性的新格式，只要原格式图片经过充分压缩、和同等质量的next-gen格式体积差足够小，即使完全不转新格式，Lighthouse的该指标耗时也会降到合格线以下。
• 所有输出的<img>标签必须显式标注宽高属性，避免浏览器出现布局偏移，这部分的渲染延迟也会被计入图片加载的总耗时中。

内容的提问来源于stack exchange，提问作者Devi