There are a few different things you will need to do with images for your online shop before you upload them to get a good presentation of your products. All the following tasks to do with images will be explained using image manipulation software called The Gimp. GIMP stands for GNU Image Manipulation Software.
Although it does hundreds of different things, you will only need to learn about three to get your pictures looking right. There are a few different reasons why I use The Gimp in all the tasks covered: It's very good, it's free and it works on many different operating systems (PC, Mac, Unix). You should download it first from the links below before continuing with the rest of these questions.
Installing on Windows: Download from http://gimp-win.sourceforge.net/stable.html. Basically download it and double click on the icon to install.
Installing on Mac: Bit more involved, download from http://gimp.org/macintosh. Recommended that you watch this YouTube video tutorial on installation: http://www.youtube.com/watch?v=JePWp3qhi6M
When you upload your full sized image, your online shop software (oscommerce, virtuemart, etc.) will automatically create a smaller preview image. This preview image is called a "thumbnail." The shopper can click on it and then get the full-sized image open up. And so get a better look at it.
You tell the software what size you want the thumbnail images in the settings. And you should decide on these settings before you start uploading images. Some things to consider are how many products you will have, if you have hundreds of products you should make your thumbnail settings for smaller images so you can fit more on a page. If you have only dozens, you can make the thumbnail images bigger so they take up more space. Also consider the size of your full-sized image. If your full-sized images are all going to be of women modeling clothing they probably won't be square (500x500) in size. They will probably be greater in height than in width (600x300). So, you should also set up your thumbnails to have similar proportions (full-sized image: 600x300, thumbnail image: 200x100) (full-sized image: 500x500, thumbnail image: 150x150).
The full-sized image that you prepare for upload should be big enough so that the shopper can see the product well, and not so big that it is obtrusive on the person's computer screen. Please note the examples below, and click on the thumbnails to see the full-sized images.
;) |
;) |
| Correctly setup thumbnail | Incorrectly setup thumbnail |
;) |
;) |
| Correctly setup thumbnail | Incorrectly setup thumbnail |
Note: If you're using VirtueMart, it won't stretch or squash your images when it automatically makes thumbnails, so you don't have to worry too much about matching the proportions of your thumbnails to the proportions of your full-sized image.
How to crop or cut images with The Gimp:
So, let's just say that you're going to be selling women's dresses which will have pictures of models wearing them. So you want to have your images half as wide as they are high (300w x 600h or 350w x 700h, etc.). You've made your thumbnail settings to the same proportions (60w x 120h or similar). But the original full-sized image that you have looks something like this:
Obviously if you upload this as it is, the automatic thumbnail that gets created will look squashed. So you will want to cut off some of the empty white space to make it closer to your requirements (half as wide as it is high).
1. Right click on whatever image you're working on and open it with gimp. Then click on the crop tool which looks like a knife:
2. Then drag a box across the picture (doesn't matter what size).
3. A new box should have opened up like this:
4. The first two settings control the position of the box, and the second two control the size. The last one you don't need to worry about. So use the arrows to get the size and position of the area you will cut out right and then press Crop.
If you make a mistake, just click on the edit menu and click on undo. Close and save and it should be done.
After you've cropped the image to the correct proportions, you might still want to shrink it in size. For how to do that, please read the next question.
Not all the images that you upload need to be the same size, but they should all be the same proportions (see previous question). One image might be 350w x 700h and another might be 300w x 600h. This doesn't matter, as long as the proportions are the same (1:2 or whatever you make it) the thumbnail will be made without stretching.
If you took a picture with a new digital camera it's most likely much too big to upload. So you'll need to scale it down. You would scale it after you've cropped it (see previous question). If the image you have is too small you can't scale it up, you'll lose quality if you do. You should instead find a bigger original.
To scale images using Gimp:
1. Right click on it and open it with Gimp. When it opens it probably won't be shown at full size. Look at the bottom of the screen that your picture is in and you'll see what percentage is displaying.
2. Make it 100% so you get a good idea of the actual size.
3. Look up the top of the screen and see the pixel size of the image:
If it's more than about 700px in any one direction, you should consider scaling it down. You can go back to the previous question "The result you're going for" and click on the thumbnails there, then look up the top of the full-sized image at the dimensions to get an idea of how big 700 pixels would be.
4. So, if you want to scale it down, click on image at the top and then click on Scale Image....
A new box will open up that looks like this:
Note the chain links next to the Width and Height. If you click on this you'll see they link then unlink. Leave them linked and you'll only need to put in one dimension, either width or height, and when you click on the next box it will automatically adjust the other proportionally. If you cropped your image first (as in the previous question) you'll want to keep the proportion the same and just scale down.
5. Click on Scale then close and save and you're done.
Before you upload your new image you should confirm that the name is okay. It's best to get into the habit of not having spaces or uppercase letters in file or image names. So "Product 124.JPG" should be changed to "product-124.jpg" or similar before you upload.