"响应式图片选择：picture/srcset/sizes 与 AVIF/WebP 回退"

概述`<picture>` 提供按格式与媒体条件选择源，`img[srcset/sizes]` 按 DPR 与布局选择合适尺寸。结合现代格式（AVIF/WebP）与 MIME 声明提升性能与画质。示例<picture> <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w" sizes="(max-width: 800px) 100vw, 1200px"> <source type="image/webp" srcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w" sizes="(max-width: 800px) 100vw, 1200px"> <img src="/img/hero-1200.jpg" width="1200" height="800" alt="首图"> </picture> 工程建议正确的尺寸占位与 `width/height` 防止 CLS；在首屏图搭配 `fetchpriority="high"`。服务端：提供多尺寸变体与正确 `Content-Type`；CDN 动态裁剪与缓存。验证：使用 DevTools 与网络面板检查所选变体与解码成本；记录弱网体验。参考与验证MDN `<picture>`/`srcset`/`sizes` 文档：https://developer.mozilla.org/docs/Web/HTML/Element/pictureweb.dev 响应式图片指南：https://web.dev/articles/responsive-imagesAVIF 与 WebP 说明（MDN）：https://developer.mozilla.org/docs/Web/Media/Formats/Image_types