先记住这个答案
要在 AVIF、WebP 和普通格式之间选择，使用 <picture> 的多个 <source type="...">，末尾保留 <img> 作为回退并提供 alt。要在同一格式里按显示宽度或像素密度选文件，用 srcset 的 w 或 x 描述符。srcset 没有 type 描述符；格式与尺寸是两条独立的选择维度，可以在 <source> 上同时使用 type 和 srcset。
<source type>用于格式候选srcset用于尺寸或密度候选<img>提供回退和alt- 按实际图片测试压缩与画质
先选能解码的格式
文章封面有 AVIF、WebP 和 JPEG 三份。浏览器会从上到下考察 <source>，选择支持的源；如果都不合适，就用最后的 <img>。替代文本只需写在实际图片元素上。
<picture>
<!-- 浏览器按顺序选择能解码的格式 -->
<source type="image/avif" srcset="cover.avif">
<source type="image/webp" srcset="cover.webp">
<img src="cover.jpg" alt="山间步道上的行人" width="800" height="450">
</picture>浏览器优先选择能解码的格式，<img> 既是回退，也是承载 alt 的实际图片元素。不要写所谓的 srcset="a.avif type(image/avif)"；那不是合法的 srcset 描述符语法。
不同照片、插画和透明图的压缩表现不同。选择 AVIF 或 WebP 前，比较实际文件体积、画质以及编码成本，不要假设某格式总是最小。
再按显示尺寸选文件
一张图在手机可能只显示 320px 宽，在桌面主栏可能显示 800px。给同一格式提供多个宽度候选时，sizes 告诉浏览器预期的 CSS 显示宽度，它再结合 DPR 选择合适文件。
不要把 HTML 的 width 与 height 属性当成要求浏览器只下载固定尺寸，它们主要提供固有尺寸和布局占位。实际显示宽度还受 CSS 控制。资源选择最终由浏览器完成，网络条件和缓存也可能影响决定。
格式优先级也应由文件实际表现决定，而非把 AVIF 固定排在第一位就结束。对有文字和细线的截图，强压缩可能让字边发糊；透明插画也可能与照片表现不同。准备候选时用同一显示尺寸比较清晰度与字节数，再把确实合适的格式按顺序放进 <picture>。如果只提供一种格式，也不必为了形式套一层 <picture>。
容易答错的地方
- 以为
srcset支持type描述符 srcset候选使用w或x等描述符；MIME 类型应写在<source>的type属性。- 删掉
<img>只留<source> <picture>需要内部的<img>作为实际图片与回退，也承载alt。
面试官还会怎么问？
w 和 x 描述符什么时候用？
显示宽度变化较大时配合 sizes 用 w；显示尺寸固定但需高密度资源时可用 x。
能按窄屏改构图吗？
可以在 <source> 上用 media 指定不同裁切版本，这属于艺术方向选择，而不只是压缩格式变化。
AVIF 一定优于 WebP 吗？
不一定。照片类型、质量设置、解码成本与浏览器支持范围都要看实际素材和目标环境。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。