Optimizing images

Optimization for the web is the process of compressing images and setting display options for optimal use on the Internet. When you put images on the Internet, file size becomes important; you want to achieve a file size that is small enough to allow a reasonable download time, but large enough to preserve colors and details to your satisfaction. There are three major graphic file formats that are used on the web: GIF, JPEG, and PNG.

When you put images on the web, you need to think about file size. The goal is a file size that is small enough to allow reasonable download times but that preserves colors and details to your satisfaction.

Three major graphic file formats are used on the web: GIF, JPEG, and PNG. You can optimize images in these formats using one of the following methods:

• To precisely optimize an image for use in web authoring applications, such as Adobe® Dreamweaver®, you can use the Save For Web command. The Save For Web dialog box lets you preview your image in different file formats and with different optimization settings. You can also set transparency and animation settings.

• For basic optimization, you can use the Save As command. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method.

Using the Save For Web dialog box

Use the Save For Web dialog box to preview the effects of different optimization options on a photo you want to share on the web. The process is simple. Open a photo, and choose File > Save For Web. Then choose a format from the file format menu (GIF, JPEG, PNG‑8, or PNG‑24) and set options as desired. (The file format menu is directly beneath the Preset menu.) This saves a copy of your file, without overwriting the original image.

Optimization options appear on the right side of the Save For Web dialog box. In addition to selecting a web file format, you can choose compression and color options, preserve background transparency or set background matting, and change the size of the image. You can use predefined settings (by choosing a format from the Preset menu), or select format-specific options to fine-tune the optimization.

The image windows show your original image (on the left) and a preview of the optimized image (on the right). Under each window is optimization information—the current settings, the size of the optimized file, and the estimated download time. As you make adjustments, the information under the optimized image changes to reflect your new settings.

A small toolbox is located in the upper-left corner of the dialog box. To view different areas of an image, select the Hand tool and drag to bring those areas into view. To zoom in on an image, select the Zoom tool and click in a view; then hold down Option key, and click again to zoom out. (Alternatively, you can use the Zoom box at the bottom of the dialog box.) To create matte colors, use the Eyedropper Color tool.

Optimized file formats for the web

You can choose between four formats for the web. Use the following guidelines when choosing the format for your web image:

In most cases, this is the best format in which to save photographs.

Like JPEG, this is a good format for photographs. Choose PNG‑24 rather than JPEG only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) PNG‑24 files are often much larger than JPEG files of the same image.

GIF is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. Also, if you want to export an animated image, you must use GIF.

PNG‑8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation).

Images in GIF and PNG‑8 formats, sometimes called indexed-color images, can display up to 256 colors. To convert an image to indexed-color format, Photoshop Elements builds a color lookup table. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.

JPEG and PNG‑24 files support 24‑bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, background transparency or matting, color display, and the method a browser should use to display the image while downloading.

The appearance of an image on the web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. You may want to preview images in different browsers and on different platforms to see how they will appear on the web.

Apply a preset optimization setting

You can quickly and easily optimize an image for the web by choosing a predefined optimization setting, called a preset, from the Preset menu near the upper-right corner of the Save For Web dialog box. Presets are tailored to meet the optimization needs of different types of images.

The name of each preset reflects its file format and quality level. For example, choose JPEG High to optimize an image in JPEG format with high image quality and low compression. Choose GIF 32 Dithered to optimize an image in GIF format, reduce the number of colors to 32, and apply dithering.