如何让图片、音频和视频兼顾性能、语义与可访问性？

核心结论

媒体元素的设计应同时考虑内容目的、候选资源选择、布局稳定性、加载优先级、替代内容和用户控制。图片使用 img、picture、srcset 与 sizes 解决不同分辨率或不同构图需求；音视频使用 audio、video、source 与 track 提供格式候选、字幕和其他文本轨道。不能把“成功显示或播放”当作完成，因为网络失败、格式不支持、视觉障碍、听觉障碍和节流环境都必须有可用退路。

底层机制与决策依据

响应式图片包含两个不同问题：分辨率切换是在相同构图中选择合适清晰度，通常使用带宽度描述符的 srcset 配合 sizes；艺术指导是在不同视口下改变裁切