Creating Thumbnail Images and Manipulating Your Product Photos
Often, store owners and new website owners don’t understand how images work on a web page. Specifically, the digital photographs they have taken of their products, and then uploaded into their shopping cart software, are way too big. Or, the images appear to be an OK size, but they are fuzzy.
The reason for this is that digital cameras are often of a high enough resolution that you can make prints from them. This resolution however, is much too great to display on a computer screen. The result is that the images are too large. If these images are forced into a smaller space, they appear fuzzy; if left at their original size, they take up too much space. Digital images are measured in pixels (or dots). The more dots there are, the better the picture looks when put on paper. But computer screens are limited in the number of pixels they can display. While some high end graphics boards can display thousands of pixels, the typical person viewing your website will have a computer with a screen resolution of 1024×768 (1024 pixels wide by 768 pixels high). The digital photograph you have is likely many times that. You will also want 2 different images for each product: a large image so the customer can see the detail, and a small image (called a thumbnail) for showing multiple images on one page.
Even if you have figured out how to re-scale your images so they work on a web page, I have seen many stores that don’t use a consistent size for their thumbnail images. As a result, you get something that looks uneven, like this:
What we’d really like to see is that everything lines up nice and neatly. To do this, all of your thumbnail images must be exactly the same size. Remember, we aren’t trying to show product detail in the thumbnail image, just a quick view of what it looks like so the customer can click on it. I recommend putting everything in a square, regardless of the shape of the object, and creating each thumbnail to be about 150 pixels by 150 pixels, like this:
So now that we know what we want to accomplish, how do we do it? It is not uncommon that software was bundled with your digital camera to allow you to re-size and otherwise manipulate your photos. There are also some great software packages out there that will allow you to get really creative with your photographs, such as Paint Shop Pro (a link to a free trial version of this software can be found on the www.Cadvisor.com site). However, there is also a free tool that comes bundled with Windows called “Paint” that will allow you to do most of what you need to do. This article explains how to use Paint to create thumbnail images from your photographs and how to reduce the size of the photograph to work well with your website.
First, go to “Start – All Programs – Accessories” click on Paint.
This will open the Windows Paint program. Click on “File – Open”.
I’m assuming you have already copied the photo from your digital camera or a CD onto your hard disk. Locate the image you want to use on your hard disk and open it.
In this example, you can see that we have a large photograph of a bird house. This image actually contains two views of the bird house in one image. For our thumbnail, we only want to use the top image. Click on the selection tool as shown, and grab the portion of the image you want to use.
From the pulldown menu, now choose “Edit – Copy” to copy the selected area to your clipboard. Next we are going to create a new image from this selection.
From the pulldown menu, choose “File – New”. This will remove the previous image from your screen, but the selected area will still be stored on the clipboard, so you can paste it into the new image.
From the pulldown menu, select “Edit – Paste”.
Just the selected portion of the image is now available for editing. As you can see, it is still much too large, so we will want to scale it down.
From the pull down menu, select “Image – Stretch/Skew”.
Enter in a percentage that you want to “stretch” the image. In this case, you will enter a number smaller than 100% in order to scale the image down. As you can see, I’ve entered 25%. Be sure to enter the same number for both the horizontal and vertical or your image will be distorted. Leave the skew at zero.
Unfortunately, Paint does not allow you to enter in the number of pixels that you want the new image to be, only a percentage, so it is kind of a guessing game to get it right. A professional package like Paint Shop Pro (mentioned earlier), or PhotoShop will allow you to specify the exact number of pixels that you want the image to be scaled to. Click on OK.
The image is now much smaller, but the working canvas background is still the size of the original image. We want to make this be a square to solve the problem originally identified of the thumbnails all being the same size.
From the pull down menu, click on “Image – Attributes”.
Specify the exact width and height that you want the thumbnail image to be. Click on OK.
If necessary, click on the selection tool and center the image within the background canvas area. When you are satisfied with your image, you will want to save it.
If you were working with the original file, you would not want to over-write it, but instead, would want to save the changed image as a new file. From the pull down menu, select “File – Save As”.
Enter a new file name. I like to call all my thumbnail images the same as the original image, with an underscore ( _ ) followed by either the word “small” or “thumbnail” to identify this as a thumbnail image. I also recommend naming each image as the product ID number, to avoid confusion. Rather than naming the image “Birdhouse_small” consider naming it “BH004rwb_small”. This will make uploading your images into your website much less confusing.
One final thought: You will notice that the default file type is a JPEG (.jpg). This is the best format for web images and you will want to save all your images as this file type (unless you have a compelling reason not to, such as for animations or background transparency, but that is a different article). Good luck with creating great images for your web store!
Guest Posting
