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:

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

PNG‑24
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
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
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.

About the JPEG format

The JPEG format supports 24‑bit color, so it preserves the subtle variations in brightness and hue found in photographs. A progressive JPEG file displays a low-resolution version of the image in the web browser while the full image is downloading.

JPEG image compression is called lossy because it selectively discards image data. A higher quality setting results in less data being discarded, but the JPEG compression method may still degrade sharp detail in an image, particularly in images containing type or vector art.

Note: Artifacts, such as wavelike patterns or blocky areas of banding, are created each time you save an image in JPEG format. Therefore, you should always save JPEG files from the original image, not from a previously saved JPEG.
Original image (left), and optimized JPEG with Low quality setting (right)

The JPEG format does not support transparency. When you save an image as a JPEG file, transparent pixels are filled with the matte color specified in the Save For Web dialog box. To simulate the effect of background transparency, you can match the matte color to the web page background color. If your image contains transparency and you do not know the web page background color, or if the background is a pattern, you should use a format that supports transparency (GIF, PNG‑8, or PNG‑24).

About the GIF format

The GIF format uses 8‑bit color and efficiently compresses solid areas of color while preserving sharp details like those in line art, logos, or type. You also use the GIF format to create an animated image and preserve transparency in an image. GIF is supported by most browsers.

The GIF format uses LZW compression, which is a lossless compression method. However, because GIF files are limited to 256 colors, optimizing an original 24‑bit image as an 8‑bit GIF can subtract colors from an image.

GIF image with selective color (left), and GIF image with web color (right)

You can choose the number of colors in a GIF image and control how colors dither in a browser. GIF supports background transparency or background matting, by which you blend the edges of the image with a web page background color.

About the PNG‑8 format

The PNG‑8 format uses 8‑bit color. Like the GIF format, PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

Because PNG‑8 is not supported by all browsers, you may want to avoid this format when you are distributing the image to a wide audience.

The PNG‑8 format uses more advanced compression schemes than GIF does, and a PNG‑8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image’s color patterns. Although PNG‑8 compression is lossless, optimizing an original 24‑bit image as an 8‑bit PNG file can subtract colors from the image.

Note: With certain images, especially those with simple patterns and few colors, GIF compression can create a smaller file than PNG‑8 compression. View optimized images in GIF and PNG‑8 format to compare file size.

As with the GIF format, you can choose the number of colors in an image and control how colors dither in a browser. The PNG‑8 format supports background transparency and background matting, by which you blend the edges of the image with a web page background color.

PNG‑8 with 256 colors and no dither (left), and PNG‑8 with 16 colors and dithering (right)

About the PNG‑24 format

The PNG‑24 format supports 24‑bit color. Like the JPEG format, PNG‑24 preserves the subtle variations in brightness and hue found in photographs. Like the GIF and PNG‑8 formats, PNG‑24 preserves sharp details like those in line art, logos, or type.

The PNG‑24 format uses the same lossless compression method as the PNG‑8 format. For that reason, PNG‑24 files are usually larger than JPEG files of the same image. You may want to avoid PNG‑24 format when you are distributing your image to a wide audience.

In addition to supporting background transparency and background matting, the PNG‑24 format supports multilevel transparency. You can have up to 256 degrees of transparency from opaque to completely transparent, so you can blend the edges of an image smoothly with any background color. However, not all browsers support multilevel transparency.

About animated GIFs

Animated GIFs create the illusion of movement by displaying a sequence of images, or frames, over time. Photoshop Elements provides a powerful, easy way to create animated GIFs from a multiple-layer image.

To create an animated GIF file, you work with layers. Each layer becomes a frame when Photoshop Elements generates an optimized animation. The animated GIFs are compiled into a RGB color document in the Editor.

You can open an existing animated GIF file using the Open command from the Editor. For each frame in the file, Photoshop Elements creates a layer. To view a specific frame in the document window, make the layer for that frame visible in the Layers palette, and hide other layers.

Images in separate layers can be sequenced together to create an animation.