picture(source)元素VS img srcset属性

Question

元素的srcset属性img可帮助作者调整其网站以进行高分辨率显示,以便能够使用代表同一图像的不同资源.

图片元素帮助作者基于媒体查询和/或对特定图像格式的支持来控制用户代理向用户呈现哪个图像资源.

这两者都使作者能够控制基于设备分辨率显示图像;从而使图像响应.那么它们之间的主要区别是什么？

我确实在picture元素草案中找到了一些例子,但仍然无法理解其中的差异.以下是示例:

使用srcset属性:

<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
 alt="A rad wolf" width="500" height="500">

使用picture元素:

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 18em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

Answer 1

双方srcset并picture做大致相同的事情,但有一个细微的差别:

• picture 指示浏览器应该使用什么图像,而
• srcset给浏览器一个选择.可以使用很多东西来选择此选项,例如视口大小,用户首选项,网络条件等.希望将来浏览器在选择合适的图像时会变得更聪明,更智能.

支持srcset非常好,几乎所有当前的浏览器都或多或少支持它.形势与picture元素是有点差.

Answer 2

2017年更新

来自http://usecases.responsiveimages.org/:

该srcset属性

允许作者定义各种图像资源和"提示",以帮助用户代理确定要显示的最合适的图像源.给定一组图像资源,用户代理可以选择遵循或覆盖作者的声明,以根据诸如显示密度,连接类型,用户首选项等标准来优化用户体验.

该picture元素

在srcset的基础上,该规范定义了一种声明性解决方案,用于根据不同的特征(例如,格式,分辨率,方向等)对图像的多个版本进行分组.这允许用户代理基于用户代理的"环境条件"选择最佳图像以呈现给最终用户,同时还提供"艺术直接"图像的能力.

环境条件是CSS媒体特征(例如,像素密度,方向,最大宽度)和CSS媒体类型(例如,打印,屏幕).

艺术指导意味着将图像转换为最佳匹配可用空间.例如,在房子前面以狗为特色的风景图像可以保留在典型的桌面屏幕上,但是在狭窄的人像移动屏幕上,我们可能想要裁剪房子的侧面并专注于狗.

picture使用CSS媒体查询,同时srcset使用图像候选字符串:宽度描述符,例如1024w,或像素密度描述符,例如2x.

除了IE,旧的Android浏览器和Opera mini之外,当前的浏览器都广泛支持这两种规范.srcset过时的浏览器,即Safari 7到9.2,可以更好地支持它们.请参阅http://caniuse.com/#feat=srcset.

Answer 3

该关系在图片元素草案的第 1.3 节的关系srcset中描述。描述有些模糊，因为它没有清楚地表明它正在与什么进行比较，但出于实用目的，W3C Editor\xe2\x80\x99s 草案srcset 属性描述了作为单独属性的设计（与它在提议的元素中的不同作用）。srcsetpicture

\n\n

这两个草案旨在以不同的方式解决相同的问题。该srcset属性可让您指定图像 URL 列表，并使用特殊符号来指示它们的宽度或像素密度。该picture元素使用 CSS 媒体查询来达到相同的目的。

\n