Home

Graphics

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Week 7

Week 8


8-Week Shape Up Course
Week 3: Are Your Graphics Overweight?

computer stepping on to scalesHow long are you willing to wait for a page to download? Last week the HTML Doctor told you how long it takes your page to load over a 14.4 kbs modem. Would you wait that long? You should always be seeking ways to lose a few kilobytes off your web page.

One of the easiest ways to shrink your download time, is to shrink your graphics. There are two types of graphics currently on the web: gif and jpg. As a good rule of thumb, try to keep your gif’s under 15K and your jpg’s under 30K. If at all possible, keep the total graphics on your page under 35K.

*GIFBot TM
Gif’s are extremely easy to shrink. Point your browser to Net Mechanic's GIFBot at http://www.netmechanic.com/.

Look for the box labeled "Enter the Image URL" and type in the URL of your home page. I type in http://www.cameron.edu/~julie/index.html. Type in your email address and click submit.

The resulting page indicates the size (K) of each graphic on your web page.
image quality
+ small file size
= great graphics
To reduce your graphic's file size, click on the file size. My julie.jpg is over 20K so I click on it. GIFBot gives you several options of possible reductions in the graphic. The neat feature is that when you mouse over the graphic, it shows you your original graphic so you can see how much change there is between the two. Looking at the different grahics I see that the first graphic would actually increase my filesize! I don't want that. The following graphics though would be reduced 6%, 16%, 26%, 37% all the way up to 73%!

By mousing over the images, I see that the one reducing julie.jpg by 16% doesn't loose any quality. You want the smallest possible file size without losing the quality of the graphic. After you've decided which one is best by balancing filesize against quality, click on the graphic.

The resulting graphic is the reduced graphic. You can now right click and save the image. Remember to upload that file and replace your old graphic on cuok for the change to take effect on your web page.

*Scanning jpg’s
Photos usually need to be saved in jpg format. If you are scanning your own photos, look for an option for compression when saving your jpg. You’re saving for
Use high or medium compression to save jpg's
screen resolution so don’t be too concerned with quality. Use medium compression or even high compression to get smaller file sizes instead. Only use low compression if you expect your readers to print your web page and you know they are willing to wait awhile for the download.

*More information
For some more information on reducing your graphic sizes, visit the Bandwidth Conservation Society at http://www.infohiway.com/faster/.


Page maintained by Julie A. Duncan, Information Designer.