Warning:
This wiki has been archived and is now read-only.
Fluid Images
Contents
Working Draft
This document is dedicated to the Public Domain to the extent possible, and is developed under the terms of the W3C Community Contributor License Agreement (CLA). All ideas are contributed to public knowledge and no patent claims are made over them and in the event that the contributors do make patent claims they grant a royalty free license to everyone for anything and forever.
Goals
One approach to adapting image content to suit a range of devices is to vary the images within a webpage, in contrast to using separate webpages, and this document explores client-size selection of images, in contrast to server side adaptation.
This area is of relevance to the PUA CG because a client-side solution helps minimize the amount of device state that needs to be shared with the server, in contrast to a server-size solution which requires client state to be shared with the server. Further, client side selection can offer the user useful choice and help mask actual device characteristics. Competing server-size proposals, such as the HTTP Clint Hints specification are being developed and the PUA CG needs to have a technologically superior alternative. Supporting fluid image selection in HTML rather than in Javascript makes the feature accessible to users who disable Javascript for security and privacy reasons and integrating important use pattens into HTML to avoid Javascript is a general direction of the PUA CG - even a standard polyfill is better than a multitude of solutions because it can be practically whitelisted.
A broad range of use cases and requirements for fluid images are documented, along with the information needed to support these use cases and requirements, and markup options are proposed. This contrasts with the srcset and picture element specifications which limit their scope to using only media features to select images, and the srcset specification has a very restricted syntax and conflates art-direction and resolution. A choice of syntax have been a cause of conflict when trying to reach consensus on a standard, and it is noted that the picture element specification using general media queries largely subsumes the srcset specification, so this document splits the information required to support use cases from the syntax options for communicating this information.
It is hoped that this work will help browser vendors when considering support for fluid images and assist the emergence of a standard.
Relation to other work
The srcset attribute
The HTML WG srcset attribute specification is based on the WHATWG srcset img element specification and defines the 'srcset' attribute that includes a set of images each with optional viewport width and height and pixel density values that are used to select an image based on media features.
The support for UA choice over the selected image is minimal and does not support any user or UA choice over the images well - such use could just as well be ignored. The UA is permitted to override the default image selection algorithm to make a choice. The assumption appears to be that the UA could choose an image in a useful way by varying the media feature inputs to the decision rules, but this would only be the case if the media feature based rules were constrained to be related to properties of the images but there are no such constrains specified and they are not trivially obvious. Further, the specification does not require the images to be simple scaled versions of the same image so an alternative image could have completely different content or even have a different height to width ratio and change the layout. The specification gives the example "For example, it would allow the user agent in highly bandwidth-constrained conditions to intentionally opt to use an image intended for a smaller screen size, on the assumption that it'll probably be good enough." however an author may have reasonably chosen to use a larger image on a smaller screen as the layout may change so such a choice is not in general useful.
The srcset syntax conflates the art-direction and image resolution use cases which makes it impossible for the UA to separate images into these classes. A UA can not identify a set of images that differ only by their resolution which is a requirement to have useful choice over the image resolution.
The proponents of the srcset specification appear to prefer the terse syntax and consider it easier to work with from scripts.
One of the benefits of using only the media features to select the images is that a choice can be made pre-layout, and the proponents appear to consider this critical and discount other designs on the basis. While this is generally true, there are many cases in which it is not. For example, if the user wants to use the lowest or highest resolution images then there is only one choice and a decision could be made pre-layout - but this is not supported. Further there are a lot of use cases post-layout that might be better and more simply supported by just knowing the images sizes.
The picture element
The RICG's The picture element specification supports using media queries and srcset media feature based rules to select between alternative images. Support for media queries alone would appear to subsume the use cases for the srcset specification.
The media queries are intended to be followed by the UA when selecting an image and no UA choice is supported based on these. The specification notes that the srcset rules are hints and that the UA may choose an alternative image within the srcset. Choice based on the srcset has all the problems and limitations noted above.
The proponents suggest that the art-direction use cases be handled by the media queries and that resolution selection be handled by the srcset element which could potentially avoid the conflation of these and better support UA choice. However it does not constrain the srcset element to just a resolution choice, does not define a relationship between the srcset density descriptors and the actual image properties, does not constrain the set of images to differ only by resolution, and even if it did all of these it would still not support many UA choice use cases such as selecting the smallest image that gives sharp presentation because the image sizes are undefined.
Since this specification selects images based on media features it shares most of the use case limitations of the srcset proposal. Even though the media query syntax is more expressive than the srcset syntax this proposal appears to have been rejected by WHATWG as being unworkable due to the verbosity of the syntax and complexity of script access.