1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
---
title: "`<picture>` Is Not the Element You're Looking For"
pub_date: 2014-09-30 09:30:23
slug: /blog/2014/09/picture-not-the-element-youre-looking-for
tags: Responsive Images, Responsive Web Design
metadesc: Most of the time the <picture> element is not what you want, just use img. Your users will thank you.
code: True
tutorial: True
---
The `<picture>` element will be supported in Chromium/Chrome/Opera stable in a few weeks. Later this year it will be part of Firefox. Some of it is already available in Safari and Mobile Safari. It's also top of IE12's to-do list.
The bottom line is that you can start using `<picture>`. You can polyfill it with [Picturefill][1] if you want, but since `<picture>` degrades reasonably gracefully I haven't even been doing that. I've been using `<picture>`.
Except that, as Jason Grigsby recently pointed out, you probably [don't need `<picture>`][2].
See, two of the most useful attributes for the `<picture>` element also work on the good old `<img>` element. Those two attributes are `srcset` and `sizes`.
In other words, this markup (from, [A Complete Guide to the `<picture>` Element][3])...
~~~{.language-markup}
<picture>
<source media="(min-width: 48em)" srcset="pic-large1x.jpg 800w, pic-large2x.jpg 800w 2x">
<source media="(min-width: 37.25em)" srcset="pic-med1x.jpg 400w, pic-med2x.jpg 400w 2x">
<source srcset="pic1x.jpg 200w, pic2x.jpg 200w 2x">
<img src="pic1x.jpg" alt="Responsive Web Design cover">
</picture>
~~~
...will do nearly the same things as this markup that doesn't use `<picture>`:
~~~{.language-markup}
<img sizes="(min-width: 48em) 100vw,
(min-width: 37.25em) 50vw,
calc(33vw - 100px)"
srcset="pic-large1x.jpg 800w,
pic-large2x.jpg 800w 2x,
pic-med1x.jpg 400w,
pic-med2x.jpg 400w 2x,
pic2x.jpg 200w 2x,
pic1x.jpg 200w"
src="pic1x.jpg" alt="Responsive Web Design cover">
~~~
The main difference between these two lies in the browser algorithm that ends up picking which image to display.
In the first case, using the `<source>` tag means the browser **MUST** use the first source that has a rule that matches. That's [part of the `<picture>` specification][4].
In the second bit of code, using the `sizes` and `srcset` attribute on the `<img>` tag, means the browser gets to decide which image it thinks is best. **When you use `<img>` the browser can pick the picture as it sees fit**. Avoiding the `<source>` tag allows the browser to pick the image via its own algorithms.
That means the browser can respect the wishes of your visitor, for example, not downloading a high resolution image over 3G networks. It also allows the browser to be smarter, for example, downloading the lowest resolution image until the person zooms in, at which point the browser might grab a higher resolution image.
Generally speaking, the only time you need to use `<picture>` is when you're handling [the "art direction" use case][5], which, according to `<picture>` guru Yoav Weiss is [currently around 25 percent of the time][6].
The rest of the time, the majority of the time, stick with `<img>`, your users will thank you.
## Further Reading
* [Don't use `<picture>` (most of the time)](http://blog.cloudfour.com/dont-use-picture-most-of-the-time/)
* [A Complete Guide to the `<Picture>` Element](https://longhandpixels.net/blog/2014/02/complete-guide-picture-element)
* [Native Responsive Images](https://dev.opera.com/articles/native-responsive-images/)
* [Srcset and sizes](http://ericportis.com/posts/2014/srcset-sizes/)
{^ .list--indented }
[1]: http://scottjehl.github.io/picturefill/
[2]: http://blog.cloudfour.com/dont-use-picture-most-of-the-time/
[3]: https://longhandpixels.net/blog/2014/02/complete-guide-picture-element)
[4]: https://html.spec.whatwg.org/multipage/embedded-content.html#select-an-image-source
[5]: http://usecases.responsiveimages.org/#h3_art-direction
[6]: http://blog.yoav.ws/2013/05/How-Big-Is-Art-Direction
|
