Preparing Images For Your Website

Most web image faux pas relate to poor save quality and the format in which they're saved out, i.e. .jpg, .png, .gif, as well as inappropriate file sizes (possibly the greatest faux pas of them all).

The greatest issue I hear from clients is the difficulty in preparing images for web pages and online stores. If you manage an online store and you don't own good image preparation software such as Adobe Photoshop (or Adobe Photoshop Elements or similar), then invest now. Even if you buy a second hand copy of suitable software from eBay, you need to own good image software. Learning how to use it is simple these days, with plenty of YouTube video tutorials floating about.

Your web site is your organisation's 'front' to the wider world. You wouldn't show up to a meeting with an ink-stained shirt so why present your business in poor light? This is even more so given the fact that the eye is drawn to an image on a page rather than the text supporting it, i.e. images are usually the first things we look at!

For people who update only a small amount of images, there are free online image-preparation web sites featuring image applications that provide simple yet effective crop and brightness adjustments. These web sites are perfect for low-volume users. Check these sites out: Web Resizer, Picnikand Pic Resize.

So let's take a look at images and the best ways to get your product/services photos looking great online. But first you need to understand the difference between the 3 main file formats you'll come across.

The difference between image file formats and which formats to use

JPEG format: (from Wikipedia) JPEG (Joint Photographics Experts Group) is a commonly used method of lossy compression for photographic images. The degree of compression can be adjusted, allowing a selectable tradeoff between (file) size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.

Now that last sentence should alude to something. When you compress an image (for the purpose of reducing its file size for quick download to your customer's web browser), there's going to be a trade off in its resulting picture quality. As a general rule, keep images to a file size of 100kb or thereabouts. If your image is a photograph or an image with very smooth gradients, then JPEG is the format to use.

GIF format: (from Wikipedia) GIF (Graphics Interchange Format) is suitable for sharp-edged line art (such as logos) with a limited number of colors (max. 256). This takes advantage of the format's lossless compression, which favours flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).

Best suited to line art such as most logos or any image with well defined edges. Some photographs can be successfully saved out to the GIF format but upon close inspection, the 256 colour limitation of GIF images will be obvious to a discerning eye.

PNG format: (from Wikipedia) PNG (Portable Network Graphics) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (see above) as an image-file format... PNG is considered a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions. JPEG also does not support transparency.

I think I may have just lost a large chuck of readers! In English, this means that the PNG format is only suitable for web-based images (whereas JPEG can be used for print) and with larger physical size images, the file size is considerably larger than their JPEG counterparts.

So where do you use PNG images? Anywhere that requires a beautifully sharp representation of the original image with no discernable loss in image quality. In summary, avoid using PNG for simple web-based photographs and stick with JPEG. There are exceptions to this and the best advice I can give is to experiment by taking an original photograph and then, using your image software, save that photograph out in both JPEG and PNG (and using the same physical size for each) and compare the quality and file size of the two resulting images. Many web site design elements are saved as PNG so as to retain the image's original quality and integrity. However, for all page-based photographs, generally stick with JPEG.

File size & physical size

Saving your images and optimising them for the web is an important consideration but one that many web sites ignore. As a rule, keep your file sizes close to 100Kb. With broadband leading the charge, however, designers have been given a little more room to breath and subsequently many will present JPEG (or PNG) images on a page with file sizes up to 200Kb and beyond. Remember, not everyone has a mega-fast internet connection.

If you need to present multiple images on a page, consider using your CMS to place an image gallery on the page so that your images are automatically resized and automatically positioned neatly on the page for you (however, still ensure that the original image that you upload to the gallery is no larger than 800px in width and ideally no larger than 100kb in file size).

When placing single images on a page, save your images as the size in which they're intended to be displayed on the page and once positioned, don't re-scale the image.

For example, if you place a large image on your page and then scale the image down using your mouse and dragging the page editor's image placeholders to re-size the image, the image isn't actually scaled down as such. All that happens, is that code is placed on the page telling a web browser to simply rescale the original (large) image. So in practice, the browser is told to create a placeholder of a particular size and then scale down the original image to fit that (smaller) placeholder. The browser will still need to download the image even if its file size is high - slowing down the page load unnecessarily and sending the viewer elsewhere from shear frustration! This is far more common than you may think!

If you're creating images for your store, save them with a width close to 800px. This will allow your customers to view the original as a pleasantly large (but not too large) product image. You can still achieve a 800px wide image with a file size close to 100kb with acceptable quality loss or degradation.

If and when prompted, always save images that are to be displayed on the web as 72dpi (dots per inch) resolution. Don't be tempted to save out as 240dpi or 300dpi (for print) as a monitor will only display resolutions of 72dpi anyway. The larger the resolution, the larger the resulting file.

Summary & checklist - the key to making images look great on your web site is consistency

- Keep image file sizes to ~100kb max.

- Always save with a resolution of 72dpi

- Save store product images at 800px width or whichever width supports a resulting file size in the vicinity of 100kb.

- If creating an image gallery also save images to 800px in width for consistency as the gallery scrolls through images

- Save an image as the physical size it is intended to be displayed on a page, i.e. do not place a large image on a page and then re-size the image using the image placeholder re-size tool.

- For single images on a page, keep them between 350px - 600px wide depending, of course, on the width of your web page's content region.