响应式图像：优化不同设备的图片展示

什么是响应式图像？

响应式图像是指能够根据设备特性（屏幕尺寸、分辨率、网络条件等）自动选择最合适的图片版本。

为什么需要响应式图像？

性能优化：小屏幕加载小图片
带宽节省：移动设备加载更小的图片
视觉质量：高分辨率屏幕显示高清图片

img 标签的响应式

srcset 属性

html 复制代码

<img 
  src="image-400.jpg"
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Responsive image"
>

sizes 属性详解

html 复制代码

<img
  src="image.jpg"
  srcset="small.jpg 320w,
          medium.jpg 640w,
          large.jpg 1280w"
  sizes="(max-width: 400px) 300px,
         (max-width: 800px) 600px,
         1200px"
>

picture 元素

html 复制代码

<picture>
  <source 
    media="(max-width: 600px)" 
    srcset="mobile-image.jpg"
  >
  <source 
    media="(max-width: 1000px)" 
    srcset="tablet-image.jpg"
  >
  <img 
    src="desktop-image.jpg" 
    alt="Fallback image"
  >
</picture>

不同格式支持

html 复制代码

<picture>
  <source type="image/webp" srcset="image.webp">
  <source type="image/avif" srcset="image.avif">
  <img src="image.jpg" alt="Image">
</picture>

艺术指导

html 复制代码

<picture>
  <source 
    media="(max-width: 600px)" 
    srcset="mobile-cropped.jpg"
  >
  <img 
    src="desktop-full.jpg" 
    alt="Different crop for mobile"
  >
</picture>

分辨率切换

html 复制代码

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

最佳实践

1. 使用合适的格式

html 复制代码

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Optimized image">
</picture>

2. 指定宽度描述符

html 复制代码

<img
  src="small.jpg"
  srcset="small.jpg 400w,
          medium.jpg 800w,
          large.jpg 1200w"
  sizes="100vw"
  alt="Responsive"
>

3. 设置正确的 aspect ratio

html 复制代码

<div style="aspect-ratio: 16/9;">
  <img 
    src="image.jpg" 
    alt="Image"
    style="width: 100%; height: auto;"
  >
</div>

4. 使用懒加载

html 复制代码

<img 
  src="image.jpg" 
  alt="Lazy loaded"
  loading="lazy"
>

工具推荐

图像优化工具

Squoosh：在线图像压缩
Sharp：Node.js 图像处理
ImageOptim：Mac 图像压缩工具

CDN 服务

Cloudinary：图像 CDN
Imgix：实时图像处理
Fastly：边缘计算 CDN

性能测试

javascript 复制代码

// 使用 Lighthouse 测试
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function run() {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const results = await lighthouse('https://example.com', {
    port: chrome.port
  });
  console.log(results.lhr.categories.performance.score);
  await chrome.kill();
}

总结

响应式图像是现代 Web 开发的重要组成部分：

用户体验：根据设备特性优化图片
性能优化：减少不必要的带宽消耗
兼容性：支持各种设备和格式
艺术指导：为不同场景提供最佳展示