<< Back to news

Prepping Product Shots for Web Shops

 There is so much at stake when you place images on your Web site that it pays to understand that, on the Web, a photograph is more than just a pretty picture. Images have a big impact on a Web site. Unfortunately, the impact can be both good and bad — and sometimes at the same time. While an image’s visual impact is a good thing, it can also make your site slow to download, which is not a good thing. Compelling images are critical to netting sales, but if the file size is too big, waiting for it to load will annoy visitors. In this article we will go behind the scenes and look at how you can ensure that the images at your e-store work for your site, and your bottom line, and not against it.

Knowing Your GIF from Your JPEG
The average online shopper’s Web browser can only display two different types of still images. These are GIF format images and JPEG images. While some browsers do support the PNG format, it’s sure to be a tiny fraction of your customer base, so it’s not a sensible choice for your Web site. While both GIF and JPEG formats are fine for Web images, they have different strengths and weaknesses, so are appropriate for very different types of shots. First, lets look at the GIF format.

It is typically used for line drawings and for images that have large blocks of solid color, such as clip-art and screen-shots. GIF is a compressed format so the file sizes are smaller than when using other formats, and the GIF format does not lose any image quality so a GIF image will display exactly as it originally looked. The GIF format can also support a reduced color palette. This means you can reduce the file size of the image by limiting the colors in it to a smaller than usual palette size, such as four or 16 colors. In general use, however, the GIF format supports 256 colors.

Images like these line-art and clip-art images are best saved using the GIF file format.

The JPEG format is ideal for photographs that may use millions of colors. The JPEG format also compresses the image but it does so in a glossy way so that some image detail is lost every time you save a photograph as a JPEG image. When you save an image as a JPEG, you can choose the level of compression on a sliding scale — the more the image is compressed, the smaller the file size will be. However, the flip side is that the image quality will suffer — the quality is lost permanently and can never be regained.

Use the JPEG format to save images such as photos for Web use.

Right now you’re probably asking yourself why you shouldn’t save all your images, including photos, in the GIF format so you won’t lose any quality. While this sounds tempting, it should be avoided because the way a file is compressed when using the GIF format makes it a poor choice for compressing images with a large range of colors and a lot of detail.

Selecting Image Dimensions
When sizing images for the Web, there are a few measurement units that you should be familiar with and understand. The first is the image dimensions, which are measured in pixels. The size of the average computer user’s screen is around 1280 x 1024 pixels in dimensions. This means that a photograph or image that is any larger than this in physical dimensions (pixels wide by pixels tall), will be either too big to see on a screen or it will be sized down by your visitor’s browser to fit their screen. Either way, using an image that is any larger than the visitor’s screen is generally a waste as it wastes your server space and it wastes your visitor’s time and sometimes money when they are forced to download an overly large image.

As a rough guide, a 2.2-megapixel camera shoots images that have dimensions of around 1600 x 1200 pixels — too big for most computer screens. If you are taking photographs of your merchandise for your Web store, using your brand new 10-megapixel camera, then the images you are taking (around 3648 x 2736 pixels) are many times too big to use on the Web. To check the size of an image, launch Windows Explorer and click on the image file name. You can read the image dimensions from the status bar. If you don’t see it, choose View > Status Bar to display it. In almost all cases, most images for the Web should be sized to match the size they will appear on your Web page. So, for example, if you will display the image at 400 x 300 pixels on the Web, then your image should be this exact size.

You Say You Want a Resolution for the Web?
When preparing images for your online store, you also need to consider the image resolution. A computer screen has a resolution of around 72 pixels per inch, whereas when printing the image, resolution is typically set to 300 dpi (dots per inch). When sizing your image for the Web, set the resolution to 72 pixels per inch and size the image to the required number of pixels wide and high to match the space you have allocated to it on your Web page.

Understanding the Impact of File Size
The third dimension of an image is its file size. This is the number of bytes that the file consumes on your disk and need to be downloaded by your customers for them to display the image in their browser. Even if you are using a broadband connection, many of your visitors may still be using a dial-up connection, which means it takes a really long time for them to download a large image. Keeping the images on your Web site quite small will make them quicker to download. Around 20 to 30KB per image is ideal. The image file size can also be read from the Windows Explorer status bar.

When you’re saving a JPEG image you can vastly reduce the file size by increasing the amount of compression used to save the file. Many graphics programs include a tool for optimizing images for the Web. The “save as optimized” feature helps you determine ahead of time what the final file size will be and how the image will look when compressed so you can determine if that loss of detail is acceptable. For most images, a compression setting of as much as 70 percent won’t compromise quality too much and the resulting file size will be considerably smaller.

Resizing an Image
To resize an image in Photoshop, open it and choose Image > Image Size. Select the Constrain Proportions checkbox to ensure the image resizes in proportion and is not distorted. Now set the dimensions to resize and set the resolution to 72 pixels per inch. From the Resample Image list, choose Bicubic Sharper if you are reducing the image size. Click Ok to finish.

Use your program’s resize option to size your image to appropriate dimensions and resolution for the Web.

Save the image as a JPEG image by choosing File > Save for Web & Devices. Select JPEG for photos or GIF for images and choose the 2-UP display so you can see the original and the optimized version. Experiment with Quality values until you get a result that provides both an acceptable size and vivid quality. Finally, save the image with a new file name so you don’t overwrite your original. While these steps apply to Photoshop, most photo editing programs offer similar sizing and saving options.

Use the Save for Web option to compress the image to keep it small enough for your visitors to download.

Mac versus Windows Display
One final thing to consider when working with images on the Web is that a Mac screen and a Windows screen each show the same image differently. The Mac screen is much lighter than the Windows screen and so images prepared on a Mac will look darker when viewed on a Windows computer. If you are preparing images on a Mac, err on the side of lightening your images even more than may seem appropriate so the images still look good when viewed on a Windows computer. With an awareness of the issues involved in preparing images for use on your Web site, you will be able to strike a compromise between great-looking shots and fast download times for your visitors.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.

[Source: Helen Bradley - ecommerce-guide.com - March 2008]