<picture>-响应式图像

<picture> 元素是 HTML5 引入的响应式图像解决方案，它允许开发者根据不同的设备条件（如屏幕分辨率、视口宽度等）动态加载最合适的图像资源。通过结合 <source> 和 <img> 标签，可以显著提升页面性能和用户体验。

<picture> 的基本结构

<picture> 是一个容器元素，内部包含多个 <source> 和一个 <img> 标签。浏览器会按顺序检查 <source> 的媒体查询或类型条件，选择第一个匹配的资源；如果没有匹配的 <source>，则回退到 <img> 的默认资源。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" alt="示例图像">
</picture>

使用 srcset 和 sizes 属性

srcset 允许指定一组图像资源及其分辨率或宽度描述符，sizes 则定义图像在不同视口下的显示尺寸。浏览器会根据这些信息选择最优图像。

<picture>
  <source 
    srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-800w.jpg" alt="动态分辨率图像">
</picture>

基于设备像素比的适配

通过 srcset 的 x 描述符，可以为高分辨率屏幕（如 Retina 显示屏）提供更高清晰度的图像：

<picture>
  <source srcset="high-res.jpg 2x, ultra-high-res.jpg 3x">
  <img src="standard-res.jpg" alt="高DPI适配示例">
</picture>

艺术方向（Art Direction）控制

针对不同视口调整图像裁剪或构图。例如，在大屏幕上显示宽幅图像，在移动设备上显示裁剪后的中心区域：

<picture>
  <source media="(min-width: 1024px)" srcset="wide-crop.jpg">
  <source media="(min-width: 768px)" srcset="square-crop.jpg">
  <img src="mobile-crop.jpg" alt="艺术方向示例">
</picture>

现代图像格式支持

利用 <picture> 优先加载 WebP 或 AVIF 等现代格式，在不支持的浏览器中回退到 JPEG/PNG：

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="现代格式示例">
</picture>

与 CSS 的协同工作

<picture> 元素本身是替换元素，其尺寸由内部 <img> 决定。可以通过 CSS 实现更复杂的响应式效果：

picture {
  display: block;
  max-width: 100%;
}
picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

实际应用场景示例

电商产品图展示

<picture>
  <!-- 大屏显示完整产品图 -->
  <source media="(min-width: 992px)" srcset="product-full.jpg">
  <!-- 中屏显示简化版 -->
  <source media="(min-width: 576px)" srcset="product-medium.jpg">
  <!-- 移动端显示特写 -->
  <img src="product-closeup.jpg" alt="商品展示">
</picture>

英雄区域背景图优化

<picture class="hero-image">
  <source 
    media="(min-width: 1400px)" 
    srcset="hero-xl.jpg 2400w, hero-lg.jpg 1200w">
  <source 
    media="(min-width: 768px)" 
    srcset="hero-md.jpg 1200w, hero-sm.jpg 600w">
  <img 
    src="hero-fallback.jpg" 
    srcset="hero-mobile.jpg 600w" 
    alt="首页英雄图">
</picture>

浏览器兼容性注意事项

虽然现代浏览器普遍支持 <picture>，但需要注意：

• IE11 及更早版本不支持，需使用 Polyfill（如 picturefill.js）
• 始终包含 <img> 作为后备
• 测试不同网络条件下的加载行为

<!-- 兼容性处理示例 -->
<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="modern.jpg">
  <!--[if IE 9]></video><![endif]-->
  <img src="legacy.jpg" alt="兼容性处理">
</picture>

性能优化实践

1. 预加载关键图像：

<link rel="preload" as="image" href="critical.jpg" imagesrcset="critical-high.jpg 2x">

2. 懒加载非首屏图像：

<picture>
  <source srcset="lazy.webp" type="image/webp">
  <img src="lazy.jpg" loading="lazy" alt="懒加载示例">
</picture>

3. 使用 CDN 和图像处理服务：

<picture>
  <source 
    srcset="
      https://cdn.example.com/image.jpg?width=400&format=webp 400w,
      https://cdn.example.com/image.jpg?width=800&format=webp 800w
    " 
    type="image/webp">
  <img 
    src="https://cdn.example.com/image.jpg?width=800" 
    srcset="
      https://cdn.example.com/image.jpg?width=400 400w,
      https://cdn.example.com/image.jpg?width=800 800w
    " 
    alt="CDN示例">
</picture>

调试技巧

1. 使用 Chrome DevTools 的 Network 面板查看实际加载的图像资源
2. 在 Elements 面板中检查 <source> 元素的匹配状态
3. 通过 document.querySelector('picture').currentSrc 获取当前选择的图像 URL

// 检测当前生效的图像源
const picture = document.querySelector('picture');
console.log('Loaded image:', picture.querySelector('img').currentSrc);