Speed Tips For A Fast Loading Website

The speedy basics. The items that all designers should pay attention to. These tips don't "cost" anything except the web designer's time and attention to detail and pay dividends as every site page loads more quickly.

HEIGHT AND WIDTH ATTRIBUTES
Specify the height and width attributes of every image. Specify the height and width attributes of every table. These two precepts allow the visitor's browser to reserve the exact amount of space needed for each page, and to begin loading the images more quickly. The "boxes" for the images (with ALT tag messages) will appear immediately when the page is accessed.

REUSE IMAGES
Once an image is downloaded, it may be reused over and over without being reloaded. For instance, our logos are reused on every website page, but only require loading once.

JAVASCRIPT VS. ANIMATED GIF
Check the weight of any javascript effects. Sometimes the same effect may be created using an animated .gif, and take up less space.

IMAGES IN TABLE CELLS
4.xx-plus browsers, both Netscape and Internet Explorer allow the use of background images in table cells. If coding only for these browsers, you might consider using a background image, and placing text over it with HTML. This method allows faster loading than placing text on your GIF or JPEG images. This effect, however, is not visible to many earlier browser versions

Optimization is the process of reducing an image to the smallest file size possible at an acceptable image quality.

IMAGE FORMATS
The image file formats in common use on the Web are GIF (pronounced gift minus the t) and JPEG (pronounced jay-peg). Each has advantages for particular usage. Rule of thumb recommends JPEG's for photographic images, and GIF's for drawings, text, logos, cartoons and such. Both GIF and JPEG images may be optimized in several ways to reduce image filesize and speed image loading.

IMAGE RESOLUTION
Web graphics are displayed at a resolution of 72 dpi (dots per inch). If images are scanned and edited at a higher resolution, typically 100 - 300 dpi, be sure to reduce the resolution to 72 dpi before uploading to webpages. A resolution higher than 72 dpi increases the actual display size (and file size) of the image, but does not provide additional quality or clarity.

TRIM PHOTOS AND IMAGES
Size counts. Trim (crop) and/or resize images for display so that only the essential portions will be seen. This maximizes impact while also reducing filesize.

SLICE AND SPLICE IMAGES FOR NAVIGATION
Rather than a single large image map with many hotspots, divide the image into smaller image slices. Splice the image back together again using HTML tables. This improves the perceived loading time as smaller pieces load more quickly and the user's eye fills in the blanks, and also, as the image map changes from page to page, only the portion of the image which is different will require loading when the page is accessed, the 'already used' pieces will load from cache.

GIF TIPS
GIF formatted images use a maximum palette (number of colors) of 256 colors. By reducing the number of colors in the palette, file size can be significantly reduced. Most generally, the greatest reduction is experienced between 256 and 32 colors. Unless the image is constructed with a lesser number of colors, further reduction of color usually doesn't result in an acceptable trade-off between the file size and quality of the image.

For smallest file size save GIF's with the option: No Dither. Use interlaced GIF's whenever possible. This allows the image to load progressively, though the actual filesize is slightly larger. Visitors will quickly see a low quality version of the image which improves in quality until it is fully loaded. This pseudo speed satisfies the need to see "something" rather than a blank space on the page.

JPEG TIPS
JPEG is a compression technique for storage of images. Images are compressed into a fraction of their original size, and their palettes optimized smoothly. For photos scanned and displayed on a webpage, the optimum image format is a progressive JPEG. Like interlaced GIF files, the image appears first in low resolution and is transformed into its full scale color and resolution. The progressive file format in JPEG takes little extra file space, because each layer simply adds to the image already in place.

Most graphic editors allow settings for the export of JPEG images in several modes, or sizes. When exporting for the Web, try several settings, typically 30, 50 and 70, (not really percentages, but rather a simple scale of compression ratios) to see which offer the smallest file size vs. acceptable image quality.

Continuation of this article can be found here.

Source: Web Design Guide