forked from ResponsiveImagesCG/picture-element
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.bs
1195 lines (941 loc) · 46.5 KB
/
index.bs
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
<h1>The picture Element</h1>
<pre class='metadata'>
Group: ricg
Status: WD
ED: http://picture.responsiveimages.org/
Shortname: html-picture-element
Level: 1
Editor: Tab Atkins, Google, http://xanthir.com/contact/
Editor: Simon Pieters, Opera Software, [email protected]
Editor: Yoav Weiss, , http://blog.yoav.ws/
Editor: Marcos Cáceres, Mozilla
Editor: Mat Marquis, , http://matmarquis.com/
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.
!Version History: <a href="https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages">Commit History</a>
!Version History: <a href="https://twitter.com/respimg_commits">Github commits on Twitter</a>
!Participate: <a href="http://w3c.responsiveimages.org/">Join the Responsive Images Community Group</a>
!Participate: <a href="http://list.responsiveimages.org/">Public Mailing List</a>
!Participate: <a href="irc://irc.w3.org:6665/#respimg">IRC: #respimg on W3C's IRC</a>
!Participate: <a href="https://twitter.com/respimg">Twitter</a>
!Participate: <a href="https://github.com/ResponsiveImagesCG/picture-element">Github</a>
Ignored Terms: width, height, src, srcset, media, type, sizes, crossorigin
Link Defaults: html5 (element) source/video/audio/iframe
</pre>
<style>
[data-link-type=element] { font-family: monospace; }
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
</style>
<h2 id='intro'>
Introduction</h2>
This specification provides developers with a means to declare multiple versions of an image at different resolutions,
and, through [[!MEDIAQ]] (<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 element>picture</a> element to HTML,
and by enhancing the <a element>source</a> element to support specifying multiple source urls.
By relying on [[!MEDIAQ]], 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>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.
The <a element>picture</a> element remains backwards compatible with legacy user agents
(they will use the child <a element>img</a> element)
while offering the same accessibility options as the existing <a element>img</a> element.
<h3 id='when-to-use'>
When to use <code>picture</code></h3>
The <a element>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.
The <a element>picture</a> element is not a general replacement for the <a element>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 element>img</a> element,
rather than cluttering their page with additional unnecessary syntax.
<h3 id='examples'>
Examples of usage</h3>
<div class='example' id='example-1'>
This example shows a basic usage of the <a element>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>
In this example, the user agent will choose one of the three URLs--
“pic1x.jpg”, “pic2x.jpg”, or “pic4x.jpg”--
depending on whether the quality of the user’s screen
and perhaps other factors,
such as the user’s bandwidth.
It will then load the chosen URL in the <a element>img</a> element,
as if it were specified in the <a element-attr for="img">src</a> attribute.
For backwards compatibility with older user agents that don't yet understand the <a attribute for='img'>srcset</a> attribute,
one of the URLs is specified in the <a element>img</a> element’s <a element-attr>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.
</div>
<div class='example' id='example-2'>
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 element>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>
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 element>img</a> element.
</div>
<div class='example' id='example-3'>
Of course, one can use both multiple <a element>source</a> elements
<em>and</em> multiple sources within a single <a element>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>
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.
</div>
<div class='example' id='example-4'>
If the final size of the <a element>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 ''2x'' on a small ''320px''-wide phone,
approximately ''1x'' on a larger tablet display,
and less than ''1x'' on a large desktop monitor.
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 element>img</a> element.
The user agent will then automatically calculate the effective pixel density of the image
and choose which one to download accordingly.
<pre>
<img sizes="100vw" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"
src="pic400.jpg" alt="The president giving an award.">
</pre>
In this example, the image source is provided at three sizes--
400 pixels wide, 800 pixels wide, and 1600 pixels wide.
As well, it declares that the <a element>img</a> element is intrinsically sized to be as wide as the entire viewport.
If the user's device is ''320px'' wide,
this is equivalent to specifying ''pic400.jpg 1.25x, pic800.jpg 2.5x, pic1600.jpg 5x''.
On the other hand,
if the user's device is ''1200px'' wide,
this is equivalent to specifying ''pic400.jpg .33x, pic800.jpg .67x, pic1600.jpg 1.33x''.
With this information,
the user agent can choose the correct image source to download
regardless of how large the user's device is.
In this example, the <a attribute for='img'>sizes</a> attribute could be omitted
because the default value is ''100vw''.
</div>
<div class='example' id='example-5'>
The previous example showed how to deal with the <a element>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.
For example, say your site had three basic layouts:
<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>
Assuming that the same image is supposed to be used at all of these layouts
(that is, you aren't doing <a>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:
<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>
The <a element-attr for="source">sizes</a> attribute sets up the layout breakpoints at ''30em'' and ''50em'',
and declares the image sizes between these breakpoints to be ''100vw'', ''50vw'', or ''calc(33vw - 100px)''.
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.
Specifying this information with multiple <a element>source</a> elements,
one for each of the <a>media queries</a>,
is possible, but much more verbose,
as the <a element-attr for="source">srcset</a> attributes have to be duplicated for each of them.
</div>
<div class='example' id='example-6'>
This example shows how <a element>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'>
The <a element-attr>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>
In this example, the user agent will choose the first source that has a
<a element-attr>type</a> attribute with a supported MIME type. If the
user agent supports WebP images, the first <a element>source</a> element
will be chosen. If not, but the user agent does support JPEG XR images,
the second <a element>source</a> element will be chosen. If neither of
those formats are supported, the <a element>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.
</div>
<h3 id='relationship-to-srcset'>
Relationship to <code>srcset</code></h3>
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.
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.
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>).
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 [[!respimg-usecases]]).
<h2 id='defs'>
Definitions</h2>
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.
The following terms are defined by the [[!HTML]] specification:
<dfn id="dfn-skip-whitespace">skip whitespace</dfn>,
<dfn id="dfn-resolve">resolve</dfn>,
<dfn id="dfn-last-selected-source">last selected source</dfn>,
<dfn id="dfn-collect-a-sequence-of-characters">collect a sequence of characters</dfn>,
<dfn id="dfn-space-character">space character</dfn>,
<dfn id="dfn-split-a-string-on-spaces">split a string on spaces</dfn>,
<dfn id="dfn-strip-leading-and-trailing-whitespace">strip leading and trailing whitespace</dfn>,
<dfn id="dfn-ascii-case-insensitive">ASCII-case insensitive</dfn>,
<dfn id="dfn-valid-non-negative-integer">valid non-negative integer</dfn>,
<dfn id="dfn-rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</dfn>,
<dfn id="dfn-valid-floating-point-number">valid floating-point number</dfn>,
<dfn id="dfn-rules-for-parsing-floating-point-number-values">rules for parsing floating-point number values</dfn>,
<dfn id="dfn-valid-non-empty-url">valid non-empty URL</dfn>,
<dfn 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></dfn>,
<dfn 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></dfn>,
and
<dfn id="dfn-current-pixel-density">current pixel density</dfn>.
<h2 id='the-picture-element'>
The <a element>picture</a> Element</h2>
<pre class='elementdef'>
Name: picture
Categories: Flow content, Phrasing content, Embedded content, Palpable content
Contexts: Where embedded content is expected
Content Model: Zero or more <a element>source</a> elements, followed by one <a element>img</a> element, optionally intermixed with script-supporting elements.
Attributes: Global attributes
</pre>
The <a element>picture</a> element is a container which provides multiples sources to its contained <a element>img</a> element,
allowing the displayed image to vary based on the density of the screen
or other environmental factors expressed as <a>media queries</a>.
Note: <a element>picture</a> is somewhat different from the similar-looking elements <a element>video</a> and <a element>audio</a>.
While all of them contain <a element>source</a> elements,
the <a element-attr for="source">src</a> attribute has no meaning when the element is nested within <a element>picture</a>,
and the resource selection algorithm is different.
As well,
the <a element>picture</a> element itself does not display anything;
it merely provides a context for its contained <a element>img</a>
that enables it to choose from multiple source urls.
An <a element>img</a> element is associated with a <a>source set</a>.
A <dfn export>source set</dfn> is a set of zero or more <a>image sources</a>,
a <a>source size</a>,
and optionally a <a>media query</a>.
An <dfn export>image source</dfn> is a URL,
and optionally either a density descriptor,
or a width descriptor.
A <dfn export>source size</dfn> is a <<source-size-value>>.
When a <a>source size</a> has a unit relative to the viewport,
it must be interpreted relative to the <a element>img</a> element's document's viewport.
Other units must be interpreted the same as in media queries. [[!MEDIAQ]]
The <dfn>relevant mutations</dfn> for an <a element>img</a> element are as follows:
<ul>
<li>
The element's <a element-attr for="img">src</a>,
<a element-attr for="img">srcset</a> or
<a element-attr for="img">sizes</a> attributes are
set, changed, or removed.
<li>
The element's <a element-attr for="img">crossorigin</a> attribute's state is changed.
<li>
The element is inserted into or removed from a
<a element>picture</a> parent element.
<li>
The element's parent is a <a element>picture</a> element
and a <a element>source</a> element is inserted as a
previous sibling.
<li>
The element's parent is a <a element>picture</a> element
and a <a element>source</a> element that was a previous
sibling is removed.
<li>
The element's parent is a <a element>picture</a> element
and a <a element>source</a> element that is a previous
sibling has its <a element-attr for="source">srcset</a>,
<a element-attr for="source">sizes</a>,
<a element-attr for="source">media</a> or
<a element-attr for="source">type</a> attributes are
set, changed, or removed.
</ul>
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. [[HTML]]
<h3 id='algos'>
Sub-Algorithms</h3>
<h4 id='select-image-source'>
Selecting an Image Source</h4>
<div class='issue monkey-patch'>
In the HTML spec, in the algorithm <a>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 title="select an image source">selecting an image source</a>.
</ol>
Also in the HTML spec, in the algorithm "The user agent may at
any time run the following algorithm to update an
<a element>img</a> element's image in order to react to changes
in the environment.", make the following changes:
<ul>
<li>
Remove "does not have a srcset attribute
specified,"
<li>
Replace "processing the image candidates" with
"<a title="select an image source">selecting an
image source</a>".
<li>
Replace "If the img element's src, srcset, or
crossorigin attributes have been set, changed,
or removed" with "If the <a element>img</a>
element has experienced <a>relevant mutations</a>"
</ul>
While at it, do the following changes elsewhere in the HTML spec:
<ul>
<li>
Replace "A user agent that obtains images
immediately must also synchronously update the
image data of an img element whenever that
element has its src, srcset, or crossorigin
attribute set, changed, or removed." with "A
user agent that obtains images immediately must
also synchronously <a>update the image data</a>
of an <a element>img</a> element whenever that
element experiences <a>relevant mutations</a>."
<li>
Replace "A user agent that obtains images on
demand must update the image data of an img
element whenever it needs the image data (i.e.
on demand), but only if the img element has a
src or srcset attribute, and only if the img
element is in the unavailable state. When an img
element's src, srcset, or crossorigin attribute
set, changed, or removed, if the user agent only
obtains images on demand, the img element must
return to the unavailable state." with "A user
agent that obtains images on demand must
<a>update the image data</a> of an
<a element>img</a> element whenever it needs the
image data (i.e. on demand), but only if the img
element is in the unavailable state. When an
<a element>img</a> element experiences
<a>relevant mutations</a>, if the user agent
only obtains images on demand, the
<a element>img</a> element must return to the
unavailable state."
</ul>
</div>
When asked to <dfn>select an image source</dfn> for a given <a element>img</a> element <var>el</var>,
user agents must do the following:
<ol>
<li>
<a>Update the source set</a> for <var>el</var>.
<li>
If <var>el</var>’s <a>source set</a> is empty,
return null as the URL and undefined as the pixel density and abort these steps.
<li>
Otherwise,
take <var>el</var>’s <a>source set</a>
and let it be <var>source set</var>.
<li>
In a UA-specific manner,
choose one <a>image source</a> from <var>source set</var>.
Let this be <var>selected source</var>.
<li>
Return <var>selected source</var> and its associated pixel density.
</ol>
<h4 id='update-source-set'>
Updating the Source Set</h4>
When asked to <dfn>update the source set</dfn> for a given <a element>img</a> element <var>el</var>,
user agents must do the following:
<ol>
<li>
Initially set <var>el</var>’s <a>source set</a> to an empty <a>source set</a>.
<li>
If <var>el</var> has a parent node and that is a <a element>picture</a> element,
let <var>elements</var> be an array containing <var>el</var>’s parent node's child elements, retaining relative order.
Otherwise, let <var>elements</var> be array containing only <var>el</var>.
<li>
Iterate through <var>elements</var>,
doing the following for each item <var>child</var>:
<ol>
<li>
If <var>child</var> is <var>el</var>:
<ol>
<li>
If <var>child</var> has a <a element-attr for="img">srcset</a> attribute,
<a title="parse a srcset attribute">parse <var>child</var>’s srcset attribute</a>
and let the returned <a>source set</a> be <var>source set</var>.
Otherwise,
let <var>source set</var> be an empty <a>source set</a>.
<li>
<a title="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</a> and
and let <var>source set</var>’s <a>source size</a> be the returned value.
<li>
If <var>child</var> has a <a element-attr for="img">src</a> attribute and <var>source set</var> does not contain an
<a>image source</a> with a density descriptor value of 1,
and no <a>image source</a> with a width descriptor,
append the <var>child</var>'s src attribute value to the <a>source set</a>.
<li>
Set the returned <a>source set</a> to be <var>el</var>'s <a>source set</a>.
<li>
Exit the "Updating the Source Set" algorithm.
</ol>
<li>
If <var>child</var> is not a <a element>source</a> element,
continue to the next child.
Otherwise, <var>child</var> is a <a element>source</a> element.
<li>
If <var>child</var> does not have a <a element-attr for="source">srcset</a> attribute,
continue to the next child.
<li>
<a title="parse a srcset attribute">Parse <var>child</var>’s srcset attribute</a> and
let the returned <a>source set</a> be <var>source set</var>.
<li>
If <var>source set</var> has zero <a>image sources</a>,
continue to the next child.
<li>
If <var>child</var> has a <a element-attr for="source">media</a> attribute,
and its value is a <a>valid media query</a> which evaluates to true,
attach the <a>media query</a> to <var>source set</var>.
If its value is not a <a>valid media query</a>,
or is a <a>valid media query</a> that evaluates to false,
continue to the next child.
<li>
<a title="parse its sizes attribute">Parse <var>child</var>'s sizes attribute</a>
and let <var>source set</var>’s <a>source size</a> be the returned value.
<li>
If <var>child</var> has a <a element-attr for="source">type</a> attribute,
and its value is an unknown or unsupported MIME type,
continue to the next child.
<li>
<a>Normalize the source densities</a> of <var>source set</var>.
<li>
Set <a>source set</a> to be <var>el</var>'s <a>source set</a>.
<li>
Exit the "Updating the Source Set" algorithm.
</ol>
</ol>
<p class='note'>
Each <a element>img</a> element independently considers its previous sibling <a element>source</a> elements plus the <a element>img</a> element itself
for selecting an image source, ignoring any other (invalid) elements,
including other <a element>img</a> elements in the same <a element>picture</a> element,
or <a element>source</a> elements that are following siblings of the relevant <a element>img</a> element.
<h4 id='parse-srcset-attr'>
Parsing a <code>srcset</code> Attribute</h4>
When asked to <dfn title="parse a srcset attribute|parse its srcset attribute">parse a srcset attribute</dfn> from an element,
parse the value of the element's <code>srcset</code> attribute as follows:
<ol>
<li>
Let <var>input</var> be the value passed to this
algorithm.
<li>
Let <var>position</var> be a pointer into
<var>input</var>, initially pointing at the start of the
string.
<li>
Let <var>raw candidates</var> be an initially empty
ordered list of URLs with associated unparsed
descriptor list. The order of entries in the lists is the
order in which entries are added to the lists.
<li>
<i title>Splitting loop</i>: <a>Collect a sequence of characters</a> that are
<a>space characters</a> or U+002C COMMA characters.
<li>
If <var>position</var> is past the end of
<var>input</var>, then jump to the step labeled
<i title>descriptor parser</i>.
<li>
<a>Collect a sequence of characters</a> that are not
<a>space characters</a>, and let that be <var>url</var>.
<li>
Let <var>descriptors</var> be a new empty list.
<li>
If <var>url</var> ends with a U+002C COMMA character
(,), follow these substeps:
<ol>
<li>
Remove all trailing U+002C COMMA characters from <var>url</var>.
<li>
If <var>url</var> is empty, then jump to
the step labeled <i title>splitting loop</i>.
</ol>
Otherwise,
follow these substeps:
<ol>
<li>
Let <var>current token</var> be the empty string.
<li>
Let <var>state</var> be <i title>start</i>.
<li>
Let <var>c</var> be the character at <var>position</var>.
Do the following depending on the value of <var>state</var>. For the purpose of this step,
"EOF" is a special character representing that <var>position</var> is past the end of <var>input</var>.
<dl class="switch">
<dt><i title>Start</i>
<dd>
Do the following, depending on the value of <var>c</var>:
<dl class="switch">
<dt><a>Space character</a>
<dd>
If <var>current token</var> is not empty,
append <var>current token</var> to <var>descriptors</var>
and let <var>current token</var> be the empty string.
Set <var>state</var> to <i title>after token</i>.
<dt>U+002C COMMA (,)
<dd>
Advance <var>position</var> to the next character in <var>input</var>.
If <var>current token</var> is not empty,
append <var>current token</var> to <var>descriptors</var>.
Jump to the step labeled <i title>add candidate</i>.
<dt>U+0028 LEFT PARANTHESIS (()
<dd>
Append <var>c</var> to <var>current token</var>.
Set <var>state</var> to <i title>in parens</i>.
<dt>EOF
<dd>
If <var>current token</var> is not empty,
append <var>current token</var> to <var>descriptors</var>.
Jump to the step labeled <i title>add candidate</i>.
<dt>Anything else
<dd>
Append <var>c</var> to <var>current token</var>.
</dl>
<dt><i title>In parens</i>
<dd>
Do the following, depending on the value of <var>c</var>:
<dl class="switch">
<dt>U+0029 RIGHT PARENTHESIS ())
<dd>
Append <var>c</var> to <var>current token</var>.
Set <var>state</var> to <i title>start</i>.
<dt>EOF
<dd>
Append <var>current token</var> to <var>descriptors</var>.
Jump to the step labeled <i title>add candidate</i>.
<dt>Anything else
<dd>
Append <var>c</var> to <var>current token</var>.
</dl>
</dd>
<dt><i title>After token</i>
<dd>
Do the following, depending on the value of <var>c</var>:
<dl class="switch">
<dt><a>Space character</a>
<dd>
Stay in this state.
<dt>EOF
<dd>
Jump to the step labeled <i title>add candidate</i>.
<dt>Anything else
<dd>
Set <var>state</var> to <i title>start</i>.
Set <var>position</var> to the <em>previous</em> character in <var>input</var>.
</dl>
</dd>
</dl>
Advance <var>position</var> to the next character in <var>input</var>.
Repeat this step.
</ol>
<li>
<i title>Add candidate</i>: Add <var>url</var> to <var>raw candidates</var>,
associated with <var>descriptors</var>.
<li>
Return to the step labeled <i title>splitting loop</i>.
<li>
<i title>Descriptor parser</i>: Let
<var>candidates</var> be an initially empty <a>source
set</a>. The order of entries in the list is the order
in which entries are added to the list.
<li>
For each entry in <var>raw candidates</var> with URL
<var>url</var> associated with the unparsed descriptor list
<var>descriptor list</var>, run these substeps:
<ol>
<li>
Let <var>error</var> be no.
<li>
Let <var>width</var> be
<i title>absent</i>.
<li>
Let <var>density</var> be
<i title>absent</i>.
<li>
Let <var>future-compat-h</var> be
<i title>absent</i>.
<li>
For each token in <var>descriptor
list</var>, run the appropriate set of
steps from the following list:
<dl class=switch>
<dt>If the token consists of a <a>valid non-negative integer</a>
followed by a "w" (U+0077 LATIN SMALL LETTER W) character
<dd>
<ol>
<li>
If <var>width</var> and <var>density</var> are not both <i title>absent</i>, then
let <var>error</var> be <i title>yes</i>.
<li>
Apply the <a>rules for parsing non-negative integers</a> to the token.
If the result is zero, let <var>error</var> be <i title>yes</i>.
Otherwise, let <var>width</var> be the result.
</ol>
<dt>If the token consists of a
<a>valid floating-point
number</a> followed by a U+0078
LATIN SMALL LETTER X character
<dd>
<ol>
<li>
If <var>width</var>, <var>density</var> and <var>future-compat-h</var> are not all <i title>absent</i>, then
let <var>error</var> be <i title>yes</i>.
<li>
Apply the <a>rules for parsing floating-point number values</a> to the token.
If the result is less than zero, let <var>error</var> be <i title>yes</i>.
Otherwise, let <var>density</var> be the result.
</ol>
<dt>If the token consists of a <a>valid non-negative integer</a>
followed by a "h" (U+0068 LATIN SMALL LETTER H) character
<dd>
<ol>
<li>
If <var>future-compat-h</var> and <var>density</var> are not both <i title>absent</i>, then
let <var>error</var> be <i title>yes</i>.
<li>
Apply the <a>rules for parsing non-negative integers</a> to the token.
If the result is zero, let <var>error</var> be <i title>yes</i>.
Otherwise, let <var>future-compat-h</var> be the result.
</ol>
</dl>
<li>
If <var>error</var> is still
<i title>no</i>, then add a new <a>image
source</a> to <var>candidates</var>
whose URL is <var>url</var>, associated
with a width <var>width</var> if not
<i title>absent</i> and a pixel density
<var>density</var> if not
<i title>absent</i>.
</ol>
<li>
Return <var>candidates</var>.
</ol>
An <dfn>image candidate string</dfn> consists of the following
components, in order:
<ol>
<li>
Zero or more <a>space characters</a>.
<li>
A <a>valid non-empty URL</a> that does not start or end with a
U+002C COMMA character (,), referencing a
non-interactive, optionally animated, image resource
that is neither paged nor scripted.
<li>
Zero or more <a>space characters</a>.
<li>
Zero or one of the following:
<ul>
<li>
A <i title>width descriptor</i>,
consisting of: a <a>space character</a>,
a <a>valid non-negative integer</a>
giving a number greater than zero
representing the <i title>width
descriptor</i> value, and a U+0077
LATIN SMALL LETTER W character.
<li>
A <i title>pixel density descriptor</i>,
consisting of: a <a>space character</a>,
a <a>valid floating-point number</a>
giving a number greater than zero
representing the <i title>pixel density
descriptor</i> value, and a U+0078
LATIN SMALL LETTER X character.
</ul>
<li>
Zero or more <a>space characters</a>.
</ol>
There must not be an <a>image candidate string</a> for an element that
has the same <i title>width descriptor</i> value as another
<a>image candidate string</a>'s <i title>width descriptor</i> value for the same element.
There must not be an <a>image candidate string</a> for an element that
has the same <i title>pixel density descriptor</i> value as another
<a>image candidate string</a>'s <i title>pixel density descriptor</i> value for the same element.
For the purpose of this requirement,
an <a>image candidate string</a> with no descriptors is equivalent to an <a>image candidate string</a> with a ''1x'' descriptor.
If the <a element>source</a> or <a element>img</a> element has a
sizes attribute present, all <a>image candidate strings</a> for that
element must have the <i title>width descriptor</i> specified.
If an <a>image candidate string</a> for an <a element>source</a> or <a element>img</a> element
has the <i title>width descriptor</i> specified,
all other <a>image candidate strings</a> for that element
must also have the <i title>width descriptor</i> specified.
The specified width in an <a>image candidate string</a>'s <i title>width descriptor</i>
must match the intrinsic width in the resource given by the <a>image candidate string</a>'s URL.
<h4 id='parse-sizes-attr'>
Parsing a <code>sizes</code> Attribute</h4>
When asked to <dfn title="parse a sizes attribute|parse its sizes attribute">parse a sizes attribute</dfn> from an element,
<a>parse a comma-separated list of component values</a> from the value of the element's <a element-attr title>sizes</a> attribute
(or the empty string, if the attribute is absent),
and let <var>unparsed sizes list</var> be the result.
For each <var>unparsed size</var> in <var>unparsed sizes list</var>:
<ol>
<li>
Remove all consecutive <<whitespace-token>>s
from the end of <var>unparsed size</var>.
If <var>unparsed size</var> is now empty,
continue to the next iteration of this algorithm.
<li>
If the last <a>component value</a> in <var>unparsed size</var>
is a valid non-negative <<source-size-value>>,
let <var>size</var> be its value
and remove the <a>component value</a> from <var>unparsed size</var>.
Otherwise,
continue to the next iteration of this algorithm.
<li>
Remove all consecutive <<whitespace-token>>s
from the end of <var>unparsed size</var>.
If <var>unparsed size</var> is now empty,
return <var>size</var> and exit this algorithm.
<li>
Parse the remaining <a>component values</a> in <var>unparsed size</var>
as a <<media-condition>>.
If it does not parse correctly,
or it does parse correctly but the <<media-condition>> evaluates to false,
continue to the next iteration of this algorithm.
<li>
Return <var>size</var> and exit this algorithm.
</ol>
If the above algorithm exhausts <var>unparsed sizes list</var> without returning a <var>size</var> value,
return ''100vw''.
A <dfn export>valid source size list</dfn> is a string that matches the following grammar: [[!CSS3VAL]]
<pre>
<dfn><source-size-list></dfn> = <<source-size>># [ , <<source-size-value>> ]? | <<source-size-value>>
<dfn><source-size></dfn> = <<media-condition>> <<source-size-value>>
<dfn><source-size-value></dfn> = <<length>>
</pre>
A <<source-size-value>> must not be negative.
Note: While a <a>valid source size list</a> only contains a bare <<source-size-value>>
(without an accompanying <<media-condition>>)
as the last entry in the <<source-size-list>>,
the parsing algorithm technically allows such at any point in the list,
and will accept it immediately as the size
if the preceding entries in the list weren't used.
This is to enable future extensions,
and protect against simple author errors such as a final trailing comma.
<h4 id='normalize-source-densities'>
Normalizing the Source Densities</h4>
An <a>image source</a> can have a density descriptor,
a width descriptor,
or no descriptor at all accompanying its URL.
Normalizing a <a>source set</a> gives every <a>image source</a> a density descriptor.