You have 5 seconds to impress me.
|
If you have any constructive comments, suggestions for improvements or corrections, please
|
A picture worth a thousand words
While a picture might be worth a thousand words in some cases, a picture that takes 30 seconds to appear certainly isn't as
good as far as your visitors are concerned as the 'same' picture that takes only 3 seconds.
So what can you do to speed up your image loading. First - avoid png files; second - never use bmp (or tif files). If you happen to have bmp images that you want to use, first convert them into either jpg or gif. An excellent image viewer with built in file type converter is IrfanView - available free from Irfanview.com
Step one to faster pages with images is choosing the right size. If you check the 'properties' of the three images below left, you'll find that each of them is the same file size [7911 bytes] even though they are different sizes. That's because the same image file was used in each case and the width/height dimensions were changed. If you check the file sizes of the two image below right you'll notice they are smaller than the 'original'. They are in fact different image files. First they were re-sized with a graphic editor and then saved. The smallest at the right is less than half the file size of the original.
 |
|
|
|
 |
 |
| Same file size | |
Different file size | |||
Step two in minimizing the size of graphics is choosing the right file format. If the image is photographic or it consists mostly of many gradient colors, the jpg format is usually best. If the image has a relatively low number of colours and the colours are arranged in blocks, the gif format is usually best.
Having chosen an optimum image size and format, the file sizes of your images can be reduced further by 'optimization'. Image optimization means compromising between speed and image quality. The smaller the image file, the faster it will download and the less 'accuracy' it will have. Below are some examples of our old friend the comfy chair at different image compressions. The differences should be obvious:
|
 |
 |
 |
| 7911 bytes JPG - 80% |
3408 bytes JPG - 40% |
2589 bytes JPG - 20% |
2049 bytes JPG - 10% |
If you already own a good graphics editor, you should have a built-in image optimizer. If not, you'll need to either buy one (for when you have a large number of images), try one, or find a free one somewhere on the Internet. The best image optimizer - no doubt about it - is Ulead software's 'SmartSaver Pro' (packaged in Adobe's high-end image editors). For free online image editors, try
Spinwave or
NetMechanic.
Closing words: that's not all there is to faster pages with images. If you have large images and you really want your visitors to see them at their original size, use a 'thumbnail' (a smaller version of the image) as a clickable link to display the BIG version in a pop-up or new window, or even a simple text link. That reduces the time to display the original page, doesn't make your visitors wait for large images they might not want to see, yet still permits those who want to see the big picture to do so.
Click here for a simple example of that.
© 2002 - halfadot smallwebs