HTML and CSS Reference
In-Depth Information
The 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.
