WebCommerce -- Image Tutorial

(This page is part of WebCom's WebCommerce Help Guide.)

Introduction

No matter what you're selling, your store isn't complete without images of your products. The purpose of this page is to introduce you to some basic concepts associated with product images, and present some tips that may make the process of getting your images together a little easier.

Keep in mind that there are many different ways to accomplish the steps that are described below. Entire books could be (and have been) written about this subject, and we can't possibly cover it all. However, we do intend to give you an essential introduction. If you would like more detailed information about working with images, search the Internet or your local bookstore.

Creating Images

Before you can have pictures of your products on the web, you need to create digital images of your products that are stored as files on your computer. To do this, you can use a scanner, or a digital camera. If you do not have access to either of those types of hardware, you could take picture of your products to your local office/copying center and pay them to create images for you. If you have a lot of products or a product line that changes often, it could be very much worth the investment to purchase a scanner and/or a digital camera.

Below are descriptions of scanners and digital cameras. For more information, try visiting your local computer store.

Scanners

A scanner is a piece of equipment that takes existing pictures (photos of your products) and creates digital images. Scanners have been in wide use for a almost a decade, and in that time have become relatively easy to install and use. Scanners are capable of creating very high quality images at and the same time tend to be quite affordable. The disadvantage of the scanner is that you need to have a picture to scan. If all you have is your product and a scanner, you need to take a picture of that product, wait to get it developed, and only then can you scan the image. (Of course, this isn't so bad if you have a Polaroid camera.)

Digital Cameras

A digital camera is a piece of equipment that is very much like a conventional camera. What makes a digital camera different is that instead of using film, the picture is stored as a computer file which can be downloaded to your computer. Using a digital camera means that you never have to develop a photo or run it through a scanner. This is the advantage of digital cameras. The disadvantage of digital cameras is that the technology is newer, meaning more expensive and lower in quality than scanners. Digital camera technology is developing rapidly, however, resulting in lower prices and higher quality each year.

Preparing Images for the Web

Once you have pictures of your products stored as files on your computer, you can use programs to manipulate them. Most scanners and digital cameras come with graphics software that will allow you to do basic tasks such as adjusting brightness and contrast, crop the image, and adjust the image dimensions. If you don't have such software, you can find it in your local computer store, and you can also search the web for free/shareware products that you can download.

Other than changing your images to make them look nice, it is very important that you consider the dimensions and file type of your images. This is VERY important as it can drastically affect how quickly your pages load and much bandwidth your account uses. Your ultimate goal should be to have a clear, crisp image of your product, and at the same time keep the filesize (how much computer space that file takes up) as low as possible. There are two basic ways of doing this: Choosing the right file type, and focusing on your subject matter.

File Types

There are many different types of image file that you can choose from when saving an image. Compuserve's GIF (Graphic Interchange Format -- .gif) and JPEG (Joint Photographic Expert Group -- .jpg) are the most popular formats for web images. To be certain that your images will be viewable by all your customers, make sure to use one of those two formats.

Of these two file types, GIF is better for images with only a few colors, such as logos, charts, diagrams, line drawings, icons and titles. In the example below, you can see that the same image in GIF and JPEG formats. Note how even though the image looks almost the same, the difference in file size is vast. Remember, smaller is better.

GIF -- 1.0K

JPEG -- 16K

When it comes to photos, (images with lots of colors, grayscale), JPEG is generally better as far as color quality and filesize. We recommend JPEG for product images. In the example below, you can see the same photo image in GIF and JPEG formats. This is a closer-to-real-life example than the logos above, but there is still a significant difference in file size. Keep in mind that the less space your images take up, the faster your pages will load and the less traffic you expend.

GIF -- 21K

JPEG -- 12K

JPEG files are capable of saving files with different levels of compression. The more you compress a file, the smaller the file, and the lower the quality of your image. We recommend using the lower end of the quality spectrum (higher compression) for your JPEG files. The difference in image quality will probably be barely noticeable, but the space you save could be tremendous. Feel free to experiment though. Find a way of saving files that works well for you as far as filesize and image quality.

Making your Images Work for You

Besides choosing the right file type for your points, there are two more key images. Primarily, keep your images small. Images shouldn't be more than 300 to 400 pixels in height or width, and thumbnails shouldn't be more than 100 pixels high or wide. Making product images larger than that will take up valuable space and just isn't necessary. Secondly, crop your product closely. You want the focus to be on your product, and nothing else -- cut out any unneeded parts of the image.

Thumbnails

Thumbnails are small versions of large images. Normally thumbnails aren't much larger than 40 - 60 pixels high and wide. Thumbnails are optional, but WebCom's system asks for thumbnails to use as links to upsell products. It's more trouble to make thumbnails in addition to your product images, but they can add a lot to the look and feel of your store. We suggest that you make all your thumbnails at the same dimensions to help keep your store consistent and pleasant to look at. Another good idea is to follow a naming convention. For example, if you make a thumbnail of ax.jpg, call the thumbnail ax-thumb.jpg

There's two ways to make thumbnails. You can create them by resizing your product image with a graphical program, or you can use a program that is designed to make thumbnails. Using a thumbnail program can save you a lot of time, and can be found by searching the net.

Uploading Images

When your images are all ready, you need to move them from your computer to our system online. To do this, you need to upload your files to our server. Publishing programs such as FrontPage are not well-suited for this. Instead, we recommend using FTP (File Transfer Protocol) to upload your files. Please see our documentation for information about using FTP.

One note about uploading your images: Your images must be uploaded someplace within the www/ directory of your account. We recommend that you create a separate directory for your images (probably called "images/") so that all your images are in one central location, and not scattered throughout your account.

Using Images with WebCommerce

When you create or update products in the WebCommerce Back Office you have the opportunity to define the URL of your product image and thumbnail image. You can update this URL any time you want. If you have trouble with your store, if your images don't appear when your build your store, try using the URL of your image in your browser. If your image does not come up, either you have not uploaded it to that location, or the URL is incorrect. For more information about maintaining products, please see WebCommerce Back Office.

A helpful tip: When you're adding images to products, it's a good idea to open a seperate browser window and go to the directory online where you have all your images. If you don't have a welcome, index, or home file in your directory, you will be able to see all your image files. By clicking on them, you will be shown the image. The reason this is important, is that if you do this you can copy the URL location of your image, go to your other browser window, and paste the URL into the product details screen. This will save you a lot of typing, and helps prevent broken images cause by typos.

Images Links

The following URLs are great places to go to find more information about images, image software, and techniques.

(Under Construction) BcRc -- PC software for the batch conversion of file types, including creation of thumbnails.

Tips and Frequently Asked Questions

Tips

• Create a generic "Sorry, no photo" image for products that you are not able to get images for.
  
  
• Adopt a filename convention to keep from confusing yourself. Match your image filename with product names or product numbers. Keep spelling, letter case, and abbreviation consistent.
  
  
• Learn to think in pixels as your unit of measurement. Set your graphical software to measure height and width in pixels.

Frequently Asked Questions

• What should my filesize be? How big is too big?
  
  Try to keep all your images below 20k. If your image is more than 20k, consider cropping it, or saving it as a JPEG with lower quality (higher compression).

• I changed and uploaded an image, but the store is showing an old image, even if I reload. What is the problem?
  
  The problem is that most browsers keep a death-grip on cached images. You can usually solve the problem by closing all but one of your browsers, going to an unrelated page, clearing your cache and then restarting your browser. Even then, a browser will still show old images from cache, and you cannot expect your customers to do this proceedure to make sure they have new images. A better solution is to change the name of the image. If your image was product.jpg, change it to product2.jpg, and change your product to use the new image. When the image has a different name the browser will not use a cached image, and you should see the new image when you rebuild the store and reload the page.