用于响应式图像的 HTML 图片或 srcset [重复]答案

【问题标题】：HTML picture or srcset for responsive images [duplicate]用于响应式图像的 HTML 图片或 srcset [重复]
【发布时间】：2015-09-01 09:36:06
【问题描述】：

对许多人来说，使图像具有响应性一直是响应式网页设计的一个麻烦方面。我已经浏览了一些关于相同的文章，并遇到了“srcset”和“picture”作为解决方案。

SRCSET 示例

  <img src="flower_500px.jpg"
     srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
     width="500px" alt="flower">

图片示例

  <picture>
      <source media="(min-width: 45em)" srcset="flower_1000px.jpg">
      <source media="(min-width: 32em)" srcset="flower_750px.jpg">
      <img src="flower_500px.jpg" alt="flower">
  </picture>

我正在尝试决定选择这两种方法中的哪一种来使图像具有响应性。在这个选择中我应该考虑哪些特征？

【问题讨论】：

srcset?不确定那是什么。我会看看将图像用作background，然后将background-size 设置为contain 或cover
为什么不学习迄今为止最著名的框架之一？引导响应图像类：getbootstrap.com/css/#images-responsive
请注意，使用srcset：caniuse.com/#search=srcset 存在一些兼容性问题 - 只需使用 CSS 即可获得所需的结果，如果失败，请添加 Javascript 调整大小功能。
@Maddy，他们为什么要把事情复杂化超出了我的理解，为什么不将它添加到 CSS 而不是 HTML...这是图像样式，应该通过 CSS 完成。 ://
@odedta：“当浏览器开始加载页面时，它会在主解析器开始加载和解释页面的 CSS 和 JavaScript 之前开始下载（预加载）任何图像。所以如果想要为了节省带宽，他们需要更好的方法。” Source: developer.mozilla.org

标签： css html image responsive-design

【解决方案1】：

picture 和 srcset 都不是 100% 兼容所有浏览器，但它们都可以正常降级。如果浏览器不理解 <picture> 元素，它会优雅地回退到其中的 <img> 元素。如果浏览器不理解<img srcset...>，它将回退到使用图像的src 属性。

<picture> 元素（和<source> 子元素）是当您想要对不同尺寸/纵横比的图像进行艺术指导时引入的重型武器。 img srcset 属性更轻量级，如果您想针对不同分辨率的显示器进行设计，这就是您所需要的。

因为它们都具有向后兼容性的措施，所以我不会太担心您使用哪一个 - 两者都会在旧浏览器中优雅地回退。如果您只是针对像素密度进行设计，我会推荐srcset，因为它更轻量级。

【讨论】：