Embedding MediaThe width and height Attributes
Unless instructed otherwise, browsers will display images at their natural dimensions, but they can’t
determine those dimensions until they download and analyze the image. Meanwhile, the browser has
probably already downloaded and rendered the markup and text, and the images will appear in place as
they’re downloaded in a second pass. The text will often reflow to accommodate the image once its
dimensions are known, which can be jarring if your visitor has already started reading. You can include
width and height attributes in an img element to tell the browser to reserve space for the image and
draw the text where it should the first time around.
If the width and height attributes aren’t the same as the image’s natural dimensions, the browser will
scale the image to fit to those attributes. However, you should usually avoid resizing images this way.
When a web browser scales an image larger than its natural dimensions, it can appear blocky, showing off
the individual pixels. If it’s scaled significantly smaller, it may still look sharp, but the file size will be larger
than necessary and take longer to download. Ideally, the width and height attributes should match the
image’s natural width and height, and you should do your resizing with a graphic editing program better
equipped for the task.
You can also use the CSS width and height properties to describe an image’s dimensions. When an img
element that includes a width and/or height attribute is further styled by CSS, the CSS dimensions will
override the HTML attributes.The usemap and ismap Attributes
An image map is an image where certain areas are designated as hyperlinks, rather than the entire image
being contained in a single link. The usemap attribute identifies the specific map element to use when
rendering a client-side image map. The ismap attribute declares that this image will be used as a server-
side image map (which is an inherently inaccessible device that you should usually avoid). We’ll cover
image maps in more depth in Chapter 6.Obsolete Presentational Attributes
Older versions of HTML included a number of optional attributes for the img element that have since been
eliminated in favor of CSS. None of these are valid in XHTML or HTML5, but we’re listing them here so
you’ll recognize these attributes and know how to achieve their effects with modern CSS:
align: Specifies how the image should be aligned with adjacent text using the values left,
right, top, middle, or bottom. You can achieve left or right alignment with the float property
in CSS; the vertical-align property achieves top, middle, or bottom alignment.
border: Specifies the width of the border that will surround images that act as hyperlinks. This
has been supplanted by the border-width property in CSS.
hspace: Specifies the horizontal space on the left and right sides of the image, replaced by the
CSS margin-left and margin-right properties.
vspace: Specifies the vertical space at the top and bottom of the image, replaced by the CSS
margin-top and margin-bottom properties.