img srcset 属性详解

srcset 属性让图片能根据设备屏幕自动选择最合适的分辨率版本，提升性能和用户体验。

为什么使用 srcset？

性能优化：小屏设备加载小图，大屏设备加载高清图
节省流量：移动用户不用下载过大的图片
更好体验：更快加载，更清晰显示

基础用法

宽度描述符 (w)

<img src="https://picsum.photos/400/300"
     srcset="https://picsum.photos/320/240 320w,
             https://picsum.photos/640/480 640w,
             https://picsum.photos/1024/768 1024w"
     sizes="(max-width: 640px) 100vw, 50vw"
     alt="响应式图片">

宽度描述符演示

像素密度描述符 (x)

<img src="https://picsum.photos/200/150"
     srcset="https://picsum.photos/200/150 1x,
             https://picsum.photos/400/300 2x,
             https://picsum.photos/600/450 3x"
     width="200" height="150"
     alt="高清图片">

sizes 属性

定义图片在不同视口下的显示尺寸：

<img src="https://picsum.photos/800/600"
     srcset="https://picsum.photos/320/240 320w,
             https://picsum.photos/640/480 640w,
             https://picsum.photos/1024/768 1024w"
     sizes="(max-width: 320px) 280px,
            (max-width: 640px) 600px,
            700px"
     alt="sizes 示例">

实用示例

卡片布局

<img src="https://picsum.photos/300/200"
     srcset="https://picsum.photos/150/100 150w,
             https://picsum.photos/300/200 300w,
             https://picsum.photos/600/400 600w"
     sizes="300px"
     alt="卡片图片">

卡片布局示例

浏览器兼容性

Chrome: 38+ ✅
Firefox: 38+ ✅
Safari: iOS 8+ ✅
IE: 不支持 ❌

对于不支持的浏览器，会自动回退到 src 属性。

最佳实践

始终提供 src 作为回退
合理规划图片尺寸（推荐：320w, 640w, 1024w）
配合图片压缩使用
测试不同设备的加载效果

srcset 是现代响应式开发的重要工具，正确使用能显著提升网站性能和用户体验。 alt="宽度描述符示例">


![宽度描述符演示](https://picsum.photos/700/350?random=3)

### 2. 像素密度描述符 (x)

适用于固定尺寸的图片：

```html
<img src="https://picsum.photos/200/150"
     srcset="https://picsum.photos/200/150 1x,
             https://picsum.photos/400/300 2x,
             https://picsum.photos/600/450 3x"
     width="200" height="150"
     alt="高清图片">

sizes 属性

sizes 属性定义图片在不同视口下的显示尺寸：

<img src="https://picsum.photos/800/600"
     srcset="https://picsum.photos/320/240 320w,
             https://picsum.photos/640/480 640w,
             https://picsum.photos/1024/768 1024w"
     sizes="(max-width: 320px) 280px,
            (max-width: 640px) 600px,
            700px"
     alt="sizes 属性示例">

响应式布局示例

实用示例

卡片布局

<div style="width: 300px; border: 1px solid #ddd; padding: 15px;">
  <img src="https://picsum.photos/300/200"
       srcset="https://picsum.photos/150/100 150w,
               https://picsum.photos/300/200 300w,
               https://picsum.photos/600/400 600w"
       sizes="300px"
       alt="卡片图片"
       style="width: 100%; height: auto;">
  <h3>响应式卡片</h3>
  <p>使用 srcset 优化的图片卡片</p>
</div>

图片画廊

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
  <img src="https://picsum.photos/200/150?random=5"
       srcset="https://picsum.photos/200/150?random=5 200w,
               https://picsum.photos/400/300?random=5 400w"
       sizes="(max-width: 480px) 100vw, 25vw"
       alt="画廊图片1">

  <img src="https://picsum.photos/200/150?random=6"
       srcset="https://picsum.photos/200/150?random=6 200w,
               https://picsum.photos/400/300?random=6 400w"
       sizes="(max-width: 480px) 100vw, 25vw"
       alt="画廊图片2">
</div>

浏览器兼容性

现代浏览器：全面支持 ✅
Chrome: 38+ ✅
Firefox: 38+ ✅
Safari: iOS 8+ ✅
IE: 不支持 ❌（需要 polyfill）

最佳实践

始终提供 src 作为回退
合理规划图片尺寸（常用：320w, 640w, 1024w, 1600w）
配合图片压缩工具使用
结合懒加载提升性能

调试技巧

使用浏览器开发者工具的 Network 面板查看实际加载的图片：

// 检查当前选择的图片源
console.log(document.querySelector('img').currentSrc);

开发者工具调试

总结

srcset 属性是现代响应式开发的重要工具，它能：

🚀 提升页面加载性能
📱 优化移动端体验
🖥️ 保证桌面端显示质量
💾 节省用户流量

掌握 srcset 的正确使用方法，让你的网站在各种设备上都能提供最佳的图片体验！

记住：响应式图片不仅是技术实现，更是对用户体验的关注。正确使用 srcset，让每个用户都能看到最适合他们设备的完美图片！