Skip to content

Commit ee7469b

Browse files
WiltoWilto
committed
Initial work on comparitive list of use cases.
1 parent d40bab2 commit ee7469b

File tree

1 file changed

+132
-0
lines changed

1 file changed

+132
-0
lines changed

‎UseCaseComparisons.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
This document is indended to address the use cases addressed by both the `picture` proposal (including `srcset` limited to resolution-switching only), and the extended `srcset` proposal.
2+
3+
## Viewport Sizes
4+
Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest image source has been designated as fallback content.
5+
6+
**`picture` Element*
7+
<picture>
8+
<source media="max-width: 400px" src="image1.jpg">
9+
<source media="max-width: 600px" src="image2.jpg">
10+
<source media="max-width: 800px" src="image3.jpg">
11+
<img src="image1.jpg" alt="">
12+
</picture>
13+
14+
**Extended `srcset`**
15+
<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">
16+
17+
18+
### Using min-width ###
19+
Assuming three image “breakpoints” intended to remain in sync with a media-query-based CSS layout making use of `min-width` media queries.
20+
21+
**`picture` Element**
22+
<picture>
23+
<source media="max-width: 400px" src="image1.jpg">
24+
<source media="max-width: 600px" src="image2.jpg">
25+
<source media="max-width: 800px" src="image3.jpg">
26+
<img src="image1.jpg" alt="">
27+
</picture>
28+
29+
**Extended `srcset`**
30+
N/A
31+
32+
33+
### Using relative units ###
34+
Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units.
35+
36+
**`picture` Element**
37+
<picture>
38+
<source media="max-width: 20em" src="image1.jpg">
39+
<source media="max-width: 40em" src="image2.jpg">
40+
<source media="max-width: 60em" src="image3.jpg">
41+
<img src="image1.jpg" alt="">
42+
</picture>
43+
44+
**Extended `srcset`**
45+
N/A
46+
47+
Note: the `em` values above could be manually converted to `px` by the author to ensure that the image breakpoints are within a few pixels of the `em`-based layout media queries, resulting in:
48+
49+
<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">
50+
51+
While the `em`-based CSS layout will be reevaulated based on user zoom in all modern browsers (see http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ for a description and functional example) and we can assume the same for the `em`-based image breakpoints, the `px`-based image breakpoints will fall out of sync with the layout when the user zooms in or out.
52+
53+
## Portait vs. Landscape Orientation ##
54+
[ … ]
55+
56+
**`picture` Element**
57+
<picture>
58+
<source media="device-orientation: portrait" src="image1.jpg">
59+
<source media="device-orientation: landscape" src="image2.jpg">
60+
<img src="image1.jpg" alt="">
61+
</picture>
62+
63+
**Extended `srcset`**
64+
N/A
65+
66+
67+
## Display Density
68+
The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case above:
69+
70+
<img src="image1.jpg" srcset="image2.jpg 2x">
71+
72+
73+
## Display density in conjunction with viewport sizing ##
74+
Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest standard resolution image source has been designated as fallback content.
75+
76+
**`picture` Element**
77+
<picture>
78+
<source media="max-width: 400px" srcset="image1.jpg, image1-hd.jpg 2x">
79+
<source media="max-width: 600px" srcset="image2.jpg, image2-hd.jpg 2x">
80+
<source media="max-width: 800px" srcset="image3.jpg, image3-hd.jpg 2x">
81+
<img src="image1.jpg" alt="">
82+
</picture>
83+
84+
**Extended `srcset`**
85+
<img src="image1.jpg" srcset="image1.jpg 400w, image1-hd.jpg 400w 2x, image2.jpg 600w, image2-hd.jpg 600w 2x, image3.jpg 800w, image3-hd.jpg 800w 2x" alt="">
86+
87+
88+
## Print sources
89+
Assuming two image sources indended for display on screen depending on window size, each with a standard and high-definition source, and a single image source intended for printing.
90+
91+
**`picture` Element**
92+
<picture>
93+
<source media="(screen and min-width: 20em)" srcset="image1.jpg, image1-hd.jpg 2x">
94+
<source media="(screen and min-width: 40em)" srcset="image2.jpg, image2-hd.jpg 2x">
95+
<source media="print" src="image3.jpg">
96+
<img src="image1.jpg" alt="">
97+
</picture>
98+
99+
**Extended `srcset`**
100+
N/A
101+
102+
## Color saturation/high-contrast mode
103+
This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG.
104+
105+
**`picture` Element**
106+
<picture>
107+
<source media="" srcset="image1.jpg">
108+
<source media="" srcset="image2.jpg">
109+
<img src="image1.jpg" alt="">
110+
</picture>
111+
112+
**Extended `srcset`**
113+
N/A
114+
115+
116+
## Potential for addressing bandwidth concerns
117+
118+
119+
## Potential for future accessibility improvements
120+
121+
122+
## Potential for addressing new image formats
123+
124+
**`picture` Element**
125+
<picture>
126+
<source media="image2.webp" type="image/webp">
127+
<source media="image1.jpg">
128+
<img src="image1.jpg" alt="">
129+
</picture>
130+
131+
**Extended `srcset`**
132+

0 commit comments

Comments
 (0)