Multimedia: Video, Audio, and Embedded Media - HTML5 Mastery: Semantics, Standards, and Styling - page 188

Figure 5-1. Alternative text displayed by the alt attribute when an image is unavailable should
reproduce the purpose of the image, not describe the image. A descriptive summary of the image
is better provided by the title attribute, which appears when hovering over the image.
While not required, it is a best practice to set the width and height attributes to
the width and height in pixels of the source image. This will allow the browser to render
the space an image will occupy before it has fully loaded. This also means the layout of
a page won't change if an image is missing, since an empty box the dimensions of the
width and height attributes will be rendered ( Figure 5-1 shows such a box).
Note There is an issue in WebKit, the underlying layout engine of Google Chrome
and Safari, which prevents alternative text from being displayed when an image is not
found if the width and height are not large enough to fit all the alternative text on one
line. If you do not see alternative text appearing in these browsers when an image is not
available, the dimensions set is likely the reason.
IS IMG OBSOLETE? WHAT ABOUT CSS?
The img element is old—so old in fact that it predates Cascading Style Sheets (CSS).
The presentation of content on the Web has developed a lot since the early 1990s, and
compared to CSS, the img element is, in many respects, quite limited. Since CSS is
concerned with the appearance of a page, which includes images, CSS offers capab-
ilities for handling images that are often more flexible than those possible with the
img element. Using CSS, images can be applied to the background of any element
on the page (through the use of the background-image and related properties),
and images can be tiled, offset, and more. The latest version of the CSS specification
under development, CSS3, has added more image-handling capabilities such as the
ability to layer multiple background images over each other. 3
Additionally, the HTML5 specification specifically states that using the img element
for layout purposes should be avoided. Examples of using images for layout include
separating regions of content through the use of image-based backgrounds or borders