Some Points to Consider When Using Graphics
- Large and numerous images may look great on a high-end computer, but they will frustrate users who must wait for images to be sent over the network. As a suggestion, keep the total file size of all images on a web less than 100k (we aim for less than 50k each).
- Not everyone has a large desktop computer monitor! Keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing users to scroll or resize their web browser window.
- Color gradients may look pretty but for GIF images they do not compress as much as solid color areas and they can sometimes come out "banded".
- Rather than displaying all of the images on the web page, have them linked as external images that are downloaded only when a viewer clicks on a hypertext item (this will be covered later). If you have numerous pictures to display, try to break the web page into a series of linked pages.
- A single image (e.g. a small "bullet") can appear several times in a web page with little added delay when you reuse that same image.
- Many web browsers "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than transferring them across the Internet.
Most importantly, make sure that the images are ones that add meaning to your HTML documents. You may design a beautiful web page, loaded with large pictures, that may load nicely from your computer, but may be excruciatingly slow by a viewer using a slow modem over a busy network. The 'net is a busy place and getting busier every second.
Review Topics
What are the two MAIN graphic formats used for the World Wide Web?
How can a graphic file display on different computers?
What are some key points to consider when including graphics in web pages?