Photography and Digital Camera

The key to successfully optimizing photos for web use is to find the balance between compressing the overall size of the file small enough so that it will load quickly, but not so small that it reduces the visible quality of the photo on your monitor.

In a previous lesson we learned that we can help preserve that visible quality of our photographs by keeping the original image unedited. We resized and made changes only to the working copy of the photo that we created using a lossless file format.

Once we have everything exactly the way we want it and have saved any changes, we can now begin optimizing the photos for web use.

This tutorial was written for Adobe Photoshop Elements 4.0 users, but the process is almost identical in previous versions . Although it is also very similar for other programs, Paint Shop Pro users may find it easier to follow the optimization tutorial that I wrote specifically for them.

From the menu in Photoshop Elements, select: File > Save for Web

A new box (window) will open to enter information on how you want the file saved. Since we are working with a photograph we will be optimizing it as a jpg file. To the right of the box you will see a section that says preset (In older versions of Elements it will say settings.)

Just below that area is a drop down menu of file formats to choose from. Scroll down to JPEG. Just below that is another drop down menu to select a low, medium, high or maximum optimization setting. I start with the high setting which will change the quality number just to the right of there to 80. Using the preview windows to the left to monitor the quality of the photo, I can adjust this number up or down until I have the file size as small as possible without reducing the visible quality of the image.

In Photoshop Elements, the lower the number is, the higher the level of compression (optimization). Unless I need them for a specific purpose, I do not place a checkmark in Progressive or ICC Profile. When you are happy with the results, click OK.

You will then need to enter the file name and location for the optimized jpg file format of your photograph.

That is all there is to it! You are ready to go!

Many folks use thumbnail images that are too large and often overcropped, leading to slow loading pages and poor image quality.

I am by no means a professional photographer. Heck, I barely qualify as a hobbyist, but I have learned some tips that have helped me.

My first advice is to allow your camera to do the initial work for you.

Get as close to the image as your camera will allow. Be willing to take a TON of pictures from a variety of angles to get the images you need. This will make it possible for you to clearly show very close images, while retaining the use of small thumbnails.

First, I did not take these images using a fancy camera with fancy equipment. I took them with a Kodak Easy Share Camera 4.0 MP (LS443) They were however taken on my hands and knees, filling the lens with the area of the bike I needed the focus on. I also took about 50 shots so that I could later decide which images would best suit my needs.

Note how much detail we can reveal in 150 X 100 images!

When people are browsing, they want the page to load very rapidly. Once they decide to see more, they EXPECT images to take longer to load, but they still must be well optimized.

Please note that I said “well optimized” not “over optimized.” This is something I have been learning slowly but sure, through trial and error.

Sometimes adding some minor finishing touches to your photos can add a tremendous amount of value to the product you are marketing.

More often than not, these “finishing touches” are just a matter of just a few extra seconds with an image editor.

For this example, I am using an image from Blue Mist Cabins.

This above site offers absolutely beautiful vacation cabin rentals. When marketing this type of service, you can help your visitors take a tour of the surroundings and actually imagine vacationing in the surroundings you are describing to them. Color can play an important part in this.

The key is to make your images display what your eyes see. Of course there are times when your camera doesn’t want to help you with this. It is at times like this that knowing your way around an image editor will make a huge difference.

Take for example, the following image:

As you can already see, the location is gorgeous.

However, the wide black border image may detract from the beauty of the scene. Generally speaking, if you are going to use borders, applying them in an image editor is best. They will also give a bit more of a professional appearance if you stick with a very narrow border.

The site owner has selected a blue background. In this case the blue may be just a bit too bright, taking the focus away from the image.

Following is an example that may give the viewer a better indication of the beauty of this scene.

Not having the benefit of seeing the actual scenery, I was guessing a bit when editing this image. I actually made no color adjustments.

By making some slight adjustments in the exposure (or contrast) and adding a slight unsharp mask, the beauty of the scene shines through on its own. I also deepened the background color by a few shades to allow the image to stand out as the primary focus.

If I had the benefit of seeing the original scene, I may have softened the colors slightly.

Total Time for Image Adjustment: Less then 1 minute