Slow Loading Graphics
POSTED ON THURSDAY, JANUARY 27, 2011 AT 10:08 PM
We often see slow loading graphics on websites, especially when someone uploads a digital camera photo to their website without having taken the proper optimization steps beforehand. You've probably seen this happen many, many times yourself. The photo begins loading from the top of the image down, slowly "dropping in" like a blind being lowered down over a window. Why does this happen?
This isn't really an article about optimizing graphics for the web since there's a tremendous amount of information to cover when you begin talking about true image optimization. It's more of a common sense issue. When you upload photos to your website*, never upload the original photo from your digital camera. Today's 12 to 14 megapixel compact digital cameras shoot photos which are 4 to 6 megabytes in overall file size (and even larger) depending upon your camera model and settings. Pixel-wise, these photos are often 4000 pixels wide by 3000 pixels high. These are huge files which are completely unsuitable for uploading to a website. Sending them to someone by e-mail is even worse since you can fill up someone's mailbox in a real hurry and be held solely responsible for those wonderful "user is over quota, try again later" messages! Here's the snippet of HTML code we see on a website which sets the dimensions of the original photo:
<img src="P1000457.JPG" alt="my huge photo" width="640" height="480">
There's nothing wrong with the above code. So what's the problem? The problem is that even though the above code tells the browser to display the photo at 640 by 480 pixels, the original, full-size 4000 pixel by 3000 pixel photo still has to load regardless of the size you've typed into your code. Viewing a 6 megabyte photo online takes a lot of time and processing power. Your visitor's computer and browser still have to take a huge photo and "squish" it down into a 640 by 480 pixel space resulting in a lengthy delay. Add to this, the speed of your visitor's Internet connection and this is why your photo will "roll down" like a blind being lowered down over a window. It's a waste of time, so to speak. If your photo had been properly optimized and re-sized to 640 by 480 pixels beforehand using the correct software, you'd avoid this problem completely. But quite interestingly, we still see this problem on a few of the websites we happen to land upon no matter what it is we're searching for during any given week. It can be so frustrating when you're in a rush.
A 3508 by 2190 pixel (4.1 megabyte) photo which was optimized and re-sized to 400 by 246 pixels (37.76 kilobytes) using PhotoShop — loading instantaneously
A slightly faster simulation of how this exact same photo would load in a visitor's browser if it hadn't been optimized and re-sized beforehand using PhotoShop
What the average person may not necessarily understand is that before uploading photos from a digital camera to a website, the photos must first be re-sized using an application like Adobe PhotoShop (or the more economical Adobe PhotoShop Elements). Using PhotoShop, you can re-size your photos from 4000 by 3000 pixels down to 640 by 480 pixels by selecting the Image Size menu item from the Image menu. Once you've done this, you can then select the Save For Web & Devices menu item from the File menu and save the new file using the JPEG High preset (you can bypass some of these steps and even create "droplets" in PhotoShop which will do this for you automatically if you're not afraid to play around with the application a bit).
The photo we used for testing purposes (a different photo than the one above) was a daytime, "portrait" shot taken with a Panasonic Lumix ZS7. Just a very plain and simple 4000 by 3000 pixel photo which was re-sized to 640 by 480 pixels. In the process of optimizing and re-sizing our photo, we were able to take the original 4.4 megabyte file and reduce it to a 33.22 kilobyte file with a few clicks of the mouse. That's 135.63 times smaller than the original file size! Don't get pixels and bytes mixed up here — when it comes to download speed, what we're concerned with is the overall file size measured in megabytes (MB) or kilobytes (kB):
4.4 MB equals 4505.6 kB divided by 33.22 kB equals 135.63
The optimized photo was still very presentable when saved with PhotoShop's JPEG High preset. In some cases, you may wish to use the JPEG Very High preset depending upon the characteristics of your photo and especially if you need to add text to your images.
Optimizing and re-sizing your photos before placing them on your website will ensure that your photos will load almost instantaneously using the same snippet of HTML code shown near the top of this page. There will be very little processing power required in order to display the image and you'll avoid the lovely "blind effect" shown above. And as an added bonus, you'll keep your visitors happy as well! Just remember that it's not necessarily the larger, 6 megabyte photos which cause this problem — even a 1 megabyte photo from an older digital camera can cause the "blind effect" if you haven't taken the time to properly prepare photos for your website.
For many of you, this may be old news. But for many others, this may be the answer you've been looking for if you've been wondering why your images load so slowly on your website. With all this hoopla about building faster websites these days, we figured that this article may come in handy especially for those who prefer to go the do-it-yourself route.
* Note that we're referring to personal and company websites in this article, not photo sharing sites. Many photo sharing sites can automatically do the re-sizing for you.
Sites Recently Completed Or Updated
Move your mouse over a link below for a web site design preview. Click on a link to visit a web site: