网站图片用WebP还是AVIF？CDN加速6个做法

先说结论：现阶段优先 WebP，AVIF 作为渐进增强

企业官网通常优先用 WebP 格式，AVIF 用 <picture> 标签做渐进增强，浏览器不支持时自动回退。 AVIF 在同等画质下体积通常比 WebP 再小 20% 到 30%，但编码耗时更长，老旧设备解码也偏慢，具体兼容性以 MDN 与 Can I use 的最新数据为准。

为什么图片格式会影响 SEO

页面加载速度是百度与 Google 都公开提过的体验因素之一。 百度搜索资源平台在《百度搜索引擎优化指南》中明确提到页面速度影响用户体验，具体算法权重以官方最新公告为准。图片一般占企业官网首屏体积的 60% 以上，压缩图片是提速时投入产出较高的动作。

6 个图片与 CDN 加速做法

1. 统一转 WebP：常用工具是 cwebp、sharp、Squoosh，批量转换通常一条命令完成。
2. 多格式回退：用 <picture> 做 AVIF → WebP → JPEG 三级，浏览器挑能解码的那个。
3. 响应式尺寸：同一张图输出 480、768、1200 三档，按屏幕宽度加载。
4. 懒加载：首屏外的图片加 loading="lazy"，首屏图不要懒加载。
5. 缓存规则：图片一般缓存 30 天，改图后加版本号或主动刷新缓存。
6. 传输压缩：开启 HTTP/2 与 Brotli 或 gzip，文本资源收益明显。

CDN 怎么选与怎么配

国内站点选 CDN 要看备案与节点覆盖，通常建议选支持 HTTPS 自定义证书的厂商。 配置要点：

• 源站与回源 Host 要填对，否则容易回源失败。
• 图片等静态资源用独立域名（如 cdn.域名），减少 Cookie 传输。
• 缓存规则按目录分：图片目录缓存 30 天，HTML 页面一般设 1 小时或不缓存。

怎么验证有没有生效

用 Chrome 开发者工具的 Network 面板看三个字段：请求类型、传输体积、响应头 content-type。 一般转 WebP 生效时，content-type 会显示 image/webp，同一张图的传输体积通常能降到原 JPEG 的一半左右。也可以用 PageSpeed Insights 检测，评分规则以 Google 官方最新文档为准。

常见误区

把原图直接缩小显示，并不等于压缩。 显示尺寸小了但文件体积没变，加载照样慢。正确做法是先按实际显示尺寸导出，再压格式。另外，中小企业官网常见的首页 Banner 图，一般控制在 200KB 以内比较合适；动图能用视频替代就替代。

提示：改完图片格式后，记得同步更新 sitemap 中的图片地址，并在百度搜索资源平台提交一次更新，具体入口以平台最新公告为准。

玉晗网络（安徽安庆）提供网站建设、微信小程序开发、SEO 优化、GEO 优化与服务器运维托管服务。如果您的官网首屏图片较多、打开偏慢，可以先把 Banner 与产品图批量转成 WebP，这一步的改动量通常不大。