什么是响应式图像
如今，图像已成为网页设计中必不可少的元素之一。
绝大多数的网站都会使用图像。
然而你是否知道，尽管你的网站布局可以适应设备尺寸，但显示的图像却不是自适应的？
无论使用何种设备（移动设备、平板或台式机），默认下载的都是相同的图像。
例如，如果图像大小为 2 MB，那么无论在何种设备上，下载的都是 2 MB 的图像数据。
开发者可以编写代码，在移动设备上显示该图像的一部分，但是仍然需要下载整个 2 MB 图像数据。
这是不合时宜的。
如果要为同一个网页下载多个图像，应该如何实现？
手机和平板上的图像本来应该是较小尺寸的，如果下载了大量较大尺寸的图像，肯定会影响性能。
我们需要为不同尺寸的设备提供不同尺寸的图像，移动设备显示小尺寸图像，平板显示中等尺寸的图像，台式机显示大尺寸的图像，该如何实现？
通过使用响应式图像，我们可以避免在较小的设备上下载不必要的图像数据，并提高网站在这些设备上的性能。
让我们看看如何实现这一目标。
HTML 中的响应式图像
以上面的图像为例。
这幅图像是为桌面应用设计的，在小屏幕设备上就需要对图像大小进行压缩，我们可以对这幅图像进行裁剪，而非下载完整的图像。
我们可以在 HTML 中编写以下内容，以便在不同的尺寸屏幕中下载不同的图像。
<img src="racoon.jpg" alt="Cute racoon" srcset="small-racoon.jpg 500w, medium-racoon.jpg 1000w, large-racoon.jpg 1500w" sizes="60vw"/>
让我们看下这段代码的作用。
<img> 标签负责在 HTML 中渲染图像，而 src 属性告诉浏览器默认显示哪个图像。在这种情况下，如果浏览器不支持 srcset 属性，则默认为 src 属性。
在这段代码中 srcset 属性是最重要的属性之一。
srcset 属性通知浏览器图像的合适宽度，浏览器不需要下载所有图像。通过 srcset 属性，浏览器决定下载哪个图像并且适应该视口宽度。
你可能还注意到 srcset 中每个图像大小的 w 描述符。
srcset="small-racoon.jpg 500w,
medium-racoon.jpg 1000w,
large-racoon.jsp 1500w"
上面代码片段中的 w 指定了 srcset 中图像的宽度（以像素为单位）。
还有一个 sizes 属性,它通知浏览器具有 srcset 属性的 <img> 元素的大小。
sizes="60vw"
在这里，sizes 属性的值为 60 vw，它告诉浏览器图像的宽度为视口的 60%。size 属性帮助浏览器从 srcset 中为该视口宽度选择最佳图像。
例如，如果浏览器视口宽度为 992 px，那么
992 px 的 60%
= 592 px
根据上面的计算，浏览器将选择宽度为 500 w 或 500 px，最接近 592 px 的图像显示在屏幕上。
最终由浏览器决定选择哪个图像。
注意，为不同视口宽度选择图像的决策逻辑可能因浏览器而异，你可能会看到不同的结果。
为较小的设备下载较少的图像数据，可以让浏览器快速显示这些图像，从而提高网站的性能。
本文总结
网站加载缓慢的最主要原因是下载了 MB 级数据的图像 。使用响应式图像可以避免下载不必要的图像数据，从而减少网站的加载时间并提供更好的用户体验。
唯一的缺点是我们放弃了对浏览器的完全控制，让浏览器选择要在特定视口宽度下显示的图像。
每个浏览器都有不同的策略来选择适当的响应式图像。这就是为什么你可能会在不同的浏览器中，看到以相同分辨率加载的不同图像。
放弃对浏览器的控制，根据视口宽度显示图像以获得性能优势，你需要在实际应用时做权衡考虑。
以上就是本文全部内容，我希望通过本文，你能对响应式图像有进一步的了解，知道为什么应该考虑将它们应用于网站。
如果你有任何问题、建议或意见，请随时在下面的评论区留言分享。
感谢你的阅读！
本文参考：
Image Optimization — Addy Osmani
❝作者：Z招锦 链接：https://juejin.cn/post/7074199947477778439