How to Modify Image Sizes

By Susan Brumbaugh, Co-Owner, Aphids Communications

This portion of the Very Basic Help with Images web site explains how to =create "thumbnail" images - tiny versions of images you put on a page (so that it will load more quickly) which link to full-sized versions. There are a couple of ways of doing this.

Method 1 (a little more difficult, but preferable)

If you want to make sure that all graphical browsers will be able to display the tiny image, you should use an image tool to shrink the original image (let's call it big.gif) down to a small size, say 50 pixels wide, and then save the image under a new name (let's call this one small.gif). I received a helpful comment through e-mail suggesting the following: "BEFORE reducing the size, it may help a lot to blur the image considerably AND enhance the color saturation somewhat (sharpening and readjusting after shrinking if necessary)."

For this example, we'll assume the images are located in the same directory as your web page.

Then the HTML code you would use is:

<a href="big.gif"><img src="small.gif" alt=""></a>

Method 2 (easier on you - harder on browsers and the Internet)

There is an option to specify the size of an image in the <img> tag. Only some browsers support this attribute. This means that you include the original image in the tag but can specify a smaller size for it to display. Netscape is the only browser that will scale the whole image if only one of either the width or height attributes are specified, maintaining the aspect ratio.

In the image statement, add an item which defines what you'd like the reduced size to be (in pixels). For example:

<a href="big.gif"><img src="big.gif" alt="" width="50" height="75"></a>

If the image is 200x300, this statement will make the image appear on the web page as 50x75 (for most browsers). For Netscape only, you can re-size either the width or the height, and the browser will "know" to scale the other attribute to the right proportion. IE does not do this, so just to be safe, you should determine the original pixel dimensions of the image, decide what you want the width to be, and get out your calculator to determine the proper height (or use the "document info" option under the View menu to determine the scaled dimensions).

I usually put an <a href> tag around the image itself so that users can click on the image, which then appears on a separate page at its true size.

NOTE: For a variety of reasons, the first method is the best way to use thumbnail images. As someone pointed out to me in a recent e-mail message, even if you tell the browser to display the image at a smaller size, the browser will still be required to download the image at its full size. This takes extra time, creates a bigger load on your server, and most importantly increases the amount of limited bandwidth available to other Internet users.

© 2004 by Aphids Communications, L.L.C., all rights reserved. Text, graphics, and HTML code are protected by US and International Copyright Laws, and may not be copied, reprinted, published, translated, hosted, or otherwise distributed by any means without explicit permission of the copyright owner. Aphids and Aphids Communications are trademarks of Aphids Communications, L.L.C.