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

Question

对许多人来说,使图像响应一直是响应式网页设计的一个棘手问题.我已经阅读了一些关于相同的文章并且遇到了"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>

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

Answer 1

两者picture并srcset不能与所有浏览器100%兼容,但他们都优雅地降级.如果浏览器不理解该<picture>元素,它将优雅地回退到<img>它内部的元素.如果浏览器不理解<img srcset...>,它将回退到使用src图像的属性.

当您想要在图像的不同尺寸/宽高比上进行艺术指导时,<picture>元素(和<source>子元素)是您带来的重型枪支.img srcset属性更轻巧,如果你想为不同的分辨率显示设计,你就可以得到它.

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