HTML and CSS Reference
The basic page
with iconic links
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.)
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.