CDN 图片优化实践：WebP/AVIF 与响应式图片

CDN 图片优化实践：WebP/AVIF 与响应式图片全指南

图片通常是网页中最重的资源。对多数内容型网站，图片体积往往占据页面总字节的一半以上，是影响加载速度与 Core Web Vitals 的主要因素。把图片优化放到 CDN 边缘完成，是目前性价比最高的做法之一。

一、为什么要在 CDN 边缘做图片优化

传统做法是设计师手工导出多套图片（不同格式、不同尺寸），再维护复杂的命名与路径规则。而图片 CDN 的理念是"一份原图，按需生成"：你在源站只存一份高质量原图，边缘节点根据请求的 URL 参数，实时完成格式转换、缩放、裁剪与质量调整。

这样做的好处是：

无需重复存储：不必为不同断点、不同浏览器维护多份副本；
按需生成：只有被请求到的变体才生成，节省存储与回源带宽；
自动化：新上传的图片自动获得全套优化能力，无需人工干预。

二、现代图片格式：WebP 与 AVIF

2.1 WebP

WebP 由 Google 开发，支持有损、无损与透明通道。相比同等质量的 JPEG，通常可节省 25%-35% 的体积，且浏览器兼容性极好。

2.2 AVIF

AVIF 基于 AV1 视频编码技术，压缩率通常比 WebP 再高约 20%-30%，是目前压缩效率最高的网络图片格式之一。代价是编码耗 CPU 较高，适合由 CDN 边缘统一处理。

2.3 格式协商

现代浏览器通过 Accept 请求头声明自己支持的图片格式（如 image/avif, image/webp）。图片 CDN 会根据该请求头自动返回最合适的格式，并对不支持新格式的老浏览器回退到 JPEG/PNG。这就是 CDN 边缘做格式转换的巨大价值——源站完全不用关心浏览器差异。

三、响应式图片与尺寸控制

3.1 srcset 与 sizes

在 HTML 中，用 srcset 与 sizes 告诉浏览器不同视口下应该加载哪张图，让手机不加载桌面大图：

<img
  src="https://cdn.example.com/img/hero.jpg?width=1200"
  srcset="
    https://cdn.example.com/img/hero.jpg?width=480 480w,
    https://cdn.example.com/img/hero.jpg?width=800 800w,
    https://cdn.example.com/img/hero.jpg?width=1200 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="文章配图">

3.2 裁剪与焦点

图片 CDN 通常支持 fit、crop 等参数，通过"焦点"（focal point）控制裁剪中心，避免重要内容被裁掉。头像、banner、商品图等场景尤其需要。

3.3 质量与压缩平衡

照片类：质量设为 75-85，视觉几乎无差异但体积大幅下降；
优先使用 CDN 的智能压缩（如 MozJPEG、AVIF 有损模式）；
结合图片懒加载实现，让视口外的图片延迟加载，进一步降低首屏压力。

四、图片 CDN 的落地方式

4.1 托管型图片服务

如 Cloudflare Images，支持直接把原图上传到平台，通过"变体"（Variant）预定义不同尺寸与格式，URL 友好且权限可控。

4.2 接入自有存储

也可以让 CDN 直接处理来自任意源站（包括 S3 兼容的对象存储如 R2）的图片，配合"转换流"（Transformation Flow）为指定路径自动套用规则，无需改动图片 URL。

4.3 自建轻量方案

如果不想用托管服务，可通过CDN 加速配合边缘函数/服务端脚本实现按需裁剪。自建方案对动态参数支持更灵活，但需要自行处理缓存键与格式协商，复杂度明显更高。

4.4 常用参数速查

不同图片 CDN 的 URL 参数大同小异，以 Cloudflare 为例，常用的有：

参数	示例	作用
`width`	`width=800`	指定宽度，等比缩放
`height`	`height=600`	指定高度
`fit`	`fit=cover`	缩放与裁切方式
`quality`	`quality=80`	输出质量
`format`	`format=webp`	指定输出格式
`gravity`	`gravity=auto`	焦点/裁切中心
`onerror`	`onerror=redirect`	原图异常时的回退策略

把这些参数写进 URL，边缘节点按需生成对应变体，源站始终只保留一份原图。团队协作时，最好把常用参数沉淀成站点级规范，避免每个人写出的 URL 风格不一，也方便后续统一调整质量与尺寸。

五、16IDC 观察：图片优化优先级清单

在 16IDC 我们推荐的图片优化落地顺序是：

先格式，后尺寸：优先把图片转成 WebP/AVIF，收益最大且改动最小；
再响应式：用 srcset/sizes 避免移动端加载桌面原图；
然后懒加载：首屏外的图片延迟加载，配合占位避免布局偏移；
最后上图片 CDN：当图片量大、多终端时，用边缘优化替代手工多版本维护。

图片优化与网站性能优化、Core Web Vitals 优化关系密切。把"大图"这个最痛的点在 CDN 边缘解决后，LCP 与整体加载体验往往能获得立竿见影的提升。

六、效果衡量与案例

如何量化图片优化的收益

改版前后各跑一次 Lighthouse，重点看三条：页面总字节、LCP、图片加载耗时。以某博客站为例，原始首屏图片体积约 2.4 MB，转成 WebP 并限制在 800px 宽度后降到约 480 KB，LCP 从 3.1 秒降到 1.6 秒。移动端流量占比高的站点收益通常更明显，因为手机屏宽小，桌面原图几乎全是浪费。

何时该上图片 CDN

三个信号值得考虑：一是图片请求占页面总请求的比例很高；二是同一张图需要面向多种屏幕尺寸；三是内容更新频繁，不想每次人工导出多版本。反过来，如果站点只有几张固定图片、访问量也不大，先用构建工具压缩成 WebP 就够，不必引入图片 CDN。

参考：Cloudflare Images 文档 https://developers.cloudflare.com/images/；MDN img 元素与 srcset https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

原文来源：https://developers.cloudflare.com/images/

CDN 图片优化实践：WebP/AVIF 与响应式图片全指南