Prepping Product Shots for Web Shops By Helen Bradley
March 11, 2008
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.
(Continue to Page 2 for File Size, Resizing and Mac Tips)
Add ecommerce-guide.com to your favorites Add ecommerce-guide.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
IE 7
Firefox 2.0
