Optimizing Photos for the Web

A photo is optimized when it has that balance of good display quality and small file size for quick download.

Common sense tells us that if we are taking digital photos for a web page, with no intention of printing those photos, we should choose the web or VGA quality setting on our camera. This is typically 640 x 480 pixels.  (If you can't get a good close-up, use a higher resolution, knowing that you will be cropping down to VGA size.)



Usually, we would not need anything larger than the example above.  Anything larger than the monitor's screen resolution would require scrolling from side-to-side and up-and-down, in order to see the entire photo and that is generally annoying, unless it is supposed to be a panorama such as a satellite photo of the earth.  If you design your web pages for super wide screen, your pages will be cumbersome to navigate for all who have a "normal" screen.  Good web design works for all screen sizes, so remember that a lot of people have 800 x 600 screens.

The opposite of optimizing a photo is to use a high resolution photo (that would cover several screens) and then force it to display within the screen by using width and height attributes in the img tags.  This results in a poor quality display and long download time.

3 Characteristics of an Optimized Photo

  1. Cropped to remove unnecessary background
  2. Resampled to bring the pixel dimensions down to the desired display size
  3. Compressed by choosing a JPG quality setting

Resampling

Resampling reduces the pixel dimensions, effectively reducing the physical size.  For example, from 1600 x 1200 pixels down to 640 x 480 pixels.  Many pixels are discarded and this decreases the file size.

Whenever you start with a very high resolution photo, such as a 6 megapixel one, aggressive resampling down to desired display size will result in loss of quality.  The program you use to do the resampling will determine how bad the quality loss will appear.  Very good photo-editing programs such as Adobe PhotoShop/ PhotoShop Elements, Paint Shop Pro or MS Digital Image Pro, do the best job of resampling.  Possibly the program that came bundled with your digital camera or scanner, will also do well.  Read your program's help file for resampling instructions.

Unfortunately, Broderbund's desktop publishing programs - Print Master and Print Shop - render resampled photos with jaggy edges and noticeable pixelation.  Certainly, these programs perform well when used for its intended purpose of producing printed documents, but resampling for the web is not its finest feature.

If you do not have a good photo-editor, you can use MicroSoft Paint (found in all Windows Operating Systems) to resample photos.  Done correctly, the results are satisfactory.  Tutorial can be found here.

JPG Compression

After resampling your photo, save as (or export as) JPG.  A good photo-editor will offer you a choice of quality settings, such as high, medium and low.

JPG compression does not change the pixel dimensions of the photo.  JPG compression reduces the file size, but at the expense of reducing the quality.

Applying maximum compression results in the smallest file size and thus, lowest quality;
Applying no compression results in the highest file size and thus, highest quality.

What is the perfect balance of acceptable quality and small file size?  Apply enough compression to get the file size under 60 KB.  However, if you find the quality suffers too much, undo and use less compression.