How to display images when you are not displaying images ======================================================== Version: 0.9 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. In addition the following pref should be made available: [X] Hide icons when an image has no alterative text. See below for a description of the _implementation_ of this preference. Another pref may be available to handle poorly designed pages. Such a pref may be linked to a legacy-compatible 'quirks mode' if the UA implements such a feature. This pref may toggle between the behaviour described in this spec and legacy behaviour where undisplayed images with height and width attributes have their alternative text rendered inside a placeholder frame: [X] Always expand alternate text instead of attempting to preserve page layout (only affects legacy documents). The recommended setting for both these prefs is checked. 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 broken image or broken object icon. For images that have been blocked, a blocked image icon. For images that are in a format not supported by the UA, an unknown format 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 (for example UAs may also have a 'corrupted image' icon). Placeholders ------------ If an image cannot or will not be shown, then: 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 compatability pref is set to its 'preserve' mode and 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 (blocked images, images not downloaded in 'Don't Load Images' mode, broken 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 (or if the 'hide icons...' pref is not checked) 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. 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. There should never be a sized placeholder frame for an image where the UA does not know the size. Note that broken and blocked 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, unless the 'hide icons with no alt text' pref is unselected. 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 ========================================================================