<optimizing images>
If you want to have a friendly site, you will need to make sure that your pictures don't take one hundred years to load. You want quick zippy images that won't piss people off. I read somewhere that the general rule is for your whole page (page, not site) to be 30k or less (HTML file + all the images). Here are five ways to speed up your images:

<image dimensions>


Say you have a picture you want to use and it's 800 pixels wide. That is too big. I try to keep my images no bigger than 300 pixels wide if at all possible. Shrink your picture down as small as you can stand to make it (as long as it still looks good and serves its purpose).

<cropping>


Maybe you have a image that really is only 300 pixels wide, but when you save it, you don't cut it close to the edges and it ends up being 350 pixels wide. Not only is that bigger than you want it, but that extra stuff will make your image farther away from the text and isn't anything anyone's looking at! Trim it away. In Photoshop, all you do is use the rectangular marquee to select that part of the image you want and then pick "crop" from the image menu to get rid of the rest.

<image colors>


If you're going to save something as a gif you are going to need to switch the mode to indexed color. It will give you a choice about how many colors you want to use. Start at 128 colors, then keep reducing them (try 64, then 32, then 16...) until you see a noticeable loss in quality. Most images can be reduced down to at least 64 or 32 colors, if not 8 or even 2, which significantly reduces their file size and load time. Do not reduce the colors so low that your image looks bad, though!

<image type>


Some images will be smaller as gifs and some smaller as jpgs. Generally, you want photos to be jpgs and drawings or things that don't have many colors to be gifs. If you're using gifs, you may want to interlace them. This makes them load blurry and then sharpen up, instead of load from the top down. Interlacing makes images appear to load faster, even though they're taking the same amount of time. If you're using jpgs, lower the quality until right before the picture starts looking noticeably bad to reduce the file size.

<html tags>


Another way to make your images appear to load faster is in the HTML tag for them. Do this: <img src="image.gif" height=40 width=40>

By putting the size in the tag, the browser will know exactly where everything is going to be before it loads the images, so it will load in the text and everything, then the images, instead of loading everything in order and then re-adjusting for the size of images. This makes things look much quicker.

<thumbnails>


If you have a bunch of pictures that you really think people need to see in fairly large sizes, create thumbnails of each of the pictures. Thumbnails are merely a wee version of your picture that link to the large version. That way people can see a bunch of small pics and then choose to load whichever large ones they want. Usually thumbnails are about 100x80 pixels.
go back