How to Determine and Specify Image Size

By Susan Brumbaugh, Co-Owner, Aphids Communications

Main Index: Very Basic Help with Images

I'm sure everyone has encountered a web page where it takes forever for the images to appear, and you sit there staring at a blank screen. There are things you can do to make sure that does not happen to visitors to your web pages. One trick that helps is to specify the sizes of the images on your web pages. That way, the user's browser can reserve the appropriate spaces for the images and can go ahead and load the text of the page. Visitors can at least have something to read while they wait for the images to finish loading.

Determining the size of an image

In order to specify the size of an image, you'll first have to figure out what the image dimensions are. The image dimensions are measured in units called "pixels", which are points on an image. Your computer monitor is also measured in pixels - the most common size or resolution is 640x480 pixels. A pixel is about the size of a period on your browser.

There are probably lots of ways to figure out how big an image is. I'll talk about two:

Method 1 - Your browser
The way I usually do it is with my browser, Netscape Navigator 3.0 (earlier versions won't have this option). First, create a test page with the image on it (or go to a page where you're displaying the image) and load it in Netscape. Go to the View menu at the top of the browser, and click on Document Info. On the screen that appears, you'll see a list of files at the top, including all the images on the web page you're viewing. Click on the image name, and if the image is not animated, you can see at the bottom information about the image, including the size (in pixels and bytes), type, etc. Other browsers such as IE may also have this feature.

Method 2 - A graphics software package
When I open up an image in my image viewer (xv on unix), the program displays the size of the image, in pixels, as well as the number of colors it was able to display. I haven't used many downloadable packages for Mac or Windows, but I bet they have a similar feature. Try looking in the online help for "size".

Specifying the size of the image in your HTML file

In the image statement, add an option which defines the size of the image (in pixels). For example, if the image is 50x75, the HTML code would be:

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

© 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.