Web Guide - Tips for Faster Loading Pages

It is important to choose the appropriate image format.

GIFs are ideal for line art, cartoons, and other images composed largely of flat blocks of color. They are not suited for complex images, sych as realistic photographs because they won’t compress well and will lose color information.

JPGs are ideal for photographs or other images that are highly complex and contain many colors. They are not suited for simple images with sharp lines since they will be unnecessarily large. They do not support any transparency.

PNGs should only be used for images containing transparent areas that must blend smoothly or when you wish to provide print ready, high-resolution graphics. They provide the highest quality at the cost of being the largest. Internet Explorer 6 cannot render the transparent portions of PNGs correctly.

When creating graphics for the Web, it is best to use the Web graphics export option in your graphics program of choice. All images should be under 60k in size.

Animations may be created in the form of animated GIFs or Flash movies. Animations can provide a richer means of communication. However, because of their size, they usually take much longer to download. Convey your message with static images whenever possible.

Try to re-use images whenever possible. When an image is used, it is cached by the user’s browser. The browser can now use its local copy whenever visiting a page that uses that image. This is much faster than having to download the image again.

Using cascading style sheets to style and format pages results in less html per page. Additionally, the same style sheet may be reused across an entire site.

Javascript may be used to extend the capabilities of the browser. However, like an animation, care must be taken to use it only when necessary. Not only does it make pages less accessible, it makes browsers render pages more slowly.