Product Image Sizing

A Tutorial for AbleCommerce

Home | Using One Image | Using Tumbnail Images | File Sizes | Links

Using Thumbnail Images

Two Images

There are several advantages to using two different pictures for the thumbnail and standard images. The biggest advantage is detail. When you create a smaller image in a graphics editor you can show a detail section of the product rather than just resizing the image (Image 6 [resizing] vs Image 7 [zoom]). Another advantage is reduced file size as discussed above. A page with many smaller files will load a lot quicker than a page with many larger files.

The biggest disadvantage to using multiple image files is managability. You now have two files to maintain and update in the future. You also have twice the work when creating the images, although there are many programs out there that will automatically create thumbnail images from your fullsize ones. Just do a search on http://www.download.com or http://www.tucows.com

AbleCommerce administrator with information entered for using two images. One for the Thumbnail and a different one for the standard Image. I would change the Thumbnail Params field to show Width="100" though.

Image 5 This is how the Necklace looks with the current image. It is smaller than the standard image, but because of the neclace's length, it stretches the panel, distorting the whole page.

Image 6 This is how the Necklace thumbnail looks when it's width is set to 100. Because the necklace is so long and thin, the picture shows very little detail.

Image 7 This is the thumbnail image I would use for the Necklace. Rather than using a scaled down version of the standard image, I would zoom in and show a detail of a small part of the chain. This image would only have to be about 100 pixels wide, yet it sill shows the product in decent detail.