Sizing Things Up

There are two "sizes" to a graphic. The first is the pixel size

The second size is the file size. This is measured in kilobytes. The above picture is 13kb in size. The bigger the file size, the longer it will take to load a graphic. Usually the pixel and file sizes are directly related. That is, the more pixels in your picture, the bigger the file size.

The Pixel Size

Make graphics to fit on the page. The following banners are 570, 640 and 800 pixels, respectively. When the web was new, most pages had to be 570 pixels or less in width. Otherwise a browser could not show all the page (a scroll bar would appear across the bottom). Computers have advanced and most people should be able to handle a web page that is 800 pixels in width. Remember that a few pixels on each side of the page are needed for buffer space (to handle things like scroll bars and default margins). For this reason, it is a good idea to make your pages slightly smaller than 800 pixels in width. The Yale Style Guide says 760 pixels will fit on a 800 pixel screen. All the pages in this tutorial are 760 pixels wide. Notice how the 800 pixel "Super VGA" graphic goes off the normal page.

The File Size

The file size of a graphic is measured by how much space the file takes up when saved to a disk. This file size will also determine how long it will take for the file to be transferred across the Internet. Larger files, take more time to transfer. To decrease the file size of a picture, you can use compression. You can only do this with a JPEG file. The compression is a setting that controls how much of the picture is thrown away, to reduce the file size. Below, the picture on the left uses no compression. The picture on the right uses 15% compression. Examine them closely, and you will notice it is hard to tell the different. But the one on the right will download four times faster (it's 1/4 the size) than the one on the left. If the picture quality is virtually the same, it is much better to have a file that downloads faster (i.e. a smaller file).

122 K	29 K

But don't use too much compression. The picture below on the left uses 85% compression. At this setting the file size is very small, but the picture quality has suffered too much. Many of the numbers on the jerseys cannot be read, let alone the names above the numbers. When choosing the compression setting, you may have to do a little trial and error to get the most compression with the best picture quality.

6 K	29 K

Resizing Images

Resize images when making thumb nails. It is possible within the HTML to resize the window that holds a graphic.  The width and height are pixel sizes.

Don't do this.  A bigger file will alway take longer to download than a smaller file. You may not notice the download speed where there is only one image on the page, but if you have several, the download time could be something that turns people away from your site.

Always change the actual size of the graphic instead. Click on each of the pictures below to see the actual picture size (pixel size). The picture on the right is a "thumb nail". It is a regular picture that has been re-sized. If you were to make a whole page of pictures (e.g. all the pictures from a field trip), you would want to make each picture into a thumb nail, and have the full size picture show up when someone clicks the thumb nail.

29 K	7 K

Below is a much worse example of a re-sized graphic. Click the picture to see the big version.

Click Me

There is one exception to the "resize" rule. If you are using a GIF as a border or divider, you should resize it to fit your needs. These files are typically much smaller than JPEG pictures. This example uses a file that is 1k in size. Below are two lines. Both are the same file, but by resizing, they look different on the page.

	<img src="orange_line.gif" width="340" height="20">
	<img src="orange_line.gif" width="740" height="1">

Re-Use Graphics

In the above examples, the 29k file was used three times. Re-using a graphic on a single page, or across an entire site can save your visitors a lot of bandwidth. A browser will remember each file that has been downloaded, and if different pages re-use the same graphic file, the browser will not repeatedly download that graphic.

The menu at the bottom of this page is an example of a graphic that is used on multiple pages. This graphic will be downloaded only when the first page that uses it is opened in the browser. Your browser will then use the cached version of the menu on each subsequent page.