Resizing and Thumbnailing Images

TOC

The image tag provides for resizing an uploaded image to fit your design space, using the "height" and "width" attributes. Let's say you uploaded an image that is 250 pixels by 150 pixels high, but you only have a 125 pixel wide place for it in your page. You could tell the browser to scale the image down by using:

<img src="i/largeimage.jpg" width="150" height="75" alt="" />

In this case we've scaled the image by exactly 50%. That is, both its width and height have been halved. You can scale by any amount, but it is important to keep the aspect ratio (width divided by the height) the same. That is, always scale the width and height by the same percentage.

Always select or prepare images so that scaling down is required. Scaling up produces "pixelated" or fuzzy images on the screen.

Hints:
Always select or prepare images so that scaling down is required. Scaling up produces "pixelated" or fuzzy images on the screen.

It is not a good idea to upload very large images and scale them to fit small spaces -- that makes the page longer to load, and you know how annoying that is! It is better to pre-size the image to fit the available web page space first and then make small adustments only using the "width" and "height" attributes of the image tag.

Thumbnailing

To "thumbnail" an image, follow these suggested steps:

  1. Load the image in an image manipulation program such as Paint or Photoshop.
  2. Scale or crop the image to fit the placement size reserved for it in your web page.
    (Rule-of-thumb: There are about 100 pixels per inch of screen space.)
  3. Save the image with "-th" added to the name, to make it easier to remember. For example if your original image was "bigimage.jpg", use "bigimage-th.jpg" for the thumbnail. That way, the images will appear near each other in directory listings, making them easier for you to find.
  4. Upload both images to your site's images directory; usually called "images/" or sometimes just "i/".

To place the thumbnailed image and link it to the larger version, embed the image tag in an anchor tag like so (notice that we don't use the height and width attributes because we made the thumbnail the exact size we need!):

<a href="i/bigimage.jpg">
<img src="i/bigimage-th.jpg" alt="" />
</a>

The anchor tag will cause the image to have a 2-pixel border around it, indicating it is a link. If you find this objectionable, you can remove the border by setting the images's "border" attribute to zero:

<a href="i/bigimage.jpg">
<img src="i/bigimage-th.jpg" border="0" alt="" />
</a>

<< Site Structure and Paths> | Index | Insetting Images >>