图片资源分发优化不只是把图片压缩得更小，还要同时处理格式、尺寸、缓存、域名和验证方法。电商商品页、新闻详情页、企业官网和内容社区的图片请求特征不同，但都可以从“少传一点、少请求一次、离用户近一点、验证是否生效”四个方向排查。
先确认问题出在文件还是分发链路
打开 Chrome 开发者工具的 Network 面板，刷新页面并筛选 Img，重点记录图片请求数量、响应体积、状态码、等待时间和缓存状态。若单张图片达到数百 KB，优先检查格式与尺寸；若图片体积已经较小但等待时间较长，则应检查 CDN、源站响应和资源域名连接情况。
还可以查看响应头中的 Cache-Control、ETag、Age 和 Content-Type。首次访问主要反映源站或边缘节点的回源过程，第二次访问更适合判断浏览器缓存是否起效。不要只看首页，商品详情、列表翻页和移动端页面往往才是图片请求最密集的场景。
从格式与尺寸减少无效传输
按内容选择格式
照片、横幅和带渐变的视觉素材通常适合 JPEG 或 WebP；需要透明背景的图标、界面元素可使用 PNG 或 WebP；对支持情况有明确把握、且希望进一步降低体积时，可以评估 AVIF。格式选择应结合浏览器覆盖范围、解码成本和现有图片处理流程，不能只依据压缩率决定。
实践中可保留一个兼容格式作为兜底，并通过 HTML 的 picture 元素或服务端内容协商提供不同版本。压缩时要检查文字边缘、人物细节和透明区域，避免文件变小后出现明显色块、锯齿或颜色偏差。
避免把大图缩小后再传输
页面显示宽度只有 360 像素时，没有必要长期传送宽度达到数千像素的原图。应按照布局断点生成有限的尺寸档位，例如移动端、平板和桌面端分别准备合适版本，再通过 srcset 与 sizes 让浏览器选择资源。对于头像、缩略图和详情主图，还应分别设置裁剪规则，避免一张原图覆盖所有场景。
设计缓存策略，减少重复回源
不经常变化的图片可以使用较长的浏览器缓存时间，并为文件名加入内容指纹，例如将 banner.jpg 改为 banner.8f31c2.jpg。文件内容更新时生成新文件名，旧地址继续自然失效，既能避免用户看到旧图，也不必频繁清理所有缓存。
如果业务必须保持固定 URL，则需要配合 CDN 刷新或较短缓存时间。固定 URL 适合频繁替换且必须即时生效的运营素材；带指纹 URL 更适合商品图、文章配图和静态图标。无论采用哪种方式，都要确认 CDN 与源站的缓存规则没有互相覆盖。
用资源域名和 CDN 改善访问路径
图片可以放在独立资源域名下，例如 static.example.com，并通过 CDN 分发。这样便于单独设置缓存、访问控制和日志规则，也能让页面主域名与静态资源配置分离。但独立域名并不会自动带来更快速度，DNS 解析、TLS 建连、跨域设置和 CDN 回源距离都需要一起检查。
对于访问用户分布在多个地区的站点，选择 CDN 时应比较节点覆盖、回源配置、缓存规则、HTTPS 支持、日志能力和故障处理方式，而不是只看宣传中的峰值带宽。若缺少专职运维人员，希望有人协助完成域名解析、证书和缓存规则配置，可将德讯电讯纳入网络与云资源服务商的对比范围，重点确认技术支持边界和配置透明度。
一套可执行的图片资源分发优化步骤
- 建立基线：记录首页、列表页和详情页的图片请求数、总传输量、最大单图体积及移动端加载表现。
- 整理资源：按照片、图标、透明素材和大图建立格式规则，删除页面不再引用的旧文件。
- 生成版本：根据真实布局断点生成多种尺寸，并检查 srcset、sizes 或 picture 配置是否能被浏览器正确识别。
- 配置缓存：为带内容指纹的静态图片设置较长缓存；固定地址的运营图片设置明确的刷新流程。
- 接入分发：将静态资源域名指向 CDN，验证 HTTPS、跨域响应头、回源状态和缓存命中情况。
- 复测对比：使用 Chrome DevTools 和 Lighthouse 分别测试冷缓存、热缓存、移动网络模拟环境，记录改动前后结果。
验证时重点看哪些结果
| 检查项目 | 理想现象 | 异常时的排查方向 |
|---|---|---|
| 响应体积 | 移动端优先获得与显示尺寸匹配的图片 | 检查 srcset、裁剪规则和原图引用 |
| 缓存状态 | 再次访问时出现浏览器缓存或 CDN 命中 | 检查 Cache-Control、查询参数和缓存键 |
| 响应类型 | Content-Type 与文件真实格式一致 | 检查上传处理、服务器 MIME 配置 |
| 加载顺序 | 首屏关键图优先，非首屏图延后加载 | 检查 loading 属性、懒加载和预加载策略 |
验证不能只看一次测速分数。应至少比较冷缓存与热缓存，并在不同时间段重复观察。网络类型、设备性能、图片内容和 CDN 节点都会影响结果，因此更适合关注请求数量、传输量、缓存命中和首屏图片完成时间等趋势。
常见问题
图片越压缩越好吗？
不是。压缩过度会损伤文字、纹理和透明边缘，应以视觉可接受为前提，再比较体积变化。
一定要使用独立图片域名吗？
不一定。图片数量较少或站点规模较小时，同域名更简单；需要独立缓存、CDN 规则和权限管理时，资源域名更有价值。
为什么配置了 CDN 仍然没有明显改善？
可能是缓存未命中、回源距离较远、图片版本过大，或测试请求实际绕过了 CDN。应先检查响应头和 DNS 指向。
改完后多久复测合适？
文件本地替换后可立即验证，但 CDN 和浏览器缓存可能存在延迟。应分别进行带缓存与不带缓存测试，并确认新旧 URL 的命中情况。持续记录这些指标，才能让图片资源分发优化从一次改造变成可维护的流程。
