I’ve talked a lot about the need for speed. Specifically, the importance of your web pages loading quickly. Images are the number one culprit. Like a vampire, they are seductive and at the same time suck the life out of your site. (By the way, since this article deals with images, I will be using some as examples and this will cause the pages to take a while to load.)
Everyone wants to use images. They can be interesting and give your web site some style. Also, if you’re selling something on-line, the prospective customer likes to have a look at what they are buying. Imagine the old Sears catalog without any pictures, just descriptions. Pull out the Yellow Pages and notice how the ads with pictures grab your attention first. So, we could have a page load lightening fast without any images, but that would be very boring. Yes, we need speed, but unless we’re simply looking for information, we want a picture or two.
Remember the old Chinese saying, “One picture is worth a thousand words”? Unfortunately, some pictures take longer than ten thousand words to load. Much of the time the problem is the images were not properly prepared for use on the internet. Images are usually in a GIF or JPEG format. Without going into too much technical detail, you have probably seen these file extensions on images you have downloaded or used with e-mail. It may look something like this, “name.gif” or “name2.jpg”, etc. Generally speaking, the GIF is best used for graphics such as cartoons or font images and JPEG (same as JPG) is best used for photographs. There are other formats, but the principles are the same for most.
Each image is a file and each file is made up of bytes. The number of bytes will determine how long the image will take to load. They can also determine how sharp the image is. Don’t confuse the displayed dimensions (physical size) of an image with its file size. A common mistake I have seen by novice webmasters is using the width and height elements of an image tag to size the image for the page. Below is an example of this:
Picture 1 Picture 2 Picture 3
All three of images above are from the exact same file. (A picture of Lucy Liu from Charlie’s Angels, I think. Anyway, thanks, Columbia Pictures) I have compressed the image to about 19 kb (kilobytes or thousand bytes). More on compression in a few minutes. However, the actual image dimension in pixels is 179 x 268. The one on the left appears much larger and the one on the right appears much smaller. The one in the center is displayed with its proper dimensions.
So, how was this accomplished? As I mentioned, the width and height elements of the image tag were manipulated to change the size of the image. Manipulating an image’s dimensions this way is a major mistake. I could have left these elements out of the image tag and the image would have been displayed in its proper dimensions. So, you might suspect that those elements are for resizing the image. Wrong. The width and height elements are to allow the browser to calculate how much space to allocate for an image. This helps the page load faster.
Besides, resizing an image using the width and height elements of the image tag can distort the picture, especially when making it larger. Fortunately, with the previous examples I kept the ratio of width to height the same. If I hadn’t, the picture could be distorted such as this:
Picture 4
Here are the image tags I used for each of the previous examples. All that I changed was the width and height elements and the “alt” element. The “alt” element is used to describe the image or the image’s purpose. It has nothing to do with the image file itself and will be the topic of another discussion.
Picture 1:<img src=”Images/liu_1.jpg” width=”197″ height=”295″ alt=”Lucy Liu Picture 1″>
Picture 2:<img src=”Images/liu_1.jpg” width=”179″ height=”268″ alt=”Lucy Liu Picture 2″>
Picture 3:<img src=”Images/liu_1.jpg” width=”89″ height=”134″ alt=”Lucy Liu Picture 3″>
Picture 4:<img src=”Images/liu_1.jpg” width=”200″ height=”200″ alt=”Lucy Liu Picture 4″>
No matter what dimensions were specified in the tag, the same 19 kb file was accessed. Each of those four pictures took the same amount of time to load. Now that they are most likely in your computer’s cache, they will load very quickly, if you revisit their page soon. The cache remembers file names and saves the file. It then loads them from your computer on your next visit, if they are still in the cache. Some Internet service providers (ISPs) such as AOL have their own cache to speed up page loading for their subscribers. The downside is you’re usually not seeing the best quality image or even the correct image, if it has recently changed. The image file’s contents could be completely changed and the file name kept and this would cause you to see the previous image, rather than the actual current image until the cache is cleared.
So, now that we know that we should resize an image before we use it on our web page and we should state its proper dimensions in the image tag, what’s the other common mistake we should avoid? File size. File size is made up by the number of bytes used to compile the image. The more bytes, the larger the file. The larger the file, the longer it takes to load.
Not to pick on Lucy Liu anymore, I will show you examples using a picture I took of a dragonfly. The original image taken with a digital camera was 1760 x 1168 in pixels and a file size of 6.167 megabytes. That’s mega as in million. Those dimensions are way too big to display well on a web page and you could eat a sandwich waiting for it to load 6 meg, even if you have broadband. Remember, most visitors still use dial-up modems. Still, I want to share my dragonfly picture with you on the web, so I have to make it faster loading and a reasonable size.
Here is a “thumbnail” representation of the original picture. It is highly compressed (small file size) and small in dimensions at only 5% of the original at 88 x 58.
It’s hard to discern and just gives you a vague idea of what the original image is. That is exactly what a thumbnail’s purpose is. Usually, a thumbnail is linked to a larger, more detailed image. This one is not. If you had several products to sell and you put their images all on the same page in their full file size, the page could take a long time to load and many visitors wouldn’t wait. However, if you used thumbnail images of the products, they would load quickly and the visitor could then select specific image(s) for closer inspection without waiting for images, they don’t want to see, load.
To manipulate images, you’re going to need image editing software to accomplish this. Lack of such tools is the reason many novice webmasters don’t compress their images and use the width and height elements to size them. This is an article on what needs to be done, not how to do it. Teaching you how to use your image editing software is beyond the scope of this discussion. That being said, you need to size your image. Usually, but not always, this entails making it smaller. The first step is to ask yourself whether the entire image is needed. Since I’m focusing on the dragonfly, you don’t need to see my entire backyard. Thus, I will crop the picture. Even so, the image dimensions are still too large at 668 x 488 and the file size is still huge at 978 kb (almost 1 meg). At least I’m now focused on my subject, the dragonfly.
Next, I will resize the image to fit my page. I decide that a 50% reduction in dimensions would be the right size. So, half of 668 x 488 is 334 x 244. It’s now the correct dimensions, but the file size is still too big at 245 kb. It needs to be compressed. It will load very quickly, if I compress it down to 5 kb. However, it’s not very sharp:
After some experimenting, I decide that 20 kb is a reasonable size. It still gives you a detailed view of the dragonfly without taking too long to load. So, from 1760 x 1168 at 6 meg to 334 x 244 at 20 kb. Here is the finished product:
The basic points in using images on the internet are:
- Crop your image when possible to keep the focus where you want it.
- Don’t use the dimension elements of the image tag to size your image. Use your image editing software.
- Compress the image’s file size to as small as possible while retaining as much visual quality as possible.
- Create thumbnails that link to the larger image.
First appeared at Dr Tandem Web Page Design
Dan Prinzing, a.k.a. DrTandem, is a web page designer in Encinitas, CA. He specializes in building sites for small businesses. Offering free critiques as time permits as well as information for the novice webmaster. You can visit his site at http://www.DrTandem.com.
