One of the most important aspects of an effective web site is site performance—specifically how fast a page loads. Slow-loading pages lead to high bounce rates. (Bounce rates are people leaving your site.) While there are a lot of factors affecting page loading time, one of the most common is the size of images.

This is often the case for sites that don’t have a technical support staff. Small business owners, for example, might pay for a well-designed and optimized web site, but then take over the support of the site. They don’t understand the importance of small file sizes for images and start adding pages to the site with images that are too big. The time for the pages to load goes up and potential customers leave.

I recently visited a web site and noticed that the images were loading slowly. Watching images load, scanning line by scan line is a painful thing to see. This web page had the image size set to 500px by 82px, but the actual image being downloaded from the server was 1162px by 190px. The actual file size was over 500 kilobytes in size.

What should you do? There are four steps you should do with each image on your web site. Those steps are:

1. Make a copy of the original image and use the copy for all the following steps
2. Crop the image
3. Resize the image
4. Optimize the image

Let’s look at each step in more detail.

Make a copy

This is important because the following steps will modify the image.  You always want to be able to go back to the original image if you need to make new changes, especially with respect to the last step, optimization. When you optimize an image, you are degrading the image quality to some extent. If you re-optimize an already optimized image, the degradation effects are multiplied. So keep a copy of the original images. Here is a photo I will be using to demonstrate the steps:

The original photo is 3200 x 2400  pixels, approximately 14 MB in size. The file type was RAW.

Crop the image

Often images you want to use have parts of the image that you don’t want or need for your purposes. You want the image to support the purpose of the web page, and not distract from it. Cropping the image to the most important part will not only improve the image, but also makes the image smaller in file size.  In the example image, I want to focus on the hummingbird, not on the feeder. Cropping the example image and saving it out as a JPG file reduced the file size to 2360 x 1649 pixels and a file size of approximately 1.6 KB. Below is the cropped image:

Resize the image

For my web page I want an image that is 500 pixels wide, not 2630 pixels. My next step is to use my image software to reduce the size to 500 pixels across. That takes the file size down to approximately 150 KB.

Optimize the image

Image optimization is basically deciding what file format you need to save the image in, and what level of optimization you can do. Optimization is basically compressing the image, and the type of image (gif, png, or jpg) affects the type and quality of the optimization.

As a general rule of thumb, photos should be saved as JPG files. Logos with a few colors should be saved as GIFs or PNGs. If the image needs to have transparency then it needs to be saved as a PNG-24. In the case of the hummingbird photo, it should be saved as a JPG. Here is the optimized version of the image:

Its file size is 9 KB.

So those are the steps. I took a 14 MB image down to 9 KB

What software should you use?

There are a lot of photo and image processing software options available. Professionals use tools like Adobe Photoshop (which we use here at HB Design). But for simply doing this type of processing you can use free programs like Irfanview. That is what I used for this article. It is easy to use and supports batch processing if you have a large number of photos to process. It is available at http://www.irfanview.com/. One of the reasons I like it so much is that it also has a plugin available for optimizing images. The plugin acts a lot like Photoshop’s “save for web” feature, showing the image in a before and after view so you can see the effects of the optimization. The plugin is available at the same site.

Here is what Irfanview looks like when you first open an image in it

The menus have tools for rotating, cropping, sharpening, etc. To crop the image, just use your mouse to draw a rectangle around the area you want:

and press CNTRL-y to crop (or use the Edit menu).

Then to resize the image press CNTRL-r (or use the Image menu).  This brings up the resize dialog box:

To resize the image to a width of 500 pixels you simply change the Width value from (in this case) 2251 to 500, check the box to preserve the aspect ratio, and click ok.

And for the last step, optimization, use the File menu and select the “Save for Web (plugin)”  menu item.  This opens a window like:

With this tool you can see the optimized image and file size. Here the optimized size is 8,470 bytes. You can change the image from JPG to PNG to see what the differences are. You can adjust the amount of compression. You can zoom in on the image to see the effects of the compression. When you are happy with the image you simply click “save” and you are done. The optimization plugin is also available as a stand-alone program called RIOT. The stand-alone program is available at http://luci.criosweb.ro/riot/

Summary

Image size matters. If you have a page with a lot of images that are not properly sized and optimized it will affect page load times. A slow page load means that many of the visitors to you site will click away. With tools like Irfanview, it is simple to fix large images. Open the image with Irfanview, crop it if necessary, resize it, and save it for the web. Then use that optimized image on your site. Your visitors will thank you.