forked from ResponsiveImagesCG/picture-element
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1959 lines (1621 loc) · 107 KB
/
index.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>The picture Element</title>
<style>
@media print {
html { margin: 0 !important; }
body { font-family: serif; }
th, td { font-family: inherit; }
a { color: inherit !important; }
.example:before { font-family: serif !important; }
a:link, a:visited { text-decoration: none !important; }
a:link:after, a:visited:after { /* create a cross-ref "see..." */; }
}
@page {
margin: 1.5cm 1.1cm;
}
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
figure, div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
.example { page-break-inside: avoid; }
dt { page-break-after: avoid; }
body {
background: white;
/* background-image: floating-margin-image-goes-here; */
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
color: black;
counter-reset: exampleno figure issue;
font-family: sans-serif;
line-height: 1.5;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
/* General structural markup */
h1, h2, h3, h4, h5, h6 { text-align: left; }
h1, h2, h3 { color: #005A9C; }
h1 { font: 170% sans-serif; }
h2 { font: 140% sans-serif; }
h3 { font: 120% sans-serif; }
h4 { font: bold 100% sans-serif; }
h5 { font: italic 100% sans-serif; }
h6 { font: small-caps 100% sans-serif; }
h2, h3, h4, h5, h6 { margin-top: 3em; }
h1 + h2 { margin-top: 0em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 1.2em; }
.head { margin-bottom: 1em; }
.head h1 { margin-top: 2em; clear: both; }
.head table { margin-left: 2em; margin-top: 2em; }
.head dd { margin-bottom: 0; }
p.copyright { font-size: small; }
p.copyright small { font-size: small; }
pre { margin: 1em 0 1em 2em; overflow: auto; }
pre, code, .idl-code {
font-size: .9em;
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
dt dfn code { font-size: inherit; }
dfn { font-weight: bolder; }
s, del {text-decoration: line-through; color: red; }
u, ins {text-decoration: underline; background: #bfa; }
sup {
vertical-align: super;
font-size: 80%
}
details { display: block; }
dt { font-weight: bold; }
dd { margin: 0 0 1em 2em; }
ul, ol { margin-left: 0; padding-left: 2em; }
li { margin: 0.25em 2em 0.5em 0; padding-left: 0; }
td.pre {
white-space: pre-wrap;
}
.css, .property { color: #005a9c; }
.property { white-space: nowrap; }
/* Boilerplate sections */
ul.indexlist { margin-left: 0; columns: 13em; }
ul.indexlist li { margin-left: 0; list-style: none }
ul.indexlist li li { margin-left: 1em; }
ul.indexlist a { font-weight: bold; }
ul.indexlist ul, ul.indexlist dl { font-size: smaller; }
ul.indexlist dl { margin-top: 0; }
ul.indexlist dt { margin: .2em 0 .2em 20px; }
ul.indexlist dd { margin: .2em 0 .2em 40px; }
.toc {
font-weight: bold;
line-height: 1.3;
list-style: none;
margin: 1em 0 0 5em;
padding: 0;
}
.toc ul { margin: 0; padding: 0; font-weight: normal; }
.toc ul ul { margin: 0 0 0 2em; font-style: italic; }
.toc ul ul ul { margin: 0}
.toc > li { margin: 1.5em 0; padding: 0; }
.toc li { clear: both; }
.toc ul.toc li { margin: 0.3em 0 0 0; }
.toc a { border-bottom-style: none; }
.toc a:hover, ul.toc a:focus { border-bottom-style: solid; }
/* Section numbers in a column of their own */
.toc span.secno {float: left; width: 4em; margin-left: -5em}
.toc ul ul span.secno { margin-left: -7em; }
table.proptable {
font-size: small;
border-collapse: collapse;
border-spacing: 0;
text-align: left;
margin: 1em 0;
}
table.proptable td, table.proptable th {
padding: 0.4em;
text-align: center;
}
table.proptable tr:hover td { background: #DEF; }
/* Links */
a[href] { color: inherit; border-bottom: 1px solid silver; text-decoration: none; }
a[href]:hover { background: #ffa; }
a[href]:active { color: #C00; background: transparent; }
img, a.logo { border-style: none; }
.heading, .issue, .note, .example, li, dt { position: relative; }
/* CSS-ish link types */
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {content: "“";}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {content: "”";}
[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after { content: ""; }
/* Element-type link styling */
[data-link-type=element] { font-family: monospace; }
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
/* Self-links */
a.self-link {
position: absolute;
top: 0;
left: -2.5em;
width: 2em;
height: 2em;
text-align: center;
border: none;
transition: opacity .2s;
opacity: .5;
}
a.self-link:hover {
opacity: 1;
}
.heading > a.self-link {
font-size: 83%;
}
li > a.self-link {
left: -3.5em;
}
dfn > a.self-link {
top: auto;
left: auto;
opacity: 0;
width: 1.5em;
height: 1.5em;
background: gray;
color: white;
font-style: normal;
transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
opacity: 1;
}
dfn > a.self-link:hover {
color: black;
}
a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }
/* Figures */
figure {
display: block;
text-align: center;
margin: 2.5em 0;
}
figure.sidefigure {
float: right;
width: 50%;
margin: 0 0 0.5em 0.5em
}
figure pre {
text-align: left;
display: table;
margin: 1em auto;
}
figure table {
margin: auto;
}
figure img, figure object {
display: block;
margin: auto;
max-width: 100%
}
figcaption {
counter-increment: figure;
font-size: 90%;
font-style: italic;
text-align: center;
}
figcaption::before {
content: "Figure " counter(figure) ". ";
font-weight: bold;
}
dd figure { margin-left: -2em; }
/* Definition tables */
table.definition {
border-spacing: 0;
padding: 0 1em 0.5em;
width: 100%;
table-layout: fixed;
margin: 1.2em 0;
}
table.definition td, table.definition th {
padding: 0.5em;
vertical-align: baseline;
border-bottom: 1px solid #bbd7e9;
}
table.definition th:first-child {
font-style: italic;
font-weight: normal;
text-align: left;
width: 8.3em;
padding-left: 1em;
}
table.definition > tbody > tr:last-child > th,
table.definition > tbody > tr:last-child > td {
border-bottom: none;
}
table.definition tr:first-child > th,
table.definition tr:first-child > td {
padding-top: 1em;
}
/* Footnotes at the bottom of a definition table */
table.definition td.footnote {
font-style: normal;
padding-top: .6em;
width: auto;
}
table.definition td.footnote::before {
content: " ";
display: block;
height: 0.6em;
width: 4em;
border-top: thin solid;
}
/* IDL fragments */
pre.idl {
padding: .5em 1em;
margin: 1.2em 0;
}
pre.idl :link, pre.idl :visited {
color:inherit;
background:transparent;
}
/* Data tables */
/* Comes in plain, long, complex, or define varieties */
.data {
margin: 1em auto;
border-collapse: collapse;
width: 100%;
border: hidden;
}
.data {
text-align: center;
width: auto;
}
.data caption {
width: 100%;
}
.data td, .data th {
padding: 0.5em;
border-width: 1px;
border-color: silver;
border-top-style: solid;
}
.data thead td:empty {
padding: 0;
border: 0;
}
.data thead th[scope="row"] {
text-align: right;
color: inherit;
}
.data thead,
.data tbody {
color: inherit;
border-bottom: 2px solid;
}
.data colgroup {
border-left: 2px solid;
}
.data tbody th:first-child,
.data tbody td[scope="row"]:first-child {
text-align: right;
color: inherit;
border-right: 2px solid;
border-top: 1px solid silver;
padding-right: 1em;
}
.data.define td:last-child {
text-align: left;
}
.data tbody th[rowspan],
.data tbody td[rowspan] {
border-left: 1px solid silver;
}
.data tbody th[rowspan]:first-child,
.data tbody td[rowspan]:first-child {
border-left: 0;
border-right: 1px solid silver;
}
.data.complex th,
.data.complex td {
border: 1px solid silver;
}
.data td.long {
vertical-align: baseline;
text-align: left;
}
.data img {
vertical-align: middle;
}
/* Switch/case <dl>s */
dl.switch {
padding-left: 2em;
}
dl.switch > dt {
text-indent: -1.5em;
}
dl.switch > dt:before {
content: '↪';
padding: 0 0.5em 0 0;
display: inline-block;
width: 1em;
text-align: right;
line-height: 0.5em;
}
/* Style for At Risk features (intended as editorial aid, not intended for publishing) */
.atrisk::before {
position: absolute;
margin-left: -5em;
margin-top: -2px;
padding: 4px;
border: 1px solid;
content: 'At risk';
font-size: small;
background-color: white;
color: gray;
border-radius: 1em;
text-align: center;
}
/* Obsoletion notice */
details.annoying-warning[open] {
background: #fdd;
color: red;
font-weight: bold;
text-align: center;
padding: .5em;
border: thick solid red;
border-radius: 1em;
position: fixed;
left: 1em;
right: 1em;
bottom: 1em;
z-index: 1000;
}
details.annoying-warning:not([open]) > summary {
background: #fdd;
color: red;
font-weight: bold;
text-align: center;
padding: .5em;
}
/* Examples */
.example {
counter-increment: exampleno;
}
.example::before {
content: "Example";
content: "Example " counter(exampleno);
min-width: 7.5em;
text-transform: uppercase;
display: block;
}
.illegal-example::before {
content: "Invalid Example";
content: "Invalid Example" counter(exampleno);
}
.example, .illegal-example, .html, .illegal-html, .xml, .illegal-xml {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
pre.example, pre.illegal-example, pre.html,
pre.illegal-html, pre.xml, pre.illegal-xml {
padding-top: 1.5em;
}
.illegal-example { color: red; }
.illegal-example p { color: black; }
.html { color: #600; }
.illegal-html { color: red; }
.illegal-html p { color: black; }
.xml { color: #600; }
.illegal-xml { color: red; }
.illegal-xml p { color: black; }
code.css { font-family: inherit; font-size: 100% }
code.html { color: #600 } /* inline HTML */
code.xml { color: #600 } /* inline XML */
/* Issues */
.issue {
border-color: #E05252;
background: #FBE9E9;
counter-increment: issue;
}
.issue:before {
content: "Issue " counter(issue);
padding-right: 1em;
text-transform: uppercase;
color: #E05252;
}
/* Whys */
details.why > summary {
font-style: italic;
}
details.why[open] > summary {
border-bottom: 1px silver solid;
}
/* All the blocks get similarly styled */
table.definition, pre.idl, .example, .note, details.why, .issue {
border: none;
border-left: .5em solid black;
border-left: .5rem solid black;
}
.issue, .note, .example, .why {
padding: .5em;
margin-top: 1em;
margin-bottom: 1em;
}
table.definition, pre.idl {
background: hsl(210, 70%, 95%);
border-color: hsl(210, 80%, 75%);
}
.example {
background: hsl(50, 70%, 95%);
border-color: hsl(50, 70%, 60%);
}
.example::before {
color: hsl(50, 70%, 60%);
}
.note, details.why {
background: hsl(120, 70%, 95%);
border-color: hsl(120, 70%, 60%);
}
.note::before {
color: hsl(120, 70%, 60%);
}
.issue {
background: hsl(0, 70%, 95%);
border-color: hsl(0, 70%, 60%);
}
.issue::before {
color: hsl(0, 70%, 60%);
}
span.issue, span.note {
padding: .1em .5em .15em;
border-right-width: .5em;
border-right-style: solid;
}
</style>
<style>
a.logo-ricg { float: left; border-bottom: none; }
a.logo-w3c { float: right; border-bottom: none; }
p[data-fill-with="logo"] {
float: left;
width: 100%;
}
</style>
<style>
[data-link-type=element] { font-family: monospace; }
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
</style>
</head>
<body class=h-entry>
<div class=head>
<p data-fill-with=logo><a class=logo-ricg href=http://responsiveimages.org>
<img alt="Responsive Images Community Group" height=49 src=https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png>
</a>
<a class=logo-w3c href=http://www.w3.org/>
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home>
</a>
</p>
<h1 class="p-name no-ref" id=title>The picture Element</h1>
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>W3C Working Draft,
<span class=dt-updated><span class=value-title title=20140610>10 June 2014</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://www.w3.org/TR/2014/WD-html-picture-element-1-20140610/>http://www.w3.org/TR/2014/WD-html-picture-element-1-20140610/</a><dt>Editor’s Draft:<dd><a href=http://picture.responsiveimages.org/>http://picture.responsiveimages.org/</a><dt>Test Suite:<dd>None Yet<dt>Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:[email protected]>Simon Pieters</a> (<span class="p-org org">Opera Software</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://blog.yoav.ws/>Yoav Weiss</a><dd class="p-author h-card vcard"><span class="p-name fn">Marcos Cáceres</span> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://matmarquis.com/>Mat Marquis</a><dt>Version History:<dd><a href=https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages>Commit History</a><dd><a href=https://twitter.com/respimg_commits>Github commits on Twitter</a><dt>Participate:<dd><a href=http://w3c.responsiveimages.org/>Join the Responsive Images Community Group</a><dd><a href=http://list.responsiveimages.org/>Public Mailing List</a><dd><a href=irc://irc.w3.org:6665/#respimg>IRC: #respimg on W3C’s IRC</a><dd><a href=https://twitter.com/respimg>Twitter</a><dd><a href=https://github.com/ResponsiveImagesCG/picture-element>Github</a></dl></div>
<div data-fill-with=warning></div>
<p class=copyright data-fill-with=copyright><a href=http://creativecommons.org/publicdomain/zero/1.0/ rel=license><img alt=CC0 src=https://i.creativecommons.org/p/zero/1.0/80x15.png></a>
To the extent possible under law, the editors have waived all copyright
and related or neighboring rights to this work.
In addition, as of 10 June 2014,
the editors have made this specification available under the
<a href=http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0 rel=license>Open Web Foundation Agreement Version 1.0</a>,
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.
</p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
<p class=p-summary data-fill-with=abstract>This specification defines the HTML <code>picture</code> element and extends the <code>img</code> and <code>source</code> elements to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.
</p>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a <strong>stable draft</strong> of this specification.
It is intended that no changes will be made to this specification
besides compatible bugfixes,
and future extensions.
<p>
This document is appropriate to use for implementation.
If any changes are made that would affect the behavior of existing implementations,
it will be done only after consulting with existing implementations
to ensure that such a change is acceptable and compatible with existing usage.
</div>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc>
<li><a href=#intro><span class=secno>1</span> Introduction</a>
<ul class=toc>
<li><a href=#when-to-use><span class=secno>1.1</span> When to use <code>picture</code></a>
<li><a href=#examples><span class=secno>1.2</span> Examples of usage</a>
<li><a href=#relationship-to-srcset><span class=secno>1.3</span> Relationship to <code>srcset</code></a></ul>
<li><a href=#defs><span class=secno>2</span> Definitions</a>
<li><a href=#the-picture-element><span class=secno>3</span> The <span data-link-type=element title=picture>picture</span> Element</a>
<ul class=toc>
<li><a href=#algos><span class=secno>3.1</span> Sub-Algorithms</a>
<ul class=toc>
<li><a href=#select-image-source><span class=secno>3.1.1</span> Selecting an Image Source</a>
<li><a href=#update-source-set><span class=secno>3.1.2</span> Updating the Source Set</a>
<li><a href=#parse-srcset-attr><span class=secno>3.1.3</span> Parsing a <code>srcset</code> Attribute</a>
<li><a href=#parse-sizes-attr><span class=secno>3.1.4</span> Parsing a <code>sizes</code> Attribute</a>
<li><a href=#normalize-source-densities><span class=secno>3.1.5</span> Normalizing the Source Densities</a></ul>
<li><a href=#preloader><span class=secno>3.2</span> Interaction with the Preload Scanner</a>
<li><a href=#picture-idl><span class=secno>3.3</span> <code>HTMLPictureElement</code> interface</a></ul>
<li><a href=#the-source-element><span class=secno>4</span> Changes to the <span data-link-type=element title=source>source</span> Element</a>
<li><a href=#the-img-element><span class=secno>5</span> Changes to the <span data-link-type=element title=img>img</span> Element</a>
<li><a href=#dnd><span class=secno>6</span>Drag and drop</a>
<li><a href=#acks><span class=secno>7</span> Acknowledgements</a>
<li><a href=#conformance><span class=secno></span> Conformance</a>
<li><a href=#references><span class=secno></span> References</a>
<ul class=toc>
<li><a href=#normative><span class=secno></span> Normative References</a>
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
<li><a href=#index><span class=secno></span> Index</a>
<li><a href=#property-index><span class=secno></span> Property index</a>
<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>
Introduction</span><a class=self-link href=#intro></a></h2>
<p>This specification provides developers with a means to declare multiple versions of an image at different resolutions,
and, through <a data-biblio-type=normative data-link-type=biblio href=#biblio-mediaq title=biblio-mediaq>[MEDIAQ]</a> (<cite>CSS Media Queries</cite>),
a means to create specialized presentations of an image and control when they are presented to a user.
This is achieved by introducing the <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element to HTML,
and by enhancing the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element to support specifying multiple source urls.</p>
<p>By relying on <a data-biblio-type=normative data-link-type=biblio href=#biblio-mediaq title=biblio-mediaq>[MEDIAQ]</a>, a user agent can <em>respond</em> to changes in the browsing environment
by selecting the image source that most closely matches the browsing environment –
thus embodying a technique known as <a href=http://en.wikipedia.org/wiki/Responsive_web_design>responsive web design</a> directly in the HTML markup.
<a data-link-type=dfn href=http://www.w3.org/TR/mediaqueries-4/#media-feature title="media features">Media features</a> that a user agent can potentially respond to include, but are not limited to,
pixel widths and heights,
and pixel densities,
as well as environmental lighting conditions, changes in orientation,
and changes in media type such as going from screen to print.</p>
<p>The <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element remains backwards compatible with legacy user agents
(they will use the child <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element)
while offering the same accessibility options as the existing <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element.</p>
<h3 class="heading settled heading" data-level=1.1 id=when-to-use><span class=secno>1.1 </span><span class=content>
When to use <code>picture</code></span><a class=self-link href=#when-to-use></a></h3>
<p>The <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element is intended to be used when
a responsive design dictates a somewhat different image on some types of screens (“art direction”)
or when providing images in multiple file formats.</p>
<p>The <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element is not a general replacement for the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element.
When there is only a single image source,
or when an image source exists in multiple densities (without “art direction”),
authors are encouraged to use just the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element,
rather than cluttering their page with additional unnecessary syntax.</p>
<h3 class="heading settled heading" data-level=1.2 id=examples><span class=secno>1.2 </span><span class=content>
Examples of usage</span><a class=self-link href=#examples></a></h3>
<div class=example id=example-1><a class=self-link href=#example-1></a>
This example shows a basic usage of the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element
to present the same image at multiple resolutions.
<pre><img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
alt="<a href=images/a-rad-wolf.gif>A rad wolf</a>" width="500" height="500">
</pre>
<p>In this example, the user agent will choose one of the three URLs—<wbr>“pic1x.jpg”, “pic2x.jpg”, or “pic4x.jpg”—<wbr>depending on whether the quality of the user’s screen
and perhaps other factors,
such as the user’s bandwidth.</p>
<p>It will then load the chosen URL in the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element,
as if it were specified in the <a data-link-for=img data-link-type=element-attr title=src>src</a> attribute.</p>
<p>For backwards compatibility with older user agents that don’t yet understand the <a class=idl-code data-link-for=img data-link-type=attribute title=srcset>srcset</a> attribute,
one of the URLs is specified in the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element’s <a data-link-type=element-attr href=http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src title=src>src</a> attribute.
This will result in something useful
(though perhaps lower-resolution than the user would like)
being displayed even in older user agents.</p>
</div>
<div class=example id=example-2><a class=self-link href=#example-2></a>
When doing responsive design,
it is sometimes necessary to produce slightly different versions of an image
depending on the user’s device.
For example,
on a small screen like a phone,
the author might want to show a zoomed-in crop of an image,
while on a larger screen the full image can be displayed instead.
This can be accomplished with multiple <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> elements:
<pre><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>
</pre>
<p>In this example, depending on the user’s screen size,
one of the URLs will be downloaded.
For example, on a large desktop screen “large.jpg” will be displayed in the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element.</p>
</div>
<div class=example id=example-3><a class=self-link href=#example-3></a>
Of course, one can use both multiple <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> elements
<em>and</em> multiple sources within a single <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element together:
<pre><picture>
<source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
<img src="small-1.jpg" srcset="small-2.jpg 2x" alt="The president giving an award.">
</picture>
</pre>
<p>In this example,
the user agent first chooses which set of sources to look at,
depending on the size of the user’s screen.
Then it chooses which of the different-density sources to load,
based on information it knows about the user’s device.</p>
</div>
<div class=example id=example-4><a class=self-link href=#example-4></a>
If the final size of the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element isn’t known ahead of time,
it can be difficult or impossible to specify a density descriptor for the image sources.
For example,
if an image is meant to take up the full width of the user’s screen,
an image that is 600 image pixels wide will be approximately <span class=css data-link-type=maybe title=2x>2x</span> on a small <span class=css data-link-type=maybe title=320px>320px</span>-wide phone,
approximately <span class=css data-link-type=maybe title=1x>1x</span> on a larger tablet display,
and less than <span class=css data-link-type=maybe title=1x>1x</span> on a large desktop monitor.
<p>To help with this,
rather than specifying the densities of each image source,
the sizes of each image source can be specified directly,
along with the size of the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element.
The user agent will then automatically calculate the effective pixel density of the image
and choose which one to download accordingly.</p>
<pre><img sizes="100vw" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"
src="pic400.jpg" alt="The president giving an award.">
</pre>
<p>In this example, the image source is provided at three sizes—<wbr>400 pixels wide, 800 pixels wide, and 1600 pixels wide.
As well, it declares that the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element is intrinsically sized to be as wide as the entire viewport.
If the user’s device is <span class=css data-link-type=maybe title=320px>320px</span> wide,
this is equivalent to specifying <span class=css data-link-type=maybe title="pic400.jpg 1.25x, pic800.jpg 2.5x, pic1600.jpg 5x">pic400.jpg 1.25x, pic800.jpg 2.5x, pic1600.jpg 5x</span>.
On the other hand,
if the user’s device is <span class=css data-link-type=maybe title=1200px>1200px</span> wide,
this is equivalent to specifying <span class=css data-link-type=maybe title="pic400.jpg .33x, pic800.jpg .67x, pic1600.jpg 1.33x">pic400.jpg .33x, pic800.jpg .67x, pic1600.jpg 1.33x</span>.</p>
<p>With this information,
the user agent can choose the correct image source to download
regardless of how large the user’s device is.</p>
<p>In this example, the <a class=idl-code data-link-for=img data-link-type=attribute title=sizes>sizes</a> attribute could be omitted
because the default value is <span class=css data-link-type=maybe title=100vw>100vw</span>.</p>
</div>
<div class=example id=example-5><a class=self-link href=#example-5></a>
The previous example showed how to deal with the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element’s size being unpredictable
because it was a fraction of the viewport’s size.
Sometimes, though, the size of an image can also change based on a site’s layout breakpoints.
<p>For example, say your site had three basic layouts:</p>
<figure>
<img src=images/viewport_selection_mob_first.jpg>
<figcaption>
Single-column (100%) on small screens,
two-column (50%) on medium screens,
and three-column (approximately 33%) on large screens.
</figcaption>
</figure>
<p>Assuming that the same image is supposed to be used at all of these layouts
(that is, you aren’t doing <a data-link-type=dfn href=http://usecases.responsiveimages.org/#art-direction title="art direction">art direction</a> cropping to optimize the display of the image for a given size),
then all of these cases can be addressed by a handful of images at various sizes.
In that case, the following code specifies the image’s display:</p>
<pre><img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,
pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w"
src="pic400.jpg" alt="The president giving an award.">
</pre>
<p>The <a data-link-for=source data-link-type=element-attr href=#element-attrdef-sizes0 title=sizes>sizes</a> attribute sets up the layout breakpoints at <span class=css data-link-type=maybe title=30em>30em</span> and <span class=css data-link-type=maybe title=50em>50em</span>,
and declares the image sizes between these breakpoints to be <span class=css data-link-type=maybe title=100vw>100vw</span>, <span class=css data-link-type=maybe title=50vw>50vw</span>, or <span class=css data-link-type=maybe title="calc(33vw - 100px)">calc(33vw - 100px)</span>.</p>
<p>The six image sources provided automatically cover every reasonable possibility.
For small screens (phone size, or even smaller, like watches),
anything from the 100 pixel wide image to the 800 pixel wide image may be downloaded,
depending on screen size and density.
For medium and large screens,
anything from the 400 pixel wide image and up may be chosen.
The author doesn’t have to do any math or complex figuring,
just provide the image in enough sizes to cover everything they believe reasonable.</p>
<p>Specifying this information with multiple <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> elements,
one for each of the <a data-link-type=dfn href=http://www.w3.org/TR/mediaqueries-4/#media-query title="media queries">media queries</a>,
is possible, but much more verbose,
as the <a data-link-for=source data-link-type=element-attr href=#element-attrdef-srcset title=srcset>srcset</a> attributes have to be duplicated for each of them.</p>
</div>
<div class=example id=example-6><a class=self-link href=#example-6></a>
This example shows how <a data-link-type=element href=#elementdef-picture title=picture>picture</a> and other HTML elements can be used
together.
<pre><figure>
<picture>
<source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
<img src="small-1.jpg" srcset="small-2.jpg 2x" alt="">
</picture>
<figcaption>A figure of a fox jumping over a lazy box.</figcaption>
</figure>
</pre>
</div>
<div class=example id=example-8><a class=self-link href=#example-8></a>
The <a data-link-type=element-attr href=#element-attrdef-type title=type>type</a> attribute can be used to serve images of
different file types depending on user agent support.
<pre><picture>
<source type="image/webp" srcset="dogs-1.webp, dogs-2.webp 2x">
<source type="image/vnd.ms-photo" srcset="dogs-1.jxr, dogs-2.jxr 2x">
<img src="dogs-1.jpg" srcset="dogs-2.jpg 2x"
alt="Hundreds of hot dogs" width="600" height="200">
</picture>
</pre>
<p>In this example, the user agent will choose the first source that has a
<a data-link-type=element-attr href=#element-attrdef-type title=type>type</a> attribute with a supported MIME type. If the
user agent supports WebP images, the first <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element
will be chosen. If not, but the user agent does support JPEG XR images,
the second <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element will be chosen. If neither of
those formats are supported, the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element will be
chosen. Then, the user agent chooses which of the different-density
sources to load, based on information it knows about the user’s device.</p>
</div>
<h3 class="heading settled heading" data-level=1.3 id=relationship-to-srcset><span class=secno>1.3 </span><span class=content>
Relationship to <code>srcset</code></span><a class=self-link href=#relationship-to-srcset></a></h3>
<p>This specification replaces the original <code>srcset</code> proposal and <a href=#parse-srcset-attr>extends the <code>srcset</code> attribute</a> to adequately address the <a href=http://usecases.responsiveimages.org/#h3_viewport-based-selection>viewport based selection</a> use case.</p>
<p>The <code>srcset</code> attribute allows authors to provide a UA with a set of image resources and dimensions, rather than a set of explicit resource-selection heuristics. Given a set of image resources and their dimensions, the UA can then select the most appropriate resource based on criteria such as <a href=http://usecases.responsiveimages.org/#h3_viewport-based-selection>viewport size</a>,<a href=http://usecases.responsiveimages.org/#device-pixel-ratio-based-selection>display density</a>,<a href=http://usecases.responsiveimages.org/#user-control-over-sources>network connection speed or type</a>,<a href=http://usecases.responsiveimages.org/#user-control-over-sources>user preference</a>, and so on.</p>
<p>The picture element defines conditions under which the UA should follow the author’s explicit instructions in selecting the most appropriate resource to display. This includes image sources with intended to be displayed at specific breakpoints as defined by CSS media queries (see: <a href=http://usecases.responsiveimages.org/#design-breakpoints>design breakpoints</a> and <a href=http://usecases.responsiveimages.org/#relative-units>relative units</a>) or content variations for increased clarity and focus based on the size of the client’s viewport (see: <a href=http://usecases.responsiveimages.org/#art-direction><q>art direction</q></a>).</p>
<p>The proposed solutions are not mutually exclusive, and work together to address the complete set of <a href=http://usecases.responsiveimages.org/>use cases and requirements for responsive images</a> for responsive images (see <a data-biblio-type=normative data-link-type=biblio href=#biblio-respimg-usecases title=biblio-respimg-usecases>[respimg-usecases]</a>).</p>
<h2 class="heading settled heading" data-level=2 id=defs><span class=secno>2 </span><span class=content>
Definitions</span><a class=self-link href=#defs></a></h2>
<p>The following terms are used throughout this specification so they are
gathered here for the readers convenience. The following list of terms
is not exhaustive; other terms are defined throughout this
specification.</p>
<p>The following terms are defined by the <a data-biblio-type=normative data-link-type=biblio href=#biblio-html title=biblio-html>[HTML]</a> specification:
<dfn data-dfn-type=dfn data-noexport="" id=dfn-skip-whitespace>skip whitespace<a class=self-link href=#dfn-skip-whitespace></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-resolve>resolve<a class=self-link href=#dfn-resolve></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-last-selected-source>last selected source<a class=self-link href=#dfn-last-selected-source></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-collect-a-sequence-of-characters>collect a sequence of characters<a class=self-link href=#dfn-collect-a-sequence-of-characters></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-space-character>space character<a class=self-link href=#dfn-space-character></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-split-a-string-on-spaces>split a string on spaces<a class=self-link href=#dfn-split-a-string-on-spaces></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-strip-leading-and-trailing-whitespace>strip leading and trailing whitespace<a class=self-link href=#dfn-strip-leading-and-trailing-whitespace></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-ascii-case-insensitive>ASCII-case insensitive<a class=self-link href=#dfn-ascii-case-insensitive></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-valid-non-negative-integer>valid non-negative integer<a class=self-link href=#dfn-valid-non-negative-integer></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-rules-for-parsing-non-negative-integers>rules for parsing non-negative integers<a class=self-link href=#dfn-rules-for-parsing-non-negative-integers></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-valid-floating-point-number>valid floating-point number<a class=self-link href=#dfn-valid-floating-point-number></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values<a class=self-link href=#dfn-rules-for-parsing-floating-point-number-values></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-valid-non-empty-url>valid non-empty URL<a class=self-link href=#dfn-valid-non-empty-url></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-update-the-image-data><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#update-the-image-data>update the image data</a><a class=self-link href=#dfn-update-the-image-data></a></dfn>,
<dfn data-dfn-type=dfn data-noexport="" id=dfn-valid-media-query><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-media-query>valid media query</a><a class=self-link href=#dfn-valid-media-query></a></dfn>,
and
<dfn data-dfn-type=dfn data-noexport="" id=dfn-current-pixel-density>current pixel density<a class=self-link href=#dfn-current-pixel-density></a></dfn>.</p>
<h2 class="heading settled heading" data-level=3 id=the-picture-element><span class=secno>3 </span><span class=content>
The <a data-link-type=element href=#elementdef-picture title=picture>picture</a> Element</span><a class=self-link href=#the-picture-element></a></h2>
<table class="definition elementdef"><tr><th>Name:<td><dfn data-dfn-type=element data-export="" id=elementdef-picture>picture<a class=self-link href=#elementdef-picture></a></dfn><tr><th>Categories:<td>Flow content, Phrasing content, Embedded content, Palpable content<tr><th>Contexts:<td>Where embedded content is expected<tr><th>Content model:<td>Zero or more <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> elements, followed by one <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element, optionally intermixed with script-supporting elements.<tr><th>Attributes:<td>Global attributes</table>
<p>The <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element is a container which provides multiples sources to its contained <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element,
allowing the displayed image to vary based on the density of the screen
or other environmental factors expressed as <a data-link-type=dfn href=http://www.w3.org/TR/mediaqueries-4/#media-query title="media queries">media queries</a>.</p>
<p class=note>Note: <a data-link-type=element href=#elementdef-picture title=picture>picture</a> is somewhat different from the similar-looking elements <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#video title=video>video</a> and <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#audio title=audio>audio</a>.
While all of them contain <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> elements,
the <a data-link-for=source data-link-type=element-attr title=src>src</a> attribute has no meaning when the element is nested within <a data-link-type=element href=#elementdef-picture title=picture>picture</a>,
and the resource selection algorithm is different.
As well,
the <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element itself does not display anything;
it merely provides a context for its contained <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a>
that enables it to choose from multiple source urls.</p>
<p>An <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element is associated with a <a data-link-type=dfn href=#source-set title="source set">source set</a>.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=source-set>source set<a class=self-link href=#source-set></a></dfn> is a set of zero or more <a data-link-type=dfn href=#image-source title="image sources">image sources</a>,
a <a data-link-type=dfn href=#source-size title="source size">source size</a>,
and optionally a <a data-link-type=dfn href=http://www.w3.org/TR/mediaqueries-4/#media-query title="media query">media query</a>.</p>
<p>An <dfn data-dfn-type=dfn data-export="" id=image-source>image source<a class=self-link href=#image-source></a></dfn> is a URL,
and optionally either a density descriptor,
or a width descriptor.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=source-size>source size<a class=self-link href=#source-size></a></dfn> is a <a class="production css-code" data-link-type=type href=#typedef-source-size-value title="<source-size-value>"><source-size-value></a>.
When a <a data-link-type=dfn href=#source-size title="source size">source size</a> has a unit relative to the viewport,
it must be interpreted relative to the <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element’s document’s viewport.
Other units must be interpreted the same as in media queries. <a data-biblio-type=normative data-link-type=biblio href=#biblio-mediaq title=biblio-mediaq>[MEDIAQ]</a></p>
<p>The <dfn data-dfn-type=dfn data-noexport="" id=relevant-mutations>relevant mutations<a class=self-link href=#relevant-mutations></a></dfn> for an <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element are as follows:</p>
<ul>
<li>
The element’s <a data-link-for=img data-link-type=element-attr title=src>src</a>,
<a data-link-for=img data-link-type=element-attr title=srcset>srcset</a> or
<a data-link-for=img data-link-type=element-attr href=#element-attrdef-sizes title=sizes>sizes</a> attributes are
set, changed, or removed.
<li>
The element’s <a data-link-for=img data-link-type=element-attr title=crossorigin>crossorigin</a> attribute’s state is changed.
<li>
The element is inserted into or removed from a
<a data-link-type=element href=#elementdef-picture title=picture>picture</a> parent element.
<li>
The element’s parent is a <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element
and a <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element is inserted as a
previous sibling.
<li>
The element’s parent is a <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element
and a <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element that was a previous
sibling is removed.
<li>
The element’s parent is a <a data-link-type=element href=#elementdef-picture title=picture>picture</a> element
and a <a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element title=source>source</a> element that is a previous
sibling has its <a data-link-for=source data-link-type=element-attr href=#element-attrdef-srcset title=srcset>srcset</a>,
<a data-link-for=source data-link-type=element-attr href=#element-attrdef-sizes0 title=sizes>sizes</a>,
<a data-link-for=source data-link-type=element-attr href=#element-attrdef-media title=media>media</a> or
<a data-link-for=source data-link-type=element-attr href=#element-attrdef-type title=type>type</a> attributes are
set, changed, or removed.
</ul>
<p class=note>Note: User agents are expected to have limits in how big images can be
rendered, which is allowed by HTML’s
<a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#hardwareLimitations>hardware limitations</a> clause. <a data-biblio-type=informative data-link-type=biblio href=#biblio-html title=biblio-html>[HTML]</a></p>
<h3 class="heading settled heading" data-level=3.1 id=algos><span class=secno>3.1 </span><span class=content>
Sub-Algorithms</span><a class=self-link href=#algos></a></h3>
<h4 class="heading settled heading" data-level=3.1.1 id=select-image-source><span class=secno>3.1.1 </span><span class=content>
Selecting an Image Source</span><a class=self-link href=#select-image-source></a></h4>
<div class="issue monkey-patch" id=issue-89de0bb6><a class=self-link href=#issue-89de0bb6></a>
In the HTML spec, in the algorithm <a data-link-type=dfn href=#dfn-update-the-image-data title="update the image data">update the image data</a>,
replace the whole step that calls "processing the image
candidates" with the following step:
<ol>
<li>
Let <var>selected source</var> and <var>selected
pixel density</var> be the URL and pixel density
that results from
<a data-link-type=dfn href=#select-an-image-source title="select an image source">selecting an image source</a>.
</ol>
<p>Also in the HTML spec, in the algorithm "The user agent may at
any time run the following algorithm to update an
<a data-link-type=element href=http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element title=img>img</a> element’s image in order to react to changes
in the environment.", make the following changes:</p>
<ul>
<li>
Remove "does not have a srcset attribute
specified,"
<li>
Replace "processing the image candidates" with