The key to including graphics in a Web site is to use images to accent and emphasize the text content or subject of the page. If the page is meant to inform through text, then relevant images should be placed to compliment the text, or to break up the text into more easily readable chunks. If the focus of the page is completely graphical, then by all means, significant graphics are acceptable.
Always try to ensure that your images are consistent with the look of the rest of your page or site. Consider the following:
- physical size: make sure the size of the image doesn’t detract from the other information on the page
- file size: smaller is better (large images or images with complex animation can have very large file sizes)
- colour scheme: choose images that are consistent with or complement the overall look and feel of your site
The overriding question to ask yourself: does the image add anything to the information conveyed by the overall page content?
Image size
For images meant to be included on a page of text, the dimensions of the images should be considered carefully. Where will your image be aligned? Will text be placed next to it?
Your image should be large enough so that its message will be carried across to the viewer, but not so large that it overpowers the page and takes forever to download. A larger image may carry more impact, but it will take longer to download and your viewer may get bored and leave your page / site.
Browser Window Size
The main constraint on a browser window is the horizontal display of the screen. Most computer users today have their screens set to a width of 800 pixels, but there are some that are not set any higher than 640 pixels; therefore, your page should safely resize to a width of 640 pixels. To that end, single images should definitely not exceed this 640 pixels width.
If your image is a top header for a page, you should ensure it carries the same impact when the browser window is set to 640 as when it is set to 1024.
If your image is a photograph on a page of text, you might consider setting a maximum width of around 250 pixels so that there is room around the image for text.
.jpg or .gif?
When including an image on a Web page, you will first need to choose a file compression format. The two compression formats that are supported by all browsers are the .gif format and the .jpg format. .gif stands for Graphics Interchange Format, and its extension is .gif; .jpg stands for Joint Photographs Expert Group, and the file extension is .jpg. (Sometimes you will see the file extension written as .jpeg, but some browsers and older machines have problems interpreting four-letter file extensions, so be sure to use the three letter file extension .jpg.)
A simple rule of thumb is to compress photographs as .jpg, and compress any computer generated images (line art or text graphics) as .gif. Saving an image as a .jpg compresses the image file by selectively discarding data, which results in a lower file size. .gifs do not discard data, but the saving of the image in 8-bit colour (256 colours) from the 24-bit (millions of colour) original reduces the file size.
What may be good for a photograph isn’t necessarily good for a computer generated image. Shown below is an enlarged section of the same photo, one as .gif and one as .jpg. The .jpg version is clearly a better-looking image.
 |
|
| UBC Clock Tower (.jpg Format) | |
 |
 |
| .jpg: Good | .gif: Bad |
Below is a computer generated image. The .jpg discards parts of the image, which causes colour changes within the circles. The .gif saves each block of colour and does not discard any data. In this instance, .gif is the preferred format to use.
 |
 |
| .jpg: Bad | .gif: Good |
Additional Resources
There are many Web graphics resources available on-line; see Useful Web Development Links for a list of related sites.
