I’m sure you’ve experienced it too, you log on to a website and the images v – e – r – y s – l – o – w – l – y appear on the page. You wait, tapping your finger, as they scroll into view, almost one line at a time, until they finally load.
Why does this happen on some websites and not others? It’s very simple, actually. The photos have not been properly optimized for the web.
The definition of optimize for this purpose, according to dictionary.com, is “to write or rewrite, so as to maximize efficiency and speed in retrieval, storage, or execution”. What this means is that larger image files are retrieved more slowly and therefore will not display as quickly.
So, let’s back up just a bit. Most photos you see on the internet will be JPG files. These files are heavily compressed so they can display a good quality image with a smaller file size. If you download images off your digital camera or phone, most likely they will be large size, at least 2-3 MB. If you put photos of this size on your website, they will take a very long time to load.
Why do we care?
For several reasons! The first is that if someone is visiting your website, you want them to get the information they’re looking for as quickly as possible. If they have to wait, they WILL go somewhere else and then you lose a potential customer.
The second is that search engines will often penalize sites whose loading times they consider to be too slow. This alone is a good enough reason to optimize your images for faster loading times.
How do I downsize my photos?
There are many free photo utilities you can download off the internet to help you resize, or resample, your images, if you don’t already have a photo editor on your computer. Two good programs are Irfanview & Photofiltre. Photofiltre offers quite a few image editing features beyond just resampling your photos. It is important to use a photo editor to resize your image, as opposed to manually dragging the handles in your HTML editor, as this will only scale down the photo, not resample it and change the resolution.
Another free option is GIMP, which is a more thorough photo editing program, similar to Photoshop, so there is a bit of a learning curve with this program. The time spent is a good investment however, if you frequently need to edit images.
For web use (and emailing as well), photos should be no larger than 72dpi. Resize your image to exactly the size you need to fit in your content. I would recommend that the images you use be as small as possible, without losing so much quality that they appear to be pixelated. Most images that are being displayed within text should be at or under 50KB. I would try to keep images below 100KB, in any case.
If you’re using Photoshop, use the Save for Web & Devices feature, which will downsize your images for you, simply by choosing whether you want a PNG, JPG or GIF file. Yes, JPGs are not the only file type that should be optimized. All images & graphics should be the smallest possible size, without losing quality, so that they will load quickly. Transparent PNG files will always be of a larger size than a JPG, but they can still be optimized reasonably well.
No matter which method you choose, optimizing your images is an important part of maintaining your website to current standards.
