Photoshop - Preparing Images for the Web

Web Graphics File Formats

The most common you will find on the web are:

JPEG

JPEG (or JPG) Like GIF, this is a high compression format, which means it sacrifices image quality to conserve space on disk. However, it has the advantage of using about 16.7 million colors, which is ideal for photos. You can determine how much compression is applied and thus how big the file will be.

When you go file>save as, use the image options to determine how big you want the file to be, and check the final file size in the size box. Each time you save a JPG file it degrades the image slightly so it is best not to overwrite the original.

At low compression levels, the loss in graphics quality is not really noticeable. At high levels, the difference is noticablely messy image. This is due to its compression method of dithering, a function where each pixel has its compression ratio modifiable by the user when saving the image.

Portable Network Graphics (PNG)

This is a more recent addition to the Web graphic format gallery. Portable Network Graphics is a high-compression format like JPEG. PNG has the ability to contain embedded text information (meta-tags) which has obvious advantages over JPEG for use in websites. They also support High Color depths and Partial Transparency is supported via Alpha channels. This means that gradients can be reproduced faithfully, and the image can make use of effect such as shading and fading.

Unfortunately different PNG files can exist for Mac and PC and images designed specifically for one platform may not display optimally on the other. This format is supported fully by Internet Explorer 6 but not currently by Netscape Naviator (4). PNG is fast becoming the most popular graphics format on the web.

Graphics Interchange Format (GIF)

This is normally used for for simple graphics and logos such as icons, buttons, maps and lines. This is an 8-bit color display where specific colors are indexed to each of the 256 numeric values. This means that the maximum number of colors displayed in a GIF file is 256 – fine for certain things but not ideal for photos. A series of GIFs can be combined to create an animated GIF file. GIF supports transparency, although not alpha transparency, it provides users with the option of a transparent background which will let the web page content show through the transparent areas.

Saving Your Images

Make sure you save images in the RGB colorspace, not CMYK (the print colorspace). When saving images for the web you are always going to have a trade-off between ensuring the file sizes are small enough to download quickly and image quality. The main things that affect the amount of space an image takes up is the detail of the image – number of colors etc, and the actual physical size of the image.

One benchmark to consider is to try and make each image less than 20-30Kb. Now internet connections are faster larger images can sometimes offer thebest choice if you consider the presentation is worth the trade off, but ideally you should design so your pages download within 10 secs even on a 28.8 Kbs modem.