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 do not 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 does not contain colors also in the product. (We have 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 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 is your product that is 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 800×600 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 2400×1800 pixels picture may end up 400×300 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.
These articles were first published on www.platywebs.com.au and have been re-published on many other websites and ezines over the years. New readers are still finding them to be of value and up to date with today’s conditions. We believe they illustrate common sense and the value of thinking through situations. Please check out the other articles advising on small business, web design, search engine optimisation, web hosting and domain names.