用于响应式图片的HTML图片或srcset

Question

对于许多人而言，使图像响应一直是响应式网页设计的一个棘手问题。我已经阅读了一些关于相同的文章，并且遇到了＆＃34; srcset＆＃34;和＆＃34;图片＆＃34;作为解决方案。

SRCSET示例

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

PICTURE示例

  <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>

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

Answer 1

picture和srcset并非与所有浏览器100％兼容，但它们都会优雅地降级。如果浏览器不理解<picture>元素，它将优雅地回退到其中的<img>元素。如果浏览器无法理解<img srcset...>，则会回退到使用图片的src属性。

当您想要在图像的不同尺寸/宽高比上进行艺术指导时，<picture>元素（和<source>子元素）是您带来的重枪。 img srcset属性更加轻量级，如果您想为不同的分辨率显示设计，那么就是您所需要的。

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