After spending endless sleepless nights, your site is finally up and running. Well, it is not running exactly the way you want it but the simple fact that images are loading slowly is not something that can bring your high spirits down. You are not exactly pleased when you have to wait for ages till a page loads but certainly there are greater disasters that could happen. Additionally, making your images load faster is not so difficult and if you know how to do it, you can fix it quickly.
The first thing you need to do in order to make your images load faster is to discover the reason why they are loading that slowly. There might be one or more reasons why your images are loading slowly. Here are some of the most common reasons together with a proposed solution:
- Your Internet connection is slow. This is not a very likely reason, unless you are using dialup or your ISP is really very bad but still you need to make sure that you are not the only one who experiences this. Try accessing your site from a different connection (at work or at school) or ask somebody to open your pages and tell you if the images are loading slowly or not. It is better if you can see for yourself how long it takes others to load your images but if you ask 10 people and 7 of them tell you that the images are loading forever, then you will know that it is not your Internet connection but rather something else.
- Your server is hosted on a slow site. This is also quite likely, especially when 7 out of 10 people say that their Net is fast but your site is slow. Talk to your hosting provider about the problem. Or move your site to a better place, if there is no chance of getting a higher speed with your current provider.
- Decrease the number of images on a page. While connection and hosting problems do happen, most often the reason why your images are loading slowly is related to the images themselves. For instance, if you have 50 big and middle-sized images on a page, you can’t expect them to get loaded in a second. You’d better, split the 50 images across 3 or 4 pages and you will see drastic improvement in the speed of loading.
- Use thumbnails. If you feel reluctant to split the images on several pages because you think they logically belong on one page, consider using thumbnails. Thumbnails are a small sample of the image and they act like a preview. Users look at the thumbnails and if they are interested in the image, they click on the thumbnail to open the image in its actual size.
- Decrease the image size and DPI. This is one of the best approaches to making your images load faster. Very often people put large images at high DPI on their site and then wonder why the images are downloading that long. Many image files for the Web are under 500×350 pixels, under 100K (or even less) and they usually come at resolutions of 72 (or 96 at most) DPI. So, if your images are more than 500×350 pixels, are over 100K and their resolution is higher than 96 DPI, consider decreasing any of the three. Very often this can be done without affecting the quality, so there is no reason to keep unoptimized images on your site.
- Interlace. As a last resort, you can interlace your images. Interlacing is a technique that allows to display images drawn in a series of passes instead of loading the whole image at once. For instance, if your image has 100 lines, the first pass will load the 5th, 10th, 15th, etc, lines, the second pass will load the 1th, 6th, 11th, 16th, etc. lines and after a couple of passes the browser will display a very smudged version of the image but still it will be possible to see what’s in the image.
Interlaced images do not load faster – they simply create that illusion – but since you have something to look at, waiting for the whole image to download is less boring. Some Web designers interlace all their images but this practice has its tradeoffs, so it can’t always be used to increase the speed of image download.
Author: Ada Ivanova