diff --git a/UseCaseComparisons.md b/UseCaseComparisons.md new file mode 100644 index 00000000..dd5825b3 --- /dev/null +++ b/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* + + + + + + + +**Extended `srcset`** + + + +### 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** + + + + + + + +**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** + + + + + + + +**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: + + + +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** + + + + + + +**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: + + + + +## 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** + + + + + + + +**Extended `srcset`** + + + +## 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** + + + + + + + +**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** + + + + + + +**Extended `srcset`** +N/A + + +## Potential for addressing bandwidth concerns + + +## Potential for future accessibility improvements + + +## Potential for addressing new image formats + +**`picture` Element** + + + + + + +**Extended `srcset`** +