avif图片在html中必须用包裹并按支持度降序排列，type="image/avif"是关键标识，srcset需配合sizes才能精准适配；直接不兼容旧浏览器且无法回退。
AVIF图片在HTML中怎么写srcset才生效
AVIF本身不改变HTML语法，但浏览器对AVIF的支持依赖于<picture></picture>显式声明格式优先级。直接用<img src="xxx.avif">在旧浏览器会直接失败（显示破损图标），且无法触发自适应逻辑。
必须用<picture></picture>包裹，并按“从左到右、从新到旧”顺序提供源，浏览器才会跳过不支持的格式继续尝试下一个：
<picture><source type="image/avif" srcset="photo.avif 1x, photo@2x.avif 2x" media="(min-width: 768px)"><source type="image/webp" srcset="photo.webp 1x, photo@2x.webp 2x"> @@##@@ </source></source></picture>
-
type="image/avif"是关键标识，缺了浏览器不会识别该<source></source>为AVIF -
srcset里用逗号分隔多倍图，1x/2x比写320w更稳妥——部分安卓WebView对w单位解析异常 -
media属性可选，但建议限制高分辨率AVIF只在大屏加载，避免小屏设备因解码压力卡顿
为什么Chrome显示AVIF但Safari不加载
Safari从iOS 16.4/macOS 13.3才开始支持AVIF，且默认禁用解码硬件加速；而Chrome（v85+）和Firefox（v93+）支持更早也更稳定。现象是：<source type="image/avif"></source>被忽略，直接回落到<img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x" alt="描述">的src。
解决办法不是加polyfill（AVIF无法JS解码），而是确保回退链完整：
- 不要省略
<source type="image/webp"></source>——WebP兼容性远好于AVIF，且压缩率接近 -
<img>的src必须存在，它是所有浏览器的最终兜底，不能只靠srcset - 检查服务器是否正确返回
Content-Type: image/avif，Nginx需添加types { image/avif avif; }，否则Chrome也会拒绝加载
srcset + sizes组合怎么写才真适配
仅靠srcset只能告诉浏览器“有哪些图”，sizes才是告诉它“在不同视口下这张图占多宽”，两者配合才能让浏览器选对尺寸。常见错误是把sizes写成固定值，比如sizes="100vw"，导致移动端仍加载桌面尺寸AVIF。
典型响应式写法：
<picture><source type="image/avif" srcset="photo-320.avif 320w,
photo-768.avif 768w,
photo-1200.avif 1200w" sizes="(max-width: 480px) 100vw,
(max-width: 900px) 50vw,
33vw">
@@##@@
</source></picture>
-
sizes中的每个条件对应一个视口断点，值表示该条件下图片渲染宽度占视口宽度的百分比 -
srcset里的w单位必须与sizes结果匹配——例如50vw在375px屏上≈187px，浏览器就会选最接近的320w而非768w - AVIF文件名建议带尺寸后缀（如
photo-768.avif），避免缓存混淆
构建时怎么批量生成AVIF并保证质量一致
手动生成AVIF容易参数失控：libavif默认用--cq-level 32（越小越清晰），但不同工具默认值不同，导致同一张图在不同来源AVIF间质量跳跃。
推荐用sharp（Node.js）统一处理，它底层调libvips，速度快且可控：
const sharp = require('sharp');
sharp('input.jpg')
.avif({ cq: 40, effort: 4 }) // cq 40≈JPEG 80%质量，effort 4平衡速度与压缩率
.toFile('output.avif');
-
cq（Constant Quality）比quality更可靠，范围1–63，数值越大文件越小，40~50是视觉无损临界点 -
effort影响编码耗时，1最快但压缩差，8最慢但最小，4是实用平衡点 - 务必关闭
lossless——AVIF无损模式文件体积常超JPEG，失去替代意义
真正麻烦的是CDN缓存策略：AVIF资源需独立缓存键（比如User-Agent包含avif才返回AVIF），否则Chrome用户可能拿到Safari用户的JPEG缓存。这点容易被忽略，但直接影响首屏性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
