How to display images when you are not displaying images ======================================================== Version: 1.1 This spec explains how UAs may display images in various scenarios, such as when images are disabled, not yet downloaded or in the process of being downloaded. It does not discuss how images should be blocked or unblocked by the user, what the icons mentioned below should look like, nor how OBJECT, EMBED, APPLET and BGSOUND should work. This spec is merely a suggestion for good behaviour -- UAs may use different behaviour. This spec is intended to work with CSS; where CSS specifies incompatible behaviour, the CSS spec should be considered authoritative. Image Settings -------------- User agents following this specification may provide the following two alternative image rendering modes to the user (the exact text is obviously UA-dependent): (o) Always Load Images Always downloads and displays images used on web pages if the images are available, except images that have been blocked by the user (how to block images is out of the scope of this spec). ( ) Don't Load Images Does not download images and does not reserve room for them. Users can still cause important images to be displayed by right-clicking on their icon and selecting 'Show Image', or using some other UA-specific mechanism. Alt Texts --------- If the IMG or INPUT element has an 'alt' attribute, then the contents of that attribute should be used as the alternate text. Experience has shown that the src and title attributes are considerably less useful than would be first thought, and therefore we should ignore them when inventing the alternate text. Similarly with the 'name' and 'id' attributes that other specs suggest using. If there is no 'alt' attribute then for INPUT elements, the value attribute should be used, defaulting to the same string as a normal submit button. For IMG elements, the lack of an 'alt' attribute should cause the alternate text to be blank. Icons ----- Alternative text will be prefixed by an icon (as described below). The icon is chosen from the following list: For images that have not been downloaded, use a generic image or object icon. For images that are known to be unavailable, use the missing image or missing object icon. For images that are in a format not supported by the UA, an unknown format icon. For images that are corrupted, a broken image or broken object icon. In the next section, when referring to 'an icon', the icon should be chosen from the list above. UAs may use a different list or different criteria depending on their feature set. Placeholders ------------ If an image cannot or will not be shown, then: For images that are blocked, do nothing. (As if the element had 'display:none'.) For images that have not been downloaded but are about to be and that have 'height' and 'width' attributes set, in 'Always Load Images' mode, and for all images with 'height' and 'width' attributes when the document is in legacy (or 'quirks') mode: Create a borderless box with the height and width given (interpret the height and width attributes as pixel lengths). Insert an image icon inside the placeholder (regardless of the existence of any alternative text). If there is any alternative text, then insert it after the image icon in the placeholder frame. If the frame is too small for the icon and/or the alternative text then they will be clipped, just like with the CSS declaration 'overflow:hidden'. For ALL other cases (images not downloaded in 'Don't Load Images' mode, broken images, missing images, unrecognised images, and images with no 'height' and 'width' attributes): In CSS terms, make the IMG or INPUT be a non-replaced element. If there is any alternative text then insert an inline box containing an image icon inside the IMG or INPUT element. If there is any alternative text, then insert it after the image icon. These IMG and INPUT elements should be treated just like any other elements as far as style resolution is concerned. So for instance: foo ...would render as: foo The image-followed-by-alternative-text is equivalent to the pseudo-CSS3: 'content: url(icon) alternative-text;'. The icons should be relatively small so as not to disrupt most text but be easily clickable, for instance 16 pixels by 16 pixels square. The images are intended to indicate to the user that they can be used to get to whatever options the UA provides for images. The icon should have the context menu that would have come up if the user clicked on the image, had it been available. There should never be a sized placeholder frame for an image where the UA does not know the size. Note that broken images never take up their size as given in HTML, and if they are unimportant according to the author (i.e., alt='') then they will in fact not be shown at all. For these images, a "Page Info" feature is the only way of accessing the information. The alternative text should never be used in a tooltip (for this the 'title' attribute should be used). ======================================================================== Contributors: Ian Hickson Matthew Thomas Jesse Ruderman David Baron Christian Biesinger ========================================================================