Embedding Media - HTML5 with CSS3 - page 145

(00, 01, 10, and 11), thus producing four possible colors (2 2 ). Four bits expands the number of colors to 16
(2 4 ). At 8 bits per pixel, the total possible colors number 256 (2 8 ).
GIF images store color information at the rate of 8 bits per pixel and hence can contain only a maximum of
256 different colors. JPEGs use 24 bits per pixel and can thus produce 16,777,216 possible colors,
approaching the very limits of human vision. The PNG format supports either 8-bit color or 24-bit color.
In an 8-bit GIF or PNG, only a single digit is devoted to describing each pixel's transparency, so any given
pixel is either visible or not visible. In a 24-bit transparent PNG, 8 of those bits can be devoted to
describing the transparency of the pixel, allowing 256 possible levels of translucency all the way from
completely transparent (0) to completely opaque (255).
Embedding Images
The text content of a web page is part of the HTML document, surrounded by tags that indicate the
meaning and purpose of each portion of words. Images, on the other hand, are external files and not
actually part of the document at all. You can embed an image in your document with the img element (or
the object element, though img is more common and reliable). Rendering a web page that includes
images is a two-stage process; first the browser downloads the markup, and then it downloads the
external images. Wherever the img element occurs in the document, the browser will fetch the referenced
file from the web server and display it on the page in place of the element.
Images that are strictly decorative—only for looks and not informative—should usually be applied as a
background image in CSS, keeping your presentation separate from your content.
img
The img element (an abbreviation of “image,” as you might have guessed) is considered a replaced
element ; the element itself isn't rendered, something else is rendered in its place. It's also a void element
with no text content and no end tag, though you can optionally close it XHTML-style with a trailing slash
( /> ). The img element requires a src attribute to define the source of the graphic file as the URL (either
absolute or relative) where that file resides on a web server.
An alt attribute is required in most circumstances, to provide an alternative text equivalent of the image.
Browsers can display the alternative text if the image isn't available or if the browser is incapable of
displaying images, and the alt attribute is important to improve accessibility for the visually impaired.
Listing 5-1 shows an img element with only the src and alt attributes, the bare minimum required.
Browsers treat images as inline elements, so they appear alongside any adjacent text or other inline
elements (including other images) on the same baseline, with no other default styling.