Schewanick Computer Services

Optimizing photos of your products for your web page. How to make the most of your photos.

Taking Photos:

Composition:
Zoom in on the product. Make it center stage. Whatever the product is, you don't need a lot of walls and floor. If you need a horizon in the picture, have it either one third from the bottom or one third from the top of the picture. A horizon dividing a picture into two halves makes it boring.
Background:
The subject in your picture should contrast and stand out from its background. You want the visitor to focus on the product, not the background. Your web designer can display the product with the same background color as the web page, provided the background doesn't contain colors also in the product. (We've seen a product with things accidentally growing out of it).
Focus:
Sharp pictures are usually needed to sell products, unless you are selling a misty holiday location.
Images to computer:

Digital:
Copy images from your camera via USB cable and 'paste' them to a folder (say \Photos).
Film:
Scan prints to a folder (\Photos).
Copies:
Copy the images from \Photos to another folder (say \Images). You can edit pictures in this second folder safely knowing you still have the originals.

Preparing for the web:

Graphics Software:
Adobe's Photoshop and Corel's Photopaint are good. A low cost easy to use program is Jasc's Paint Shop Pro 7 or 8. (9 is now Corel's). There are many shareware programs.

Format:
JPG and GIF are normal formats for images on web pages. Not all browsers display PNG and BMP. Use GIFs where colors are flat and JPG for most photos. Every time you save a JPG the image quality degrades. Open original JPGs and save in TIF format. Edit in TIF and make just final save as JPG.

Crop:
With graphics software, you can 'crop' your picture leaving out unwanted areas. It's your product that's for sale, not walls and floors.

Quality:
There are graphic tools to increase or decrease contrast or brightness, or edit colors, edges and backgrounds. The original picture must be good, or you will waste hours editing.

Size:
Resize the final image down to the size you want on the website. On 800x600 screens the browser margins leave only about 762 pixels of viewing width, and the viewing height is reduced by the size of the tool bar of individual visitors. Your 2400x1800 pixels picture may end up 400x300 which is why cropping is important to show the product as a big part of the picture.

Compression:
To enable fast loading on the web, JPGs can be compressed. Compression by 25% to 35% can display good pictures, depending on the original. GIFs can be faster loading if the number of colors is reduced from 256 to 16, or whatever number keeps the desired color quality. Keep the image file on the graphic software screen, while viewing the effect in your browser in another window. Use trial and error.

Thumbnails:
A large number of images can be displayed as thumbnails on one page, which can be clicked through to the full picture on another page. You can have two files for each picture, small and full size. The page with thumbnails will load faster. Or the thumbnail page can display the full size image in thumbnail size by specifying smaller widths or heights in the HTML code.
About the Author
Ken McKay is a web designer for small business. More information on web design is available at platypus websites - www.platywebs.com.au