picture (source) element VS img srcset attribute

Question

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.

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:

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

Answer 1

Both srcset and picture do approximately the same thing, but there is a subtle difference:

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

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.

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

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

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.

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.

Answer 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).

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.