响应式图片

响应式图片根据浏览设备的屏幕宽度和像素密度提供适当尺寸的图像。向智能手机发送 4000px 宽的图片会浪费带宽；根据设备条件选择性地提供较小的图片可以显著提升加载速度和用户体验。

• srcset 属性：在 <img> 标签中列出不同尺寸的图片候选，浏览器根据视口宽度和设备像素比自动选择最合适的版本
• sizes 属性：告知浏览器图片在不同断点下的显示宽度，帮助浏览器在布局计算完成前就做出正确选择
• picture 元素：提供更精细的控制，可根据媒体查询条件切换不同的图片源，支持艺术指导（art direction）场景
• 格式协商：通过 <source type="image/avif"> 等方式，为支持新格式的浏览器提供 AVIF 或 WebP，为旧浏览器回退到 JPEG

实现响应式图片需要在构建流程中生成多种尺寸的图片变体。CDN 级别的图片处理服务（如 Cloudinary、imgix）可以按需动态生成所需尺寸，简化开发流程。正确实施响应式图片策略可将移动端页面加载时间缩短 50% 以上。