响应式图像（Responsive Images）

1. 响应式图像的核心问题是：不同设备和屏幕特性（如分辨率、视口尺寸、网络条件）需要不同版本的图像资源。单一图像文件无法同时满足高分辨率设备的质量需求和低带宽设备的加载效率。

2. 实现响应式图像的技术基础依赖于三个关键HTML特性：

   • srcset 属性：允许指定一组不同尺寸或分辨率的图像文件及其实际宽度（通过w描述符）或像素密度（通过x描述符）
   • sizes 属性：定义图像在不同视口条件下的渲染尺寸（需配合srcset的w描述符使用）
   • <picture> 元素：支持基于媒体查询的艺术指导（art direction）和图像格式切换

3. 像素密度适配方案：

   <img srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
        src="image-1x.jpg" alt="示例">
   

   浏览器根据设备像素比自动选择合适版本，如Retina显示屏会加载2x或3x版本。

4. 视口宽度适配方案：

   <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
        sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
        src="medium.jpg" alt="示例">
   

   浏览器根据sizes定义的视口规则和实际视口宽度，从srcset中选择最接近渲染尺寸的图像文件。

5. 艺术指导与格式切换：

   <picture>
     <source media="(max-width: 799px)" srcset="vertical.jpg">
     <source media="(min-width: 800px)" srcset="horizontal.jpg">
     <source type="image/webp" srcset="image.webp">
     <img src="image.jpg" alt="示例">
   </picture>
   

   支持根据视口尺寸裁剪不同构图（如移动端显示竖版，桌面端显示横版），并优先提供WebP等现代格式。

6. 现代实现最佳实践：

   • 使用CDN动态图像处理服务（如Cloudinary、Imgix）按需生成优化版本
   • 配合懒加载（loading="lazy"）和预加载（rel="preload"）策略
   • 设置width/height属性避免布局偏移（CLS）
   • 对关键图像使用渐进加载或模糊预览技术

7. 性能优化考量：

   • 平衡文件大小与视觉质量的压缩比
   • 下一代格式（AVIF/WebP）与传统格式（JPEG/PNG）的兼容性处理
   • 缓存策略与HTTP/2多路复用的协同优化
   • 使用Image CDN实现自动格式转换和尺寸缩放