Optimizing images for the GIF or PNG-8 format

Search
Photoshop Elements User Guide

On this page

Applies to: Photoshop Elements

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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, and with web color
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.

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

Optimize as GIF or PNG‑8 format

GIF is the standard format for compressing images with large areas of solid colors and crisp details like those in line art, logos, or type. Like the GIF format, PNG‑8 supports transparency and efficiently compresses areas of solid color while preserving sharp detail; however, not all web browsers can display PNG‑8 files.

  1. Open an image and choose File > Save For Web.
  2. Choose GIF or PNG‑8 from the optimization format menu.
  3. To display an image at low resolution while the full-resolution image is downloading, select Interlaced. Interlacing can make downloading time seem shorter and gives viewers feedback that downloading is in progress.
  4. Under the optimization format menu, choose a color-reduction algorithm for generating the color lookup table:

    Perceptual

    Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.

    Selective

    Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of web colors. This color table usually produces images with the greatest color integrity. (Selective is the default choice.)

    Adaptive

    Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only shades of green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.

    Restrictive (Web)

    Uses the standard, 216‑color, web‑safe color table common to the 8‑bit (256‑color) panels of Windows and Mac OS. This option ensures that no browser dither is applied to colors when the image is displayed using 8‑bit color. If your image has fewer than 216 colors, unused colors are removed from the table.

  5. To specify the maximum number of colors in the color panel, select a number from the Colors menu, enter a value in the text box, or click the arrows to change the number of colors. If the image contains fewer colors than the panel, the color table reflects the smaller number of colors in the image.
  6. If you chose Restrictive (Web) for the color-reduction algorithm, you can choose Auto from the Colors menu. Choose Auto if you want Photoshop Elements to determine the optimal number of colors in the color table based on the frequency of colors in the image.
  7. Choose a dithering percentage, either by entering a percentage in the Dither text box or by clicking the Dither menu arrow and dragging the slider that appears.
  8. If the image contains transparency, select Transparency to preserve transparent pixels; deselect Transparency to fill fully and partially transparent pixels with the matte color.
  9. To create an animated GIF, select Animate.
  10. To save your optimized image, click OK. In the Save Optimized As dialog box, type a filename, and click Save.

Create an animated GIF

  1. Place the images you want to appear in each frame of the animation on separate layers of the Layers panel. For example, to create an animation of an eye blinking, you would place an image of the open eye on one layer, and an image of the closed eye on another layer.
  2. Choose File > Save for Web.

    Note:

    If your image has multiple layers, you can also open the Save For Web dialog box from the Save As dialog box by choosing CompuServe GIF Format and selecting Layers As Frames.

  3. Optimize the image in GIF format.
  4. Select Animate.
  5. Set additional options in the Animation section of the dialog box:

    Looping Options

    Continuously repeat the animation in a web browser, or animate only once. You can also choose Other to specify the number of times the animation must loop.

    Frame Delay

    Specifies the number of seconds that each frame is displayed in a web browser. Use a decimal value to specify fractions of a second. For example, use .5 to specify half a second.