首先聊聊为什么需要响应式图片
在现在这个互联网时代，大家使用的设备那是五花八门，有大屏幕的电脑、各种尺寸的平板，还有手掌大小的手机。不同的设备屏幕尺寸和分辨率都不一样，如果我们在网页上只用一张固定大小的图片，要么在小屏幕上图片显得特别大，加载速度慢，浪费流量；要么在大屏幕上图片又小得可怜，显示效果特别差。所以啊，响应式图片就应运而生啦。它能根据用户设备的不同，自动选择最合适的图片展示，既保证了显示效果，又节省了流量。而 srcset 和 sizes 就是实现响应式图片的两个重要工具。
一、srcset 属性的基本用法
srcset 属性就像是一个图片仓库，它允许我们为图片提供多个不同分辨率或者不同尺寸的图片文件，浏览器会根据设备的情况自动从中选择最合适的图片来显示。听起来有点抽象，我们来看个具体的例子。
技术栈：HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcset示例</title>
</head>
<body>
<!--
srcset 属性中，逗号分隔不同的图片文件，后面跟着图片对应的宽度描述符（w）
这里提供了三张不同宽度的图片，浏览器会根据自身设备情况选择合适的图片加载
-->
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
alt="示例图片">
</body>
</html>
在这个例子里，我们给 img 标签加了 srcset 属性，里面包含了三张不同宽度的图片。320w、640w 和 1280w 分别表示这三张图片的宽度，浏览器会根据设备的视口宽度和像素密度等信息，从这三张图片里选一张最合适的来显示。要是设备视口比较小，就可能选 small.jpg；视口大一些，就可能选 medium.jpg 或者 large.jpg。
二、sizes 属性的基本用法
sizes 属性主要是用来告诉浏览器在不同的视口宽度下，图片应该占据多大的宽度。它和 srcset 配合使用，能更精确地让浏览器选择合适的图片。下面我们来看个示例。
技术栈：HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sizes示例</title>
</head>
<body>
<!--
sizes 属性中，使用媒体查询来定义不同视口宽度下图片的宽度
这里表示当视口宽度大于等于 1200px 时，图片宽度为 50vw（视口宽度的 50%）
当视口宽度大于等于 768px 且小于 1200px 时，图片宽度为 70vw
其他情况图片宽度为 100vw
srcset 属性提供了不同宽度的图片供选择
-->
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
sizes="(min-width: 1200px) 50vw, (min-width: 768px) 70vw, 100vw"
alt="示例图片">
</body>
</html>
在这个例子中，sizes 属性用媒体查询定义了不同视口宽度下图片的宽度。浏览器会先根据 sizes 属性确定图片在当前视口下的宽度，再结合 srcset 属性里的图片信息，选择最合适的图片加载。比如说，当视口宽度大于等于 1200px 时，图片宽度是视口宽度的 50%，浏览器就会根据这个宽度去 srcset 里选合适大小的图片。
三、srcset 和 sizes 属性的配合使用
srcset 和 sizes 就像是一对好搭档，它们配合起来能实现更精准的响应式图片显示。我们再来看一个完整的例子。
技术栈：HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcset和sizes配合使用示例</title>
</head>
<body>
<!--
sizes 属性根据不同视口宽度定义图片宽度
srcset 属性提供多个不同宽度的图片
浏览器会根据两者信息选择最合适的图片加载
-->
<img src="fallback.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w, extra-large.jpg 2560w"
sizes="(min-width: 1800px) 33vw, (min-width: 1200px) 50vw, (min-width: 768px) 70vw, 100vw"
alt="风景图片">
</body>
</html>
在这个例子中，sizes 属性定义了不同视口宽度下图片的宽度，srcset 属性提供了四张不同宽度的图片。浏览器会先根据当前视口宽度，通过 sizes 属性确定图片的目标宽度，然后再从 srcset 里选一张最接近目标宽度的图片来加载。这样就能保证在各种设备上，都能显示出最合适的图片。
四、应用场景
4.1 电商网站
电商网站上有大量的商品图片，不同的设备对图片的要求不一样。在手机上，用户可能更在意图片加载速度，不需要特别大的图片；而在电脑上，用户可能希望看到更清晰的图片细节。使用 srcset 和 sizes 就能根据用户设备，为用户提供合适大小的商品图片，既保证了图片显示效果，又提高了页面加载速度。
4.2 新闻网站
新闻网站通常会有很多配图，不同的新闻页面布局在不同设备上也不一样。比如在大屏幕上，图片可能占页面的比例较小；在小屏幕上，图片可能要占满整个宽度。通过 srcset 和 sizes，就能根据页面布局和设备情况，为图片选择合适的尺寸，让新闻页面在各种设备上都能完美显示。
五、技术优缺点
5.1 优点
- 节省流量：浏览器会根据设备情况选择合适的图片，避免加载过大的图片，从而节省用户的流量。比如在手机上，就只加载小尺寸的图片，不会浪费流量去加载大尺寸图片。
- 提高加载速度：因为加载的是合适大小的图片，所以页面加载速度会变快，用户体验也会更好。就像你下载一个小文件肯定比下载大文件快得多。
- 适配不同设备：能让图片在各种屏幕尺寸和分辨率的设备上都有良好的显示效果，无论是大屏电脑还是小屏手机，图片都能清晰、合适地显示。
5.2 缺点
- 需要准备多个图片文件：为了实现响应式图片，我们得准备不同尺寸和分辨率的图片，这会增加开发和维护的工作量。比如你得把一张图片分别制作成小、中、大等不同尺寸的图片。
- 浏览器兼容性问题：虽然现在大部分主流浏览器都支持 srcset 和 sizes 属性，但还是有一些老旧的浏览器可能不支持，这就需要我们做一些兼容性处理。
六、注意事项
- 图片命名和管理：为了方便开发和维护，图片的命名要有一定的规律，比如按照尺寸大小命名。同时，要合理组织图片文件的存放位置，避免混乱。
- 测试不同设备：在开发完成后，一定要在各种不同的设备上进行测试，确保图片在各种设备上都能正确显示。比如在不同尺寸的手机、平板和电脑上都测试一下。
- 兼容性处理：对于不支持 srcset 和 sizes 属性的浏览器，要提供一个默认的图片，也就是在 img 标签的 src 属性里设置一个图片。这样，即使浏览器不支持新特性，也能正常显示图片。
七、文章总结
srcset 和 sizes 属性是实现 HTML 响应式图片的重要工具，它们能让图片根据用户设备的不同，自动选择最合适的图片显示。通过合理使用 srcset 和 sizes 属性，我们可以节省用户流量，提高页面加载速度，让网页在各种设备上都有良好的显示效果。不过，在使用过程中，我们也需要注意准备多个图片文件、处理浏览器兼容性问题等。只要掌握了这些要点，就能很好地运用这两个属性，为用户带来更好的网页浏览体验。
评论