h5响应式图片结合avif需三步：选对格式（avif优先、webp降级、jpg/png兜底）、写对结构（picture+srcset+sizes协同）、压对质量（质量值50–70、禁二次压缩），并配cdn自动转码与合理缓存。
在 H5 中实现响应式图片并结合 AVIF 格式达成极致压缩，核心是三件事：用对格式、传对资源、适配好设备。不是简单把 JPG 换成 AVIF 就完事，而是让浏览器在合适时机加载合适尺寸、合适格式、合适质量的图片。
选对格式组合：AVIF 为主，WebP 为辅，JPG/PNG 牢牢兜底
AVIF 确实能比 JPEG 小 50%–70%，但它的兼容性有边界——Safari 16.4+ 才支持，旧版 iOS 和部分安卓 WebView 仍不认。所以不能只放一个 <source type="image/avif"></source>。
-
顺序必须严格：AVIF 放最前，WebP 次之，无 type 的
<img>最后。浏览器从上往下匹配，遇到第一个它支持的就停，后续全跳过 - WebP 是成熟备选，Chrome/Firefox/Edge/Safari 14+ 全支持，压缩率比 JPEG 高 25%–35%，可作为 AVIF 不可用时的主力降级
- 最终的
<img src="xxx.jpg">必须保留，且路径要真实可访问，它是所有不支持现代格式浏览器的唯一保障
写对响应式结构：srcset + sizes + picture 缺一不可
光有格式不够，还得告诉浏览器“这张图在不同屏幕下该显示多宽、该加载哪张分辨率”。单靠 width 和 height 属性没用，得靠语义化标签协同。
-
<picture></picture>提供格式切换能力，包裹多个<source></source> - 每个
<source></source>配srcset（列出多个分辨率版本，如hero-800.avif 1x, hero-1600.avif 2x）和sizes（如(max-width: 768px) 100vw, 50vw），让浏览器预判渲染宽度再选最匹配的资源 -
<img>标签本身不删，它既是 fallback，也是 layout anchor——浏览器靠它预留空间，避免内容跳动
压对质量参数：不是越高压缩越好，而是“视觉无损”优先
AVIF 的压缩效率高，但默认参数可能画质崩坏。关键在编码器设置：
- 质量值建议设在 50–70 区间：60 是多数场景的甜点，比 JPEG 60 更清晰，体积却更小
- 启用色度子采样
4:2:0（默认开启），兼顾细节与体积；若需 HDR 或专业印刷输出，才考虑4:4:4 - 避免二次压缩：CDN 已支持 AVIF 自动转码时，源站就别再用工具压一遍，否则画质劣化、体积不减反增
配对 CDN 与缓存策略：让压缩结果真正复用起来
本地生成 AVIF 只是第一步，上线后得靠 CDN 把“裁剪+转码+压缩”流水线跑起来：
- 启用 CDN 的 AVIF 自动转码（如腾讯云数据万象、Cloudflare Image Resizing），请求带
Accept: image/avif头，CDN 自动返回对应格式 - Nginx 或 CDN 缓存配置中，对
.avif文件加Vary: Accept，确保 AVIF 和 WebP 请求不互相覆盖缓存 - 设置长缓存：
Cache-Control: public, immutable, max-age=31536000，AVIF 文件一旦生成几乎不变，强缓存一年很安全
