How To Optimize Web Images:
Get Fast Downloads And Happy Visitors

Optimizing web images and photos will give faster loading times. That can be significant for just one image on a page, and if you have a few images there can be a major time difference. Remember that not everyone is on broadband yet!

Images add interest to your web page but if the load time is too slow visitors will hit the back button before the page loads. All the extra effort of using images hasn't just been wasted, it's been counter-productive.

Web Image Formats

The formats that you save your images in affects the loading times. The two formats most used are jpeg and gif.

Jpeg is used for photos and it lets you reduce the file size dramatically to get a faster loading time, while the picture still looks just as good on the web page. If you reduce the file size too much, the picture will look worse though. There is a compromise between file size and an acceptable picture quality.

Gif is used for simple images like clip art and logos. It's limited to 256 colors, so it's no good for photos.

There are other image formats such as bmp and tiff, but their file sizes are way to big to be used on web pages or in emails.

How To Optimize Photos

This photo could benefit from cropping.

When you optimize an image for the web you're making changes to make it load quickly. There are two parts – first making changes to the photo itself, and second, reducing the file size.

Start by optimizing the image itself. Before you do anything save the photo under another filename so that if you make an irreversible mistake you still have the original untouched photo and you can start again.

Chances are if you're putting a photo on your website you only want a part of the original shot. Open up your favorite photo editor and crop the photo to get rid of the bits you don't need.

The photo has been cropped so that the Beetle is much larger though the photo is the same size as the one above. If this was on a car website I would now link it to a larger image on another page.

Then resize the image. If it's a photo that you took with your digital camera or that you scanned, it will probably be way bigger than you need for the web page.

The Beetle pictures were originally 2272 pixels (px) wide. Both photos have been resized to 250 pixels wide, and the second one was cropped first to show a bigger picture of the car itself.

After you've got the photo the way you want it, save it using jpeg compression. With Adobe Photoshop Elements you use the Save For Web option and you get to choose amount of compression while you view before and after pictures. Other photo software will let you do the same thing, just a bit differently. Get the smallest file size you can while you keep an acceptable picture quality.

How Size Affects Download Time

When I saved the Beetle photo with jpeg compression I got the file size down to 13kB (kilobytes) and a download time of 3 seconds with a 56 kbps (kilobits per second) dialup modem which is the fastest dialup. And yes, people do still use dialup. Without compression the photos would have had a 64 kB file size and 11 second download each.

Checking with my photo editing software, if I make one of pictures 500 pixels wide it will be a 34 kB file size which will still load in six seconds.

With no compression at 500px wide it's 206 kB and 36 seconds download, so you can see the both size of the photo and the amount of compression is important to download speed.

Optimizing your images is important when you send them in emails too. Crop the photo, resize it, and save it with jpeg compression or the friend you send it to may end up hating you.

SIDEBAR: Image file sizes are normally given in bytes such as kilobytes (abbreviated K or KB or kB) and megabytes (MB). Download speeds are normally given in bits per second such as 56 kilobits per second (56 kbps). There are eight bits to a byte, so 8kb equals 1 kB.

Using Thumbnails

Lots of times you want visitors to be able to see a good size picture that is going to load slowly. You can use a smaller image (called a thumbnail) on your web page with a link going to the full size image on another page. I find I normally need to use the “sharpen” command with thumbnails to make them look better.

Optimizing Gifs

The gif image format is used for simple images with limited numbers of colors and large areas of one color such as logos and icons.

Just like with photos, the first step in optimizing the web image is to get rid of the parts you don't need by cropping it. If you can make the image smaller, that will reduce the file size as well.

Gifs can have up to 256 colors, but you can specify how many colors it's saved with. Reducing the number of colors can make a dramatic difference to the file size so try reducing the number of colors and see how that affects the file size and the quality of the image.

Anti-aliasing makes the edges of graphics smooth, but it also increases the number of colors and the file size. Try turning it off and see how your image looks. You may not need it.

Dithering is putting two colors together to make it seem like there is a third color there, and it's used to soften the effect of reducing the number of colors in the image. It can increase the file size, so check your image with no dither, or use the lowest percentage of dither that gives you an image with good enough quality.

Gifs are compressed without affecting the quality of the image when they are saved.

Web Image Software

You'll need software to work with images, but it doesn't have to cost a fortune. Gimp is open source software that is free and it will do more than you'll ever need for web page images. There is other free software you can use as well. Do a search on “free image software” or “free photo editing software” to find it.

I use Adobe Photoshop Elements 2.0 that cost me $30 a couple of years ago and it is more than adequate. The latest Photoshop Elements costs around $100 now. When I first started editing photos I used a program I got free with a magazine and it worked well too.

So if you need to use photos don't think you'll have to pay $800 for the software.

Go here to learn how to add images to your web pages.

Return from Optimizing Web Images to How To Build A Web Page

Return to Build A Website Home