Product Image Sizing

A Tutorial for AbleCommerce

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

Using One Image

When to Use One Image

The biggest benefit to creating one image is managability. With one image you don't have to remember to update or change two images for any future changes. In the AbleCommerce administrator you enter the same image for both Thumbnail and Image fields. To make sure you don't end up with a large image in the thumbnail places, enter Border="0" Width="100" in the Thumbnail Params field. This will resize the image so that it will display 100 pixels wide regardless of the actual image size. The panels are 150 pixels wide, so make sure the thumbnail is not wider than 150 pixels or the panel will widen and look bad.

There are several disadvantages to using one image. First is the process of resizing the image. When an image is resized in a web browser, sometimes the quality is reduced. Images can look blotchy and rough instead of clean and smooth. This is due to a lack of antialaising (blurrring pixels to make edges look smooth). If you resize the image in an image editing program, it will be antialiased and look cleaner. Another disadvantage with one image is file size. When you use a single large file the person viewing your page has to download the entire image, regardless of how big it will display on the web page. So if your large image is a large file it will take longer to download than a small thumbnail image. This is generally only a big problem on group and category pages where there might be 10 or 20 images. A general rule is to not have thumbnail images larger than about 12k. So if your full size image is only 12k (1200b), then resizing it is fine. If the full size image is 100k (10000b) you may want to consider using a second smaller image for the thumbnail instead of resizing the large image. A third disadvantage to using one image is product detail displayed. In most cases this isn't a problem. The candle below (Image 1) looks fine when it is resized. But the necklace at the bottom of the page (Image 6) doesn't look very good when it is only 100 pixels wide. When a small version of the large image doesn't show much detail a zoomed shot of the product may be the best option (Image 7).

AbleCommerce administrator with information entered for using one image for both the Thumbnail and standard Image.

Image 1 This is how the Waxberry Candle will appear as a thumbnail when it's thumbnail width is set to 100.

Image 2 This is how the Waxberry Candle looks if the Thumbnail width is not set to 100. It stretches the panel and makes the page look distorted.

Image 3 This is how the Waxberry Candle looks when it is resized in the browser (Setting the Thumbnail Params to Width="100" ) for the same image used for the standard image.

Image 4 This is how the Waxberry Candle looks when it is resized in a graphics editor. Notice how the image is clearer. This is due to anti-aliasing.