How to display images when you are not displaying images
========================================================
Version: 1.3
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
------------
In the descriptions below, the term "have dimensions" means that when
treated as replaced elements, the elements have computed values for
the 'height' and 'width' properties other than 'auto'. Note that the
"height" and "width" attributes are considered presentational
attributes that map to CSS values.
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 dimensions in 'Always Load Images' mode, and for all
images that have dimensions when the document is in legacy (or
'quirks') mode:
Create a borderless box with the height and width given.
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 that have no dimensions):
In CSS terms, make the IMG or INPUT be a non-replaced element.
If there is any alternative text, or if the document is in
legacy (or 'quirks') mode and the alt attribute is missing, 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,
or 1em by 1em if the images are scalable. 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 (except in legacy/quirks mode).
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
Boris Zbarsky
========================================================================