In a previous life, I used to design business websites. One of the things I made very sure of was that the ‘weight’ (size, in bytes) of each page was as low as possible, because heavier pages take longer to load, and people are impatient. If your page doesn’t load fast, your visitors will click elsewhere :(
Text isn’t a problem; it doesn’t ‘weigh’ very much at all. The big problem is always the pictures. It’s important to make these as light in weight as possible; not so much ‘small’ in width and height but small in terms of the file size. If you use Windows Explorer (assuming you’re on a Windows system) then hovering your mouse over a file will reveal the file’s size in ‘KB’ (which stands for ‘kilobytes’; thousands of bytes). For image files, you want to keep this size low; I use the rule of thumb that 50 KB should be the largest file size for most: and picture files coming out of a camera will be much larger than this.
A common technique for making an image appear smaller on screen is to resize it in the page; but that’s a mistake, as the image retains its full weight even though it appears smaller (as with the image on the right). Such a page will take just as long to load as it would were the image to be rendered at its full size.
If you’ve followed me so far, you’ll probably be thinking “that’s all well and good, but how do I make my image files smaller?”.
For this, you’ll need image manipulation software of some sort. Photoshop is quite commonly used. I use Paintshop Pro myself. There are also online editor programs that will do the job; some of them are even free. With such software, you can crop (cut the edges off) pictures and resize them to smaller dimensions. Once you’ve done that, you then save them in an appropriate format, such as:
- PNG (when you want to retain high quality)
- JPEG (good for photographic images)
- GIF (if you want to use animations)
An additional benefit of going the extra mile to optimise your images is that you’ll need far less storage space, something that is usually limited by your web hosting provider.
I’ve skimmed over the main points here; I left a lot out so as to keep this article short. If you have any questions, please do use the comments to ask!