OPTIMIZING GRAPHICS FOR WEB

Adobe Photoshop tutorial

A photo or a graphic designed for the World Wide Web must meet the requirements of two variables with reciprocal values – quality and size. Photoshop is the most powerful software that gives you full control over these two values.

FILE FORMATS

The most suitable file formats for a web site are JPEG and GIF. Using these file formats is not as easy, as it seems. And the usual question is JPEG or GIF – what file format to use?

JPEG
The Joint Photographic Experts Group (JPEG or JPG) format compresses photo files with different level of compression. The higher the compression levels the lower the image quality and the file size. You choose the compression level when you save the file. Even the lowest compression value reduces the file size more than three times. For example, if you save a 10Mb TIFF file as a highest quality (lowest compression) JPEG, the resulting file will be between 1 and 3Mb. The file size depends on what especially you have on your photos. The ones with more monochromatic color content will give you smaller resultant file.
JPEG is useful when your photo has smooth color transitions and gradients. Otherwise you will probably use GIF or PNG.

A full-color photograph saved as JPG file. size: 7K	The same photo, saved as GIF file. size: 16K

GIF
Graphic Interchange Format (GIF) files are indexed color images with maximum 256 colors. GIF is not good for compressing full color photos, since the number of colors in the image will be reduced to 256 and the file size will be larger than a JPEG. GIF is the best choice for compressing solid color illustrations without smooth color transitions such as logos and type. Photoshop will allow you to chose from several color tables options and to choose the exact number of colors in your GIF illustration. GIF files support transparent background, background matting and can be used for saving multi-frame animations.

An illustration (logo), saved as GIF file. size: 2K	The same illustration, saved as JPG file. size: 4K

PNG
Portable Network Graphics (PNG) is a rarely used format. It delivers very high quality on both photos and illustrations, but it’s bigger sized than GIF and JPEG files. There are two standards for PNG files – PNG-8 (with 8-bit color) and PNG-24 (with 24-bit color). As you can suppose, the first one is smaller size and lower quality.
I do not recommend you to use PNG's except you need very high quality with fine details and smooth gradients or color transitions.

RESOLUTION

When you create a graphic for the Web, you must think in pixels, not in inches, millimeters etc. The resolution measurement used with the graphics and photos for print (pixels/inch) is useless on the web. The web browser measures the width and the height of a graphic in pixels, no matter if the graphic is 72 pixels/inch or 300 pixels/inch (ppi - pixels per inch). So, a 200x300 graphic looks the same size on the monitor with either 72ppi or 300ppi.

COLOR

Only RGB! Browsers don’t understand other color modes such as CMYK, Lab and Multichannel, so use RGB to prevent blunders. You may use also the Grayscale mode if you need to include some B&W photos. The browsers understand and output correctly the grayscale photos. The advantage of the grayscale mode is that the photos in this mode are three times smaller than a desaturated RGB photo.
Since there are several RGB standards, you can be all mixed-up. Use sRGB (this is the short name of the present sRGB IEC61966-2.1 color profile standard) to assure right color representation. You may embed or not the color profile in the photo or the graphic – the result on the monitor will be the same. It is important to work with this color space when you create graphics for the World Wide Web as almost all browsers are tuned up to show correct colors with graphics and photos using sRGB.

SAVING OPTIMIZED GRAPHICS FOR WEB

There are two ways to save a graphic for web in Photoshop.
The first way is to use the "Save As.." command. This is a basic way with few options and controls that is suitable for advanced users.
The second way is to use the more advanced command "Save For Web.." that gives you tons of options, quality preview and full control over the quality and the size of the file.

SAVE AS ...
This command opens a small window with the available options for JPEG or GIF files. The window is different when you save JPG or GIF files.

Saving JPG files with the Save as.. command

In the Image Options section you specify the quality and the size of the saved file. The higher the quality, the higher the file size.
In the Format Options section you can chose from three JPG encoding options:
- Baseline (Standard) - You will leave this option selected almost always as this type of encoding is supported by all browsers, even the oldest versions. Choosing this option you make your file "user friendly" as there will not be people which cannot see your graphic.
- Baseline Optimized - This is a newer compressing algorithm that produces slightly better image quality, but it's not fully compatible with some old browsers.
- Progressive - This option produces a photo, that will display gradually (in a series of scans) when it is downloaded to the browser. With the first scan, a low quality image will be displayed, then, with the second scan will appear a better quality graphic and with the final scan will appear the high quality final graphic. You can specify the number of scans from 3 to 5. The Progressive mode produces larger files and is not supported by all browsers.

In the Size section of the Save As.. window you can control the size of the file and the time needed for download with different connection speeds. The Preview check-box must be selected for this section to work.

Saving GIF files with the Save As.. command.

You cannot directly save an RGB graphic as a GIF file using the Save As.. command. Before that you must convert the graphic to Indexed color (Image->Mode->Indexed color). Doing so, you will see this window:

Since Photoshop 6, the program will automatically display the Indexed color palette every time you try to save an RGB graphic as GIF file.
As you can see, you have a few options to choose from in the Indexed color window.
The most important option, that will affect the quality and the entire look of the saved graphic is the color palette. Use the Web palette always when it is suitable for your graphic. It will give you smaller file size and correct colors on all monitors and operating systems. Otherwise, choose from Selective or Adaptive palettes. To produce smaller file size, you can chose the number of colors in your graphic.
If the file contents a transparency, you can save it with transparent background, checking the Transparency check-box. To do so, your graphic must be situated on a separate layer, without background layer.
The Matte option gives you the possibility to replace the transparency on a layer with a solid color.
The Dither option controls the look on smooth color transitions. Select "Diffusion" to obtain more natural look of the gradients.
After the conversion to indexed color you may save the graphic as GIF file. You will see this palette:

The Row Order option controls the way your graphic is loaded to the browser window. "Normal" is the most suitable option, as it produces smaller files. If you chose "Interlaced", a low resolution graphic is displayed in the browser while the high resolution version is downloaded. This option increases the file size, but makes the download process look shorter.

SAVE FOR WEB

The "Save for Web" command is an easy and comfortable way to save graphics for the Web. It allows you to save files for the web in GIF, JPEG and PNG formats directly from a Photoshop file, and most important, without affecting the original. You can also resize the photo (the graphic).
Another good thing with the "Save for web" is that you can work with slices, saving each slice with different settings. The slices can be saved with or without the HTML code.

click to enlarge

In "Save for Web" window you can see both the original of the graphic and the optimization preview side-by-side. This will help you to optimize the graphic making it to look very close to the original, retaining a small file size.
As we mentioned above, you can easy work with slices here. Just pick-up the slice selection tool, select a slice and assign it the desired saving options.
On the bottom of the window you will see file size and the average download time.
All other options are the same as with the "Save As.." command.