HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 9.15
The basic page
with iconic links
and text.
▲
Now that you've learned about inline images, images as links, and how to wrap text
around images, you know what
most
people do with images on web pages. But you can
play with a few newer tricks, too.
Image Dimensions and Scaling
Two attributes of the
<img>
tag,
height
and
width
, specify the height and width of the
image in pixels. Both were part of the HTML 3.2 specification, but they're deprecated in
favor of CSS now.
If the values for
width
and
height
are different from the actual width and height of the
image, your browser will resize the image to fit those dimensions. The downside of this
technique is that the image-scaling algorithms built into browsers are not always the best,
generally images resized with graphics programs look better than images resized in the
browser. If you use the browser to change the size of an image, be prepared for it to look
pretty bad, especially if the aspect ratio is not preserved. (In other words, you take a
100-by-100 pixel image and expand it into a 200-by-400 pixel image.)
CAUTION
Don't perform
reverse scaling
—creating a large image and then
using
width
and
height
to scale it down. Smaller file sizes are
better because they take less time to load. If you're going to dis-
play a small image, make it smaller to begin with.
