ITSS WebDev Guide
Using graphics on the web
Graphics refer to any file that is an image. This is not to be confused with stylized text. 
Text is rendered by the browser and may be used with a text-to-speech converter. A graphic image is like a picture - in fact it can be one like the lighthouse on Lake Superior image. Currently no image-to-speech converter exists. An image can also be a line drawing, a still from a movie, an animation, etc.
A graphic image is not multimedia. Multimedia is an audio or audio/video file that is played back by the browser (currently with the help of a plugin or separate program). There is a section on multimedia if you're interested.
Graphic Formats for the Web
Many different graphic file formats are in existence. Each was created to address a specific need (theoretically). The Web currently uses two of these many file formats:
- Graphics Interchange Format (GIF)
- Joint Photographic Experts Group (JPEG)
Another that may be seen on the Web is Portable Network Graphics (PNG), but its use is currently limited.
Both GIF and JPEG compress the file to reduce its size. The actual image size is untouched, but the compression helps speed delivery of the image over the Web by making the stored file size smaller.
GIF or JPEG?
Whether you should use a GIF or a JPEG version of your image depends on the image and what you want to do with it. Here are the general uses:
- GIF
- line art drawings
- flat color images
- animations
- background transparency
- JPEG
- photographic images
- finely tune the compression amount applied to image
- not for use with animations
Remember these are general uses. Feel free to save your images in both formats and take a look yourself.
How Large should the File Size Be?
This is an easy one to answer. Make it as small as you can without ruining the image quality.
Compress the File Size
This you're already doing by saving as a GIF or JPEG. By default these formats compress the file size.
The amount of compression you apply (in JPEG) will affect the picture quality. Look at the image after you have compressed it and see what you think. Many of the graphics editing programs allow you to preview the effect of compression before saving the file - a real time saver.
Make the Dimensions of the Image Smaller
Making the actual image size smaller will also reduce file size. This is done with a graphics editor (e.g., Photoshop) and saved as a physically smaller picture. Think of a photo of a mountain. Originally it may be a print size of 8x10 - hardly something to carry around in a wallet. That's why wallet size was invented; however, the mountain won't look as impressive that small. Keep this in mind as you shrink the size of your images. Finding that perfect trade-off is not always easy.
How many Images should be on One Web Page?
This is a tough one. You should consider your target audience. If your web page is going to be viewed over an ethernet connection (fast), you will be able to get away with more images on your page. If you have users connecting with a dial-up modem, you need to consider these speeds - 33.6 kbps to 56 kbps (not very fast at all).
Many studies on Web usage have found that most people get bored after waiting just five seconds for a page to download. Anything over ten seconds and people are likely to jump to another page instead of waiting for your page to finish downloading. A good guideline is to keep the total size of your page (text and graphics) to under 40 kilobytes (KB). A 40 KB page would take just under 6 seconds to download with a 56 kbps modem on a good day.
How do I get some Images?
Here you have many different options. Please keep in mind copyright issues. Just because you have an image doesn't mean it is yours to use without permission.
- Scan in photos or slides to computer.
- Shoot photos with a digital camera and load directly into computer.
- Purchase a clip art CD-ROM.
- Trade with your friends.
- Download off the Web.
Links to Other Resources
Rev: bdr 07.06