面试题：srcset、sizes、<picture> 解决什么问题？

高 DPI 与多分辨率

srcset 提供多候选 URL（带 w 描述符或 x 密度），浏览器按视口宽度、DPI、网络等选择合适资源。

sizes

告诉浏览器图片在布局中的显示宽度（媒体条件 + 宽度），配合 w 描述符才能正确选图；不写则浏览器可能按默认假设选错。

<picture>

• 艺术方向：不同断点用不同裁切图（source + media）。
• 格式协商：type="image/avif" 等渐进增强，不支持则回退 img。

性能要点

• 懒加载：loading="lazy"（注意首屏 LCP 图勿懒加载）。
• 明确宽高或 aspect-ratio，减少 CLS（累积布局偏移）。