Speed them up

Reduce file size

Of course, the main reason that a file takes time to download is because of the file size. So the most important thing is to use small files if you want pages that load fast. There is an excellent tool available on the internet called GifWizard which will reduce your file size if you don't want to do it the hard way yourself. The list below contains some things to do to reduce the file size.

Size

Of course, an image 200 pixels wide and 400 pixels high will produce a larger file than an image which is 30x40.

Colors

Fewer colors will make the file size go down, but the image will lose quality. A lot of colors are nice, but then it will take ages to download. Maybe something in between is the best, don't you think?

Format

JPG or GIF? GIF does not reduce the image quality like JPG, that's why the GIF format is most suitable for details like logos and buttons. JPG is best for larger pictures, photos, landscapes, etc.

Quality

If you use the JPG format you probably know you can change the quality of pictures. Reducing the quality will make the files smaller, but the image itself will look more blurred and not as sharp as the original. You have to try what quality is best for just that specific image, and compare the quality with the file size. Images you want sharp, like buttons, logos or images with lots of details, should be in GIF format instead.

Details

A complex picture with lots of colors is bigger than a simple picture, the reason for this is the image compression. The same color in a row will be compressed for example, instead of writing that 1 pixel has color white 100 times, it will be written that 100 pixel has the color of white, and that will reduce the file size quite a lot.

If you think of this, you may reduce an image file size at least a little bit. This trick is not suitable on big pictures, it's more useful on small buttons and especially banners which may not be bigger than a certain amount of bytes.

However, use a paint program that allows you to paint pixels. Now try to remove all those stray pixels that don't do any good. This will make the image smaller (and sometimes a bit clearer). But don't remove too much, or the wrong pixels, because then your image maybe won't look as smooth as it did before.

Width & Height Tag

Always use the HEIGHT and WIDTH tags no matter how small an image is. These tags make the browser display the text as fast as it's loaded instead of waiting for the images to load first. Without these tags the browser is forced to load the whole page to know where to place the text, and no one likes to wait with just a blank screen. But be careful when you set the value of the tags. If it is other than the image's real height and width, the image will be stretched or shrinked to that size. The result of this is that the page download will be delayed and the image quality will be reduced.

Recycle Images

A very good thing is to use the same images on several different pages. This will speed up the transfers, but still you can use a lot of graphics. The reason for this is, when the image is downloaded the first time it'll be placed in the browsers cache. And the next time the image is displayed the browser doesn't need to receive it again because it's already there (in the cache). This will make the page come up faster. Another thing is that if you reuse your graphics on different pages they will feel like they belong to each other, a sort of consistency. It's a site, instead of a collection of random pages.

Last updated 970722