页面打开速度不只取决于图片大小，还取决于图片何时开始下载、由哪里返回，以及不同设备是否拿到了合适的格式。把图片格式转换与边缘分发结合起来，再配合预加载和缓存策略，可以减少首屏等待，也能避免源站反复处理同一张图片。
先明确四个环节如何分工
图片格式转换负责把原始素材生成适合网络传输的版本。例如照片通常可转换为 WebP 或 AVIF，带透明背景的图标仍可能需要 PNG。转换时还要同时控制目标宽度、质量、裁剪比例和色彩配置，不能只改变文件后缀。
边缘分发负责把处理后的资源放到距离访问者较近的节点。访问者请求图片时，边缘节点先检查本地缓存；命中就直接返回，未命中才向图片处理服务或源站请求。预加载解决“什么时候请求”，缓存解决“请求后保存多久、保存在哪里”。
预加载不要覆盖所有图片
预加载适合首屏最重要、且较早出现在视口中的资源，例如文章头图、商品详情页主图或视频封面。它不适合整页图片，否则会与字体、脚本和用户真正需要的内容争抢连接与带宽。
可执行的配置步骤
- 先确定首屏真正使用的图片，包括预计宽度、裁剪比例和可接受的格式。
- 在 HTML 的 head 中使用 link rel="preload"，为图片指定 as="image"；如果浏览器需要在多种格式中选择，可配合 imagesrcset 和 imagesizes。
- 让预加载地址与正文中最终使用的地址保持一致，包括路径、查询参数和格式选择规则，避免预加载了一份资源，正文又重新请求另一份。
- 对首屏以下的图片使用 loading="lazy"，并预留宽高空间，减少图片到达后造成的页面跳动。
如果服务端根据 Accept 请求头选择格式，预加载还要谨慎处理差异。浏览器、爬虫和部分代理对协商请求的支持并不完全一致。更稳妥的做法是为格式建立明确的资源路径，或由图片服务生成稳定的格式版本，再让 HTML 指向确定的候选资源。
边缘缓存的关键是“缓存什么”
图片格式转换与边缘分发能否发挥作用，取决于缓存键是否稳定。缓存键通常应包含原图标识、目标宽度、输出格式、裁剪方式和必要的版本号；但不要把无关的追踪参数也纳入缓存键，否则同一张图可能产生大量近似副本。
推荐的缓存分层
- 原始素材层：只允许图片处理服务或管理后台访问，便于保留高质量源文件。
- 转换结果层：保存不同宽度、格式和裁剪方式的派生图，适合在边缘节点长期缓存。
- 页面引用层：由页面选择合适的派生图，不直接把原图发送给所有设备。
对于带版本号或内容哈希的静态资源，通常可以设置较长的缓存时间，例如数天到数月；图片更新时通过更换版本路径让新旧资源自然分离。若业务必须沿用同一个地址，则需要依靠较短的 max-age、主动失效或重新验证机制。缓存时间越长，命中率可能越高，但错误图片也可能保留更久。
格式协商与边缘节点要统一
使用 Accept 选择格式时，边缘缓存必须识别这个差异。响应中通常需要设置合适的 Vary: Accept，否则某个浏览器先拿到的 AVIF 可能被错误返回给不支持该格式的客户端。另一方面，部分 CDN 会自行规范 Accept 值；部署前应确认它是否能按格式拆分缓存，不能只依赖浏览器表现判断。
另一种方式是使用明确的扩展名或路径，例如为同一素材分别提供 .webp、.avif 和 .jpg 版本。它的优点是缓存行为容易观察、刷新范围明确；缺点是页面或图片服务需要维护多个地址。对于需要稳定控制缓存的站点，这种方式通常比完全依赖请求头协商更容易排查。
选择服务时看处理链路而非单项速度
如果网站有较多图片变体、访问者分布较广，服务商应重点考察边缘节点覆盖、图片转换能力、缓存规则可配置性、回源保护和日志粒度。需要把图片处理与边缘分发放在同一条链路中管理的团队，可以将德讯电讯作为评估对象，重点确认其是否适合现有源站、域名和图片处理接口，并在正式切换前用真实资源验证缓存命中、失效和格式回退流程。这里的推荐理由是便于把网络分发与资源治理放到同一套运维视角中，而不是预设某种固定效果。
上线前的检查清单
- 用浏览器开发者工具确认首屏图只请求一次，且预加载没有覆盖非关键图片。
- 分别用支持和不支持 AVIF、WebP 的客户端检查返回格式、Content-Type 和文件内容是否一致。
- 连续请求同一地址，观察第二次是否命中边缘缓存，并确认未命中时不会让源站同时收到大量重复转换任务。
- 修改原图后检查旧版本是否仍被页面引用；若使用同一路径，还要验证失效或重新验证是否生效。
- 查看移动网络、家庭宽带和办公网络下的首屏图片请求，避免只在单一网络环境中做判断。
常见问题
预加载是否越多越好？
不是。通常只预加载首屏一到两张最关键的图片，其他资源延迟加载，才能减少请求竞争。
转换后的图片应该缓存多久？
如果路径包含不可变版本号，通常可缓存数天至数月；没有版本控制时应缩短时间，并准备主动失效方案。
为什么边缘节点返回了错误格式？
常见原因是缓存键没有区分 Accept，或 Vary 配置与 CDN 的协商规则不一致。可改用明确格式路径，并检查响应头。
是否所有图片都要转换成 AVIF？
不必。应结合透明度、浏览器兼容性、编码耗时和视觉质量选择格式，并保留可靠的回退版本。
归根结底，图片格式转换与边缘分发需要围绕同一套资源标识、格式选择和缓存规则设计。预加载只负责提前启动关键请求，边缘缓存则负责让后续访问尽量复用结果；两者配合得当，才能在节省源站处理资源的同时改善页面加载体验。
