4.4 响应式图片（picture与srcset）

为什么需要响应式图片？

想象你在手机上打开一个网页，结果加载了一张巨大的电脑尺寸图片——既浪费流量，加载又慢！这就是响应式图片要解决的问题。它能根据用户的设备智能选择最合适的图片版本，就像给不同体型的客人准备不同尺码的衣服。

基础解决方案：srcset属性

<img src="默认图.jpg" 
     srcset="小图.jpg 480w,
             中图.jpg 800w,
             大图.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="响应式图片示例">

关键点解析：

• srcset：提供多个图片选项（图片路径+宽度描述）
• sizes：告诉浏览器在不同屏幕宽度下需要多大尺寸的图片
• 浏览器会自动选择最匹配的图片

使用场景：同一图片的不同尺寸版本

高级解决方案：picture元素

<picture>
    <!-- 竖屏手机用竖构图 -->
    <source media="(orientation: portrait)" 
            srcset="竖图.jpg">
    <!-- 小屏幕设备用裁剪版 -->
    <source media="(max-width: 600px)" 
            srcset="https://www.viuoo.com/uploads/allimg/250422/1-250422110H30-L.png">
    <!-- 支持WebP格式的浏览器用更小的文件 -->
    <source type="image/webp" 
            srcset="高清图.webp">
    <!-- 默认回退方案 -->
    <img src="https://www.viuoo.com/uploads/allimg/250422/1-250422110H30-L.png" alt="智能适配的图片">
</picture>

适用情况：

• 不同屏幕方向需要完全不同的图片构图
• 不同设备需要不同裁剪比例的图片
• 想使用现代图片格式（如WebP）同时兼容老浏览器

像素密度适配技巧

针对高清屏幕（如Retina显示屏）：

<img src="普通图.jpg"
     srcset="高清图.jpg 2x"
     alt="高清屏优化图片">

这个方案会根据设备像素比自动选择1x或2x版本，就像给普通电视和4K电视准备不同清晰度的片源。

实际开发中的建议

1. 图片命名规范：例如：banner-800w.jpg、product-2x.webp方便团队协作和维护
2. 性能优化：html复制下载运行<img src="占位图.jpg" srcset="实际图.jpg" loading="lazy" decoding="async" alt="延迟加载的图片">loading="lazy"：图片进入视口再加载decoding="async"：不阻塞页面渲染
3. 兼容性处理：始终保留<img>作为picture的最后子元素为不支持srcset的浏览器提供默认src

工具推荐

1. 自动生成响应式图片：Sharp（Node.js库）ImageMagick（命令行工具）
2. 在线转换工具：Squoosh（谷歌开发的在线图片优化）Cloudinary（自动化图片处理服务）

测试你的实现

使用Chrome开发者工具：

1. 打开Device Toolbar（Ctrl+Shift+M）
2. 切换不同设备尺寸
3. 观察Network面板加载的图片文件

响应式图片技术就像给网站配了一个智能图片管家，它总能根据每位访客的情况提供最合适的图片服务。掌握这个技能，你的网页将在各种设备上都展现出最佳效果。