|
GIFs and Download Time
Minimizing image download time is a crucial part of web design. Below are several techniques for improving download time.
- An image's dimensions are not the most important influence on its file size. Equally important is the number of colors in the image and how these colors are used.
- GIF compresses files by scanning the image in a horizontal direction and recording new color data each time the color changes. This means that the fewer times your image shifts color from left to right, the smaller your file will be. So, gradients and other color shifts that proceed from top to bottom have no effect on file size. This file is 3K.
- The bit depth has an important impact on the file sizes of GIFs. GIFs can save up to 256 colors (8 bits per pixel) but you really don't want that many colors in your file. You can reduce the number of colors using the following technique:
- Using the Mode command in Photoshop, remap the colors in your file from RGB to the Netscape "browser-safe", 216-color, non-dithering palette.
- Change back to RGB mode.
- Apply indexed color again, using the Exact palette option. You will see the number of colors reduce substantially. You can enter any number you like as well.
- Another important attribute of loading GIFs is the use of the HEIGHT and WIDTH attributes of the <IMG> and <Object> tags. The GIF file above is 1 pixel wide, yet because of its design we can stretch it to 45 pixels or greater using the WIDTH=45 attribute.
- The use of interlacing (an option while saving GIFs) is another way to save download time. A rough version of the image is quickly displayed so that the user can click immediately which is useful in the case of an image map.
- Another way to quickly display an image is to use the LOWSRC attribute of the <IMG> tag. This names a low resolution file to be displayed while the larger image is being loaded. Some interesting effects can be generated by loading low-res graphics, then substituting the final graphic file.
- See the Tips and Tricks page for additional tips.
|