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:
...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
========================================================================