What is supposed to happen when an img can't be displayed?

Question

What is the browser supposed to do exactly when an img can't be displayed?

The official sources are deliberately vague about this. They say the alt text is supposed to be used, but they don't say how!
So unless I haven't searched good enough (and I did a lot of Googling. I even Binged!) this information isn't there. And the browsers differ widely in what they do.

If an image can't be loaded because it isn't there,

• Mozilla displays the alt text inline as part of the current text
• IE displays the alt text as an inline-block, preceded by the "broken image" icon, and in a different font
• Chrome also displays an inline block and the "broken image" icon, and it puts a border around it. It doesn't change the font though.

<p>This is my new car.
  <img src="images/mynewcar.jpg" alt="It's a red car, with four wheels."/>
  And that's it.</p>

Now if you change the browsers' settings to not load images, the behaviour changes in most browsers.

• Chrome now doesn't display anything, not even the alt text.
• IE still displays the alt text in a smaller font, but now without the "broken image" icon in front.
• Mozilla still displays the alt text inline.

So my question is, which of these browsers does the right thing?

And by that I don't mean, "what do you think is the best approach"? I really mean what are the official rules governing this behaviour? Are there W3C pages (or even WHATWG pages) that I managed to miss, or where I misinterpreted the rules?

Answer 1

It would appear that there are no hard and fast rules around this. The HTML spec only describes how a browser can be expected to behave, but imposes no normative requirements upon browsers to follow said behavior to the letter. The CSS spec doesn't even touch on it.

Section 10.4.2 of W3C HTML5 describes how img elements are rendered according to a set of rules that refer to what the img elements represent.

Section 4.7.1, a ways down, describes what an img element represents depending on its src and alt attributes:

What an img element represents depends on the src attribute and the alt attribute.

[...]

If the src attribute is set and the alt attribute is set to a value that isn't empty

The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

So, if an image is unavailable, an img element represents its alt text (since there is no image to be represented!).

So, going back to section 10.4.2, the following rule applies:

If the element is an img element that represents some text and the user agent does not expect this to change
The user agent is expected to treat the element as a non-replaced phrasing element whose content is the text, optionally with an icon indicating that an image is missing, so that the user can request the image be displayed or investigate why it is not rendering. In non-graphical contexts, such an icon should be omitted.

It seems that Firefox is following this expectation (note: not requirement) most closely, though whether the box that is generated is replaced or non-replaced, I'm not sure. Likewise for the other browsers — an inline-block can either be replaced or non-replaced. Notice that HTML says "phrasing element", not "inline element" or "inline-block element", again adding to the vagueness of the whole thing.

What Chrome does when images are disabled through user preference is not what I would call "[providing] the user with a notification that an image is present but has been omitted from the rendering", but again, it's also not a requirement. Still, I don't understand why Chrome thinks that's a good idea. What was alt text for, again?