HTML5 picture 元素与 srcset：响应式图像的最佳实践，以及那些年我们踩过的坑
各位看官，咱们今天来聊聊响应式图像这事儿。响应式设计都嚷嚷这么多年了，网页能在各种屏幕上自适应，那图片呢？难道还傻乎乎地用一张大图撑到天荒地老？这显然不科学嘛！
想象一下，你在用手机流量刷朋友圈，看到一张高清无码（划掉）高清大图，还没欣赏完，流量就用掉了半个G，是不是想锤爆自己的手机？所以说，响应式图像，那是刻不容缓，迫在眉睫，关系到你的流量和用户体验的大事！
今天我们要聊的主角，就是 HTML5 的 picture 元素和 srcset 属性，它们是解决响应式图像问题的两大利器。掌握了它们，你就能让你的网站图片在各种设备上都能完美呈现，既清晰又省流量，妈妈再也不用担心我月底没流量了！
一、srcset：一张图的华丽变身
先来说说 srcset，它其实是 <img> 标签的一个属性，用来告诉浏览器，这张图片有多个版本，分别是针对不同屏幕尺寸或者设备像素比优化的。
简单来说，就是你可以准备同一张图片的不同尺寸版本，比如小尺寸的适合手机，中等尺寸的适合平板，大尺寸的适合桌面电脑。然后用 srcset 告诉浏览器，让它自己根据用户的设备情况选择合适的版本。
srcset 的语法是这样的：
<img src="default.jpg"
srcset="small.jpg 320w,
medium.jpg 768w,
large.jpg 1200w"
alt="一张风景图">这段代码的意思是：
src="default.jpg"：这是默认的图片，如果浏览器不支持srcset，就会显示这张图片。这个很重要，是兜底方案！srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"：这就是srcset的核心，它告诉浏览器，有三个版本的图片：small.jpg 320w：small.jpg是图片的文件名，320w表示这个图片宽度是 320 像素。medium.jpg 768w：medium.jpg是图片的文件名，768w表示这个图片宽度是 768 像素。large.jpg 1200w：large.jpg是图片的文件名，1200w表示这个图片宽度是 1200 像素。
浏览器会根据屏幕宽度，选择最合适的图片。比如，如果用户屏幕宽度是 320 像素，浏览器就会选择 small.jpg；如果屏幕宽度是 768 像素，就会选择 medium.jpg，以此类推。
除了 w，还有 x 可以用！
w 表示图片宽度，而 x 则表示设备像素比（Device Pixel Ratio，DPR）。DPR 是指物理像素和设备独立像素之间的比例。简单来说，就是屏幕的清晰度。比如，DPR 为 2 的屏幕，表示 1 个设备独立像素对应 2 个物理像素，也就是常说的 Retina 屏。
x 的用法是这样的：
<img src="default.jpg"
srcset="image1x.jpg 1x,
image2x.jpg 2x,
image3x.jpg 3x"
alt="一张风景图">这段代码的意思是：
image1x.jpg 1x：这是 DPR 为 1 的设备使用的图片。image2x.jpg 2x：这是 DPR 为 2 的设备使用的图片。image3x.jpg 3x：这是 DPR 为 3 的设备使用的图片。
浏览器会根据设备的 DPR，选择最合适的图片。比如，如果用户设备是 Retina 屏（DPR 为 2），浏览器就会选择 image2x.jpg。
srcset 的优点和局限性
srcset 的优点很明显：简单易用，只需要在 <img> 标签中添加 srcset 属性即可。而且，它是由浏览器自动选择合适的图片，开发者不需要编写额外的 JavaScript 代码。
但是，srcset 也有它的局限性。它只能根据屏幕宽度或者 DPR 来选择图片，不能根据其他条件来选择图片。比如，如果我想根据屏幕方向（横屏还是竖屏）来选择图片，或者根据网络状况来选择图片，srcset 就无能为力了。
二、picture：更强大的响应式图像解决方案
picture 元素是一个更加强大的响应式图像解决方案。它可以根据不同的媒体查询条件，选择不同的图片。
picture 元素的结构是这样的：
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 500px)" srcset="medium.jpg">
<img src="small.jpg" alt="一张风景图">
</picture>这段代码的意思是：
<picture>：这是picture元素的根元素。<source>：这是picture元素的核心，它定义了不同的媒体查询条件和对应的图片。media="(min-width: 800px)" srcset="large.jpg"：如果屏幕宽度大于等于 800 像素，就使用large.jpg。media="(min-width: 500px)" srcset="medium.jpg"：如果屏幕宽度大于等于 500 像素，就使用medium.jpg。
<img>：这是兜底的图片，如果浏览器不支持picture元素，或者没有匹配到任何媒体查询条件，就会显示这张图片。
浏览器会从上到下依次匹配 <source> 元素中的媒体查询条件，如果匹配到了，就使用对应的图片。如果没有匹配到，就使用 <img> 元素中的图片。
picture 元素的强大之处
picture 元素比 srcset 更加强大，它可以根据任何媒体查询条件来选择图片。比如，我们可以根据屏幕方向、设备类型、网络状况等等来选择图片。
举个例子，我们可以根据屏幕方向来选择图片：
<picture>
<source media="(orientation: landscape)" srcset="landscape.jpg">
<source media="(orientation: portrait)" srcset="portrait.jpg">
<img src="default.jpg" alt="一张风景图">
</picture>这段代码的意思是：
- 如果屏幕是横屏方向，就使用
landscape.jpg。 - 如果屏幕是竖屏方向，就使用
portrait.jpg。 - 如果浏览器不支持
picture元素，或者无法判断屏幕方向，就使用default.jpg。
再举个例子，我们可以根据设备类型来选择图片：
<picture>
<source media="(min-device-width: 1024px)" srcset="desktop.jpg">
<source media="(max-device-width: 768px)" srcset="mobile.jpg">
<img src="default.jpg" alt="一张风景图">
</picture>这段代码的意思是：
- 如果设备宽度大于等于 1024 像素，就认为是桌面设备，使用
desktop.jpg。 - 如果设备宽度小于等于 768 像素，就认为是移动设备，使用
mobile.jpg。 - 如果浏览器不支持
picture元素，或者无法判断设备类型，就使用default.jpg。
picture 的优点和缺点
picture 元素的优点是：功能强大，可以根据任何媒体查询条件来选择图片。
picture 元素的缺点是：语法比较复杂，需要编写更多的 HTML 代码。
三、最佳实践：如何选择 srcset 和 picture？
那么，在实际开发中，我们应该如何选择 srcset 和 picture 呢？
一般来说，如果只需要根据屏幕宽度或者 DPR 来选择图片，那么使用 srcset 就足够了。srcset 简单易用，可以满足大部分场景的需求。
如果需要根据其他条件来选择图片，比如屏幕方向、设备类型、网络状况等等，那么就需要使用 picture 元素。picture 元素功能强大，可以应对更加复杂的场景。
总而言之，选择哪个方案，取决于你的实际需求。没有最好的方案，只有最合适的方案。
四、那些年我们踩过的坑
说了这么多理论，咱们再来聊聊实际开发中可能会遇到的坑。毕竟，光说不练假把式，光看不踩坑，那是纸上谈兵！
- 图片格式的选择：不同的图片格式有不同的特点，比如 JPEG 适合存储颜色丰富的照片，PNG 适合存储颜色简单的图标，WebP 是一种更加先进的图片格式，可以提供更高的压缩率和更好的画质。在选择图片格式时，要根据图片的特点和实际需求来选择。一般来说，对于照片，可以使用 JPEG 或者 WebP；对于图标，可以使用 PNG 或者 WebP。
- 图片压缩：图片压缩是优化图片性能的重要手段。通过压缩图片，可以减少图片的文件大小，从而加快网页的加载速度。有很多在线图片压缩工具可以使用，比如 TinyPNG、ImageOptim 等等。
- 懒加载：懒加载是一种优化网页性能的技术。它可以延迟加载图片，只有当图片出现在用户的视口中时才加载。通过懒加载，可以减少网页的初始加载时间，提高用户体验。有很多 JavaScript 库可以实现懒加载，比如 lazysizes、lozad.js 等等。
sizes属性：sizes属性是srcset的一个补充属性，它可以告诉浏览器图片的实际显示尺寸。如果没有sizes属性，浏览器可能无法正确选择合适的图片。sizes属性的语法比较复杂，需要根据实际情况来设置。- 缓存问题：浏览器会对图片进行缓存，如果图片更新了，但是浏览器仍然使用缓存中的旧图片，就会导致显示错误。为了解决这个问题，可以在图片的文件名后面添加一个版本号，比如
image.jpg?v=1。这样，每次图片更新时，版本号都会改变，浏览器就会重新加载图片。 - 兼容性问题：虽然
srcset和picture元素已经被大部分浏览器支持，但是仍然有一些旧版本的浏览器不支持它们。为了解决兼容性问题，可以使用polyfill。polyfill是一种 JavaScript 代码，它可以让旧版本的浏览器支持新的 HTML5 特性。
五、总结
响应式图像是现代 Web 开发的重要组成部分。通过使用 srcset 和 picture 元素，我们可以让我们的网站图片在各种设备上都能完美呈现，既清晰又省流量。
当然，响应式图像并不是一蹴而就的事情，需要我们在实际开发中不断学习和实践。希望这篇文章能够帮助你更好地理解和使用 srcset 和 picture 元素，让你的网站图片更加出色！
最后，记住一点：用户体验至上！ 别为了追求完美而过度优化，反而牺牲了用户体验。适度就好，就像吃火锅，太辣了也不舒服嘛！
希望各位看官在响应式图像的道路上越走越远，早日成为响应式图像大师！咱们下期再见！