OverviewPreparing your images correctly is an important step in having a successful website. The two most common reasons that your images will not work is that they are named incorrectly or the file sizes are too large. Your file names should avoid spaces and special characters (!@#$%^&*()). Files should also end with a three character suffix. For example: image1.jpg.
The images should be saved at 72 dpi. Typically, product images would be from 30k-200k. If the file sizes are larger, you should consider reducing the file sizes as you might encounter problems, especially when attempting to load multiple images at once.
|
|
|
|
|
Cropping and Resizing with IrfanViewIrfanView is a free program used for image viewing and simple image manipulation tasks (you can download IrfanView here). Two common tasks IrfanView is good for are cropping and resizing. You crop an image when you want to isolate one part of it. You resize an image when you want to make it smaller.
(Hint: If you need to both crop and resize an image, it is usually better to crop first. This way, you can see how small your cropped image is before making it even smaller.)
Cropping an Image with IrfanView
You can use IrfanView's crop feature to isolate a particular piece of an image. For example, if you had a product image with too muich space around it, you could get rid of this space by cropping.
To crop an image:
1. Open IrfanView.
2. Open the image you want to crop:
a. Select File > Open. You should now see the Open window.
b. Find the image you would like to open.
c. To open the image, click the image filename and then click the Open button. You can also double-click the filename to open the image. 3. Click on and hold a corner point of the area you want to crop. Then, drag your pointer to the opposite corner of the area and release the mouse button. The cropped image will now be bounded by the selection outline you created in this step.
4. Select Edit > Crop selection. The image will now be cropped.
5. Now that you have cropped your image, you will want to save it. You can either save over your original image or create a new image.
(Hint: If you are making several modifications to your image, save often to avoid losing your work.)
a. To save over your original image: Select File > Save.
b. To save as a new image: Select File > Save as. In the Save Picture As window that pops up, navigate to the folder where you want to save the image. Enter the name of the new image and click the Save button. If your image is very large, you may want to resize it (see below).
Resizing an Image with IrfanView
You can use IrfanView's resize/resample feature to make an image smaller.
To resize an image:
1. Open IrfanView.
2. Open the image you want to resize:
a. Select File > Open. You should now see the Open window.
b. Find the image you would like to open.
c. To open the image, click the image filename and then click the Open button. You can also double-click the filename to open the image. 3. Select Image > Resize/Resample. You should now see the Resize/Resample image window.
4. There are two main ways to resize your image:
a. Set new size: Select the radio button to the left of "Set new size" (selected by default) and enter the new values. Using this method, you can type in the number of pixels/centimeters/inches for the width or height of the image. By default, if you change one dimension, IrfanView will automatically resize the other dimension proportionately. To override this default, uncheck the "Preserve aspect ratio" checkbox at the lower left of the window. Pixels are the standard unit of computer graphics. If the image is a product image and will be displayed on your website, resizing to around 500 x 500 pixels is usually a good guideline.
b. Set new size as a percentage of original: Select the radio button to the left of "Set new size as a percentage of original" and enter the percentage of the original width or height you want the resized image to be. By default, if you change one dimension, IrfanView will automatically resize the other dimension proportionately. To override this default, uncheck the "Preserve aspect ratio" checkbox at the lower left of the window. Once you have entered the new values, click the OK button.
5. Now that you have resized your image, you will want to save it. You can either save over your original image or create a new image.
(Hint: If you are making several modifications to your image, save often to avoid losing your work.)
a. To save over your original image: Select File > Save.
b. To save as a new image: Select File > Save as. In the Save Picture As window that pops up, navigate to the folder where you want to save the image. Enter the name of the new image and click the Save button. Your image is now resampled and ready to be loaded onto your website.
Converting Other Graphic Files to .jpg FilesConverting non-pdf graphics files
For converting most graphic files (.bmp, .tif, etc.) to .jpg, you can simply open the file in Irfanview, then File > Save As a .jpg file.
Converting PDF files
To convert pdf files, open the pdf file using your pdf reader (such as Adobe Acrobat Reader) and take a screen shot.
Open Irfanview and click Edit > Paste.
Crop, if necessary, using the instructions above, then save the file as a jpg.
|
Scaling and Sizing image with Graphic Converter (Mac OSX)Save your image to your hard disk, name it so you will be able to find it in the next steps.
Open Graphic Converter.
Open the image you saved in step 1.
Go to the Picture menu -> Resolution.
Set the resolution to 72 dpi x 72 dpi.
Go to Picture menu -> Size -> Scale.
There is not one correct size to scale your image to. Each 72 pixels are going to represent an inch. So if you want your image to be 4 inches wide, you would set it to about 288 pixels wide. If you are not sure, it is better to leave your image larger rather than smaller. 640 pixels across is a very large size for a web image. On many websites the larger images are about 500 pixels across.
Select File menu -> Save As...
Select a new name for your image so you don't overwrite the original.
The Save dialog box will appear.
Select Jpg and choose a quality level of "90".
Save your image.
|
Sizing Images for Specific DimensionsIf you have a section on your website that requires that you pre-size images prior to loading them in the Site Manager (e.g., for a slide show), here are some instructions for sizing and cropping the images.
1. Open a copy of the image in your image-editing program.
2. There should be way to check the images size and canvas size. Usually it's under an "Image" tab. You may or may not be able to access the image size and canvas size from the same window, depending on your image-editing program.
3. If there is an option to constrain proportions when making sizing adjustment, be sure this option is checked.
4. Put in the width that you want in the width field. The height should change automatically. DON'T SAVE YET.
5. Evaluate the height.
If the resulting height is more than what you need, go ahead and click okay, then proceed to the next step.
If the resulting height is less than what you need, enter the height you need in the height field (the width will now be more than you need), then click okay and proceed to the next step.
6. Adjust the canvas size.
You will not want to constrain proportions on this step as you only want one dimension to change.
If your image is taller than you need, set the anchor to the top, center, or bottom - this is where you want the image to be adjusted from - then adjust the canvas size to the correct height.
If your image is wider than you need, set the anchor to the left, center, or right - this is where you want the image to be adjusted from -adjust the canvas size to the correct width.
7. Save your image with a name different than the original image.
Note: If you can't find the image size or canvas size options in your image-editing programs, try checking the help documentation for the program.
|
|
|
|
|
|
|
Converting Files to Web GraphicsConverting Non-Graphic Files to GraphicsHere's a "cheaty" way to create a graphic image out of a file that isn't a graphic.
1. Open the file with whatever program will open it.
2. Adjust the size so you can see the entire part of the page that you want to include in the image.
For example, if the file is a pdf, change the percentage down until you can see the entire page.
3. Push the "Print Screen" button on your keyboard. It's usually somewhere top-right. It will seem like nothing happened, but it copies an image of what you're seeing on the screen onto the computer's "clipboard".
4. Open an image editing program, like Photoshop or Irfanview, and open a new file.
5. Do a paste command (Ctrl + P) or right-click Paste.
6. Crop the image and save as a jpg.
Converting Non-Web Graphic Files to Web GraphicsIf you have a file that IS a graphic, like a .tif or .bmp, you can open these in most image-editing programs, then save as a jpg.
Some image-editing programs, like Photoshop will also open .eps files.
|
Tips for Naming Image FilesBelow are a list of recommendations that you should follow when working with images and the MightyMerchant Site Manager:
1. You should always use unique filenames if you are going to use the same image in different image fields.
For instance, if you are using the same image for a category image as you are using for product image you should save a copy of the original image and name it something different for the category image filename than the product image filename.
Note: If you change the size of the original image in the process of renaming the file, make sure to not copy over the original file with the resized image.
Example:
cat_myimage.jpg for the category image and myimage.jpg for the product image.
 |  | 
|
daffodil.jpg
|
cat_daffodil.jpg
|
lg_daffodil.jpg
|
Image 1 (main product image)
|
Picture (category image)
|
Image3 (click to enlarge image)
|
The reason you want to do this is that often the category image dimensions are set to be different than the product image dimensions and a filename of the same exact name will overwrite the previous file upload at perhaps a different image dimension. This will cause the image to display on both pages at the same size and possibly affect the layout of your website.
2. You should not to use the same filename for two different images.
Example:
pink.jpg | 
pink.jpg | |
rename to "pink_rose.jpg" prior to upload |
rename to "pink_carnation.jpg" prior to upload |
A rose image named “pink.jpg” and a carnation image named “pink.jpg” are obviously not the same image. If you upload the rose image first and then upload the carnation image second, the carnation image will display in both places as it will have overwrote the previous uploaded file.
3. Do not have “home” included as part of the filename.
Ex: home_image.jpg.
4. Filenames are case-sensitive.
The web server sees “imagename.jpg” and “IMAGENAME.JPG” as two different files.
5. Do not make your filenames overly long.
If the file name exceeds the maximum characters, the name will be truncated and likely lose the file extension and thereby will not display on the website.
Example:
Use “royal_william_rose.jpg” instead of “dark_red_hybrid_tea_rose_royal_william.jpg”
6. Do not include symbols or characters in your filenames.
Symbols to avoid are ampersands, parenthesis, commas, apostrophes, periods, pound signs, asterisks, dollar signs, just to name a few.
The names should be comprised only of letters, numbers, dashes, and underscores, and end in a ".jpg" or “.gif” extension.
Example:
Use “pink_and_white_roses.jpg” instead of “pink & white roses.jpg”
7. If you are naming a file and intend to use multiple words in the filename it is “best practice” to separate the words by using an underscore.
Example:
Use “pink_rose.jpg” instead of “pink rose.jpg”
|
