当我们有srcset属性时，为什么我们需要picture元素？

The srcset attribute of the img element helps authors adapt their sites for high-resolution displays, to be able to use different assets representing the same image.

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

The picture element helps authors to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

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

Both these give the author control over displaying images based on the device resolution;thus making the images responsive. So what is the main difference between them?

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

I did find some examples on the picture element draft, but still fail to understand the difference. Here are the examples:

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

Using srcset attribute:

使用srcset属性:

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

Using picture element:

使用图片元素:

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

3 个解决方案

#1

Both srcset and picture does approximately the same things, but there is a subtle difference:

srcset和图片都做了大致相同的事情,但有一个微妙的区别:

• picture dictates what image the browser should use, whereas

图片决定了浏览器应该使用什么图像,而

• srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. Hopefully in the future browsers would become smarter and smarter with selecting the appropriate image.

srcset为浏览器提供了一个选择。可以使用很多东西来选择此选项,例如视口大小,用户首选项,网络条件等。希望将来浏览器在选择合适的图像时会变得更聪明,更智能。

The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.

对srcset的支持非常好,几乎所有当前浏览器都或多或少都支持它。带有图片元素的情况有点糟糕。

#2

2017 update

From http://usecases.responsiveimages.org/:

The srcset attribute

Allows authors to define various image resources and “hints” that assist a user agent to determine the most appropriate image source to display. Given a set of image resources, the user agent has the option of either following or overriding the author’s declarations to optimize the user experience based on criteria such as display density, connection type, user preferences, and so on.

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

The picture element

Building on srcset, this specification defines a declarative solution for grouping multiple versions of an image based on different characteristics (e.g., format, resolution, orientation, etc.). This allows the user agent to select the optimum image to present to an end-user based on the user agent's "environmental conditions", while also providing the ability to "art direct" images.

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

Environmental conditions are CSS media features (e.g., pixel-density, orientation, max-width) and CSS media types (e.g., print, screen).

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

Art direction means transforming an image to best match the space available to it. For example, a landscape image featuring dog in front of a house can be left as is on a typical desktop screen, but on a narrow portrait mobile screen, we might want to crop the sides of the house and focus on the dog.

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

picture uses CSS media queries, while srcset uses image candidate strings: width descriptors, e.g. 1024w, or pixel density descriptors, e.g. 2x.

图片使用CSS媒体查询,而srcset使用图像候选字符串:宽度描述符,例如1024w,或像素密度描述符,例如2倍。

Both specifications are widely supported among current browsers, with the exception of IE, old Android Browsers, and Opera mini. srcset is better supported by outdated browsers, namely Safari 7 through 9.2 See http://caniuse.com/#feat=srcset.

这两种规范在当前浏览器中得到广泛支持,IE,旧Android浏览器和Opera mini除外。过时的浏览器(即Safari 7到9.2)更好地支持srcset。请参阅http://caniuse.com/#feat=srcset。

#3

The relationship is described in clause 1.3 Relation to srcset of The picture Element draft. The description is somewhat vague, since it does not make it clear what it is being compared against, but for practical purposes, the W3C Editor’s draft The srcset attribute describes the design of srcset as a separate attribute (as opposite to its different role in the proposed picture element).

该关系在第1.3节“与元素草案的srcset的关系”中描述。描述有些模糊,因为它没有说明它与之比较的内容,但是出于实际目的,W3C编辑器的草案srcset属性将srcset的设计描述为一个单独的属性(与其在不同角色中的不同作用相反)提出的图片元素)。

The two drafts are meant to address the same problems in different ways. The srcset attribute would let you specify a list of image URLs with special notations used to indicate what widths or pixels densities they are for. The picture element uses CSS media queries for the same purpose.

这两份草案旨在以不同的方式解决同样的问题。 srcset属性允许您指定带有特殊符号的图像URL列表,用于指示它们的宽度或像素密度。 picture元素使用CSS媒体查询用于相同的目的。