Initial work on comparitive list of use cases.

UseCaseComparisons.md

@@ -0,0 +1,132 @@
+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.
+
+## Viewport Sizes
+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.
+
+**`picture` Element*
+<picture>
+    <source media="max-width: 400px" src="image1.jpg">
+    <source media="max-width: 600px" src="image2.jpg">
+    <source media="max-width: 800px" src="image3.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">
+
+
+### Using min-width ###
+Assuming three image “breakpoints” intended to remain in sync with a media-query-based CSS layout making use of `min-width` media queries.
+
+**`picture` Element**
+<picture>
+    <source media="max-width: 400px" src="image1.jpg">
+    <source media="max-width: 600px" src="image2.jpg">
+    <source media="max-width: 800px" src="image3.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+N/A
+
+
+### Using relative units ###
+Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units.
+
+**`picture` Element**
+<picture>
+    <source media="max-width: 20em" src="image1.jpg">
+    <source media="max-width: 40em" src="image2.jpg">
+    <source media="max-width: 60em" src="image3.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+N/A
+
+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:
+
+<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">
+
+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.
+
+## Portait vs. Landscape Orientation ##
+[ … ]
+
+**`picture` Element**
+<picture>
+    <source media="device-orientation: portrait" src="image1.jpg">
+    <source media="device-orientation: landscape" src="image2.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+N/A
+
+
+## Display Density
+The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case above:
+
+<img src="image1.jpg" srcset="image2.jpg 2x">
+
+
+## Display density in conjunction with viewport sizing ##
+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.
+
+**`picture` Element**
+<picture>
+    <source media="max-width: 400px" srcset="image1.jpg, image1-hd.jpg 2x">
+    <source media="max-width: 600px" srcset="image2.jpg, image2-hd.jpg 2x">
+    <source media="max-width: 800px" srcset="image3.jpg, image3-hd.jpg 2x">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+<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="">
+
+
+## Print sources
+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.
+
+**`picture` Element**
+<picture>
+    <source media="(screen and min-width: 20em)" srcset="image1.jpg, image1-hd.jpg 2x">
+    <source media="(screen and min-width: 40em)" srcset="image2.jpg, image2-hd.jpg 2x">
+    <source media="print" src="image3.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+N/A
+
+## Color saturation/high-contrast mode
+This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG.
+
+**`picture` Element**
+<picture>
+    <source media="" srcset="image1.jpg">
+    <source media="" srcset="image2.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+N/A
+
+
+## Potential for addressing bandwidth concerns
+
+
+## Potential for future accessibility improvements
+
+
+## Potential for addressing new image formats
+
+**`picture` Element**
+<picture>
+    <source media="image2.webp" type="image/webp">
+    <source media="image1.jpg">
+    <img src="image1.jpg" alt="">
+</picture>
+
+**Extended `srcset`**
+