如何修复 PageSpeed Insights 的“改进图片传送”提示

1. 01用 PageSpeed Insights 或 Lighthouse 打开有问题的页面。选择要改进的手机或桌面报告，展开“改进图片传送”，记下图片 URL 和建议。
2. 02在页面找到这张图。用浏览器开发者工具比较下载图片与显示尺寸，同时考虑屏幕像素密度。检查浏览器选中的源文件，而不只是媒体库里的原图。
3. 03如果实际传送的像素过多，先修正响应式尺寸或主题设置。尺寸合适时，再比较压缩效果或平台支持的其他格式。
4. 04用图片编辑器准备所需尺寸的副本，再用Bitinz 图片压缩工具处理合适的文件。替换前检查文字、边缘、透明度和渐变。
5. 05发布替换图片或模板修改。确认页面请求的是新图而不是旧缓存，再以相同设备设置重新生成报告。

Chrome 根据图片下载大小和该格式的高效字节与像素比例估算节省量。预计可节省不足 4 KiB 的图片不会被标记。这是报告阈值，不是图片体积上限建议。

Lighthouse 13 用这项洞察替代了旧版图片审计；Lighthouse 12 已将洞察设为默认报告视图。格式不合适、尺寸过大和动画过重需要不同处理。完整发布流程可参考网站图片怎么压缩。

• WordPress: 检查区块或主题选中的图片尺寸，以及实际的 srcset 和 sizes 标记。WordPress 会生成响应式候选，但自定义模板或不准确的布局描述仍可能传送不合适的尺寸。只修改原图，可能仍在使用已有衍生副本。
• Shopify: 商店图片已由 Shopify 的 CDN 优化，包括格式选择。Shopify 表示上传前无需手动压缩。看到提示时，应检查主题请求的宽度和响应式标记，不要反复降低源图画质。主题开发者可检查 image_url 和 image_tag。
• Next.js: 使用 Image 组件的响应式设置，让 sizes 符合实际布局，尤其是使用 fill 时。值不合适，窄图也可能被当作视口全宽，导致下载更大候选。只改画质解决不了布局不匹配。

保留可编辑原图。独立提供的图片，应比较准备后文件的实际体积与观感；JPG、PNG 和 WebP 对比可帮助选择。Bitinz 不调整尺寸，WebP 转换也可能让文件变大，请保留真正适合页面的版本。

经常发布图片时，可用开发者 API处理合适文件，需要账户并使用月度额度。API 不会修复主题标记或响应式布局；接入自动流程后，仍需核对实际发布页。

• 被标记的 URL 与修改的图片及版本一致。
• 手机与较宽屏幕上的浏览器都能选中合适的源图。
• 压缩保留了重要细节、透明度和平滑渐变。
• 主要可见图片没有因不合适的延迟加载设置而推迟显示。
• 新报告使用相同设备设置，也检查了页面实际观感与加载。