Tech 101: Using Photos on Your Website

It’s great to use photos on your website. You want, however, to avoid posting large photos in their original size and using html to resize the image. Large file formats are slow to load and often look crappy when not resized properly.

Quick Case Study:

Judy works for a book publisher. She writes email newsletters and helps with the website. Judy’s publisher holds a number of events: book launches, author readings and other fun activities. Judy thinks it would be great to take photos at these events and post them on the company website.

Great idea!

But Judy does not have access to software that will resize her image. Judy downloads the photos from her camera to her computer and then uploads those photos to her website. The photos are really big so she adjusts the html to display the photo at a smaller size. The html code looks like this:

... img src=“IMG20070101.jpg” width=“300” height=“200” ...

Judy’s file name is IMG20070101, it is a JPEG image, and she’s adjusted it to appear 300 pixels wide by 200 pixels high.

What you can’t see is that Judy’s image is 2 MB. That’s a huge file. It’s going to load really slowly and because the html code is forcing the photo to resize, it’s probably not going to look great.

So what should Judy have done?

Judy should use Adobe Photoshop to resize her image. She should open the file in Photoshop. See the original size (probably 3000 x 2000) and reduce the image size incrementally.

If Judy simply adjusts the image by making is 300 x 200, she’s not maintaining the quality of the photo. It will look soft or mushy. Instead Judy should reduce the image by 50% until she gets down to the desired size. She can check the quality of the image at each stage and apply Unsharp Mask if necessary. Unsharp Mask lets you sharpen blurriness in a photo.

What if Judy doesn’t want to buy Adobe Photoshop?

Judy should still resize her image using the computer rather than the html code. There are several free photo editing programs that she can try. Here are some common programs that resize and organize photos:

ImageWell (Mac)
Picasa.google.com (PC)
Picnik.com (PC or Mac)

Another tool I like is Flickr.com. Flickr lets you easily share photos online.

If Judy doesn’t need to crop her photos and she wants a fast, simple way to post photos on her website, she could let Flickr do the work.

Flickr automatically offers optional image sizes. Judy could load her photos to Flickr then pick the appropriate photo size for her website. Then she can copy and paste the Flickr html code into her website. Easy peasy.

I prefer to edit my photos using Photoshop, and I also rename them and adjust the html code so that the image is optimized for search.

If Judy followed my preferred method she would change her original code from this:

... img src=“IMG20070101.jpg” width=“300” height=“200” ...

to this:

... img src=“atwood-launch.jpg” width=“300” height=“200” alt=“Margaret Atwood book launch on January 1 at Steamworks” ...

Here’s Judy’s checklist of goodness:

1. Resize the image using photo editing software to maintain a good, quality image. The original file size of 2 MB is now reduced to 20 KB, which is much smaller and will load faster.
2. Rename the photo using appropriate keywords for search and human recognition.
3. Add an alt tag description of the photo using appropriate keywords.

Judy’s resized image with a keyword description is now going to:

1. load quickly
2. be understood and better optimized by search engines
3. be understood by Judy when she’s looking at the html code later.

There are lots of tips and tricks for preparing photos for the web. Search for “preparing photos for the web” to see more examples of how to resize and adjust photos.