User Guide Cancel

Optimizing images for the GIF or PNG-8 format

Search
  1. Photoshop Elements User Guide
  2. Introduction to Photoshop Elements
    1. What's new in Photoshop Elements
    2. System requirements | Photoshop Elements
    3. Workspace basics
    4. Guided mode
    5. Making photo projects
  3. Workspace and environment
    1. Get to know the Home screen
    2. Workspace basics
    3. Tools
    4. Panels and bins
    5. Open files
    6. Rulers, grids, and guides
    7. Enhanced Quick Mode
    8. File information
    9. Presets and libraries
    10. Multitouch support
    11. Scratch disks, plug-ins, and application updates
    12. Undo, redo, and cancel actions
    13. Viewing images
  4. Fixing and enhancing photos
    1. Resize images
    2. Cropping
    3. Process camera raw image files
    4. Add blur, replace colors, and clone image areas
    5. Adjust shadows and light
    6. Retouch and correct photos
    7. Sharpen photos
    8. Transforming
    9. Auto Smart Tone
    10. Recomposing
    11. Using actions to process photos
    12. Photomerge Compose
    13. Create a panorama
    14. Moving Overlays
    15. Moving Elements
  5. Adding shapes and text
    1. Add text
    2. Edit text
    3. Create shapes
    4. Editing shapes
    5. Painting overview
    6. Painting tools
    7. Set up brushes
    8. Patterns
    9. Fills and strokes
    10. Gradients
    11. Work with Asian type
  6. Guided edits, effects, and filters
    1. Guided mode
    2. Filters
    3. Guided mode Photomerge edits
    4. Guided mode Basic edits
    5. Adjustment filters
    6. Effects
    7. Guided mode Fun edits
    8. Guided mode Special edits
    9. Artistic filters
    10. Guided mode Color edits
    11. Guided mode Black & White edits
    12. Blur filters
    13. Brush Stroke filters
    14. Distort filters
    15. Other filters
    16. Noise filters
    17. Render filters
    18. Sketch filters
    19. Stylize filters
    20. Texture filters
    21. Pixelate filters
  7. Working with colors
    1. Understanding color
    2. Set up color management
    3. Color and tonal correction basics
    4. Choose colors
    5. Adjust color, saturation, and hue
    6. Fix color casts
    7. Using image modes and color tables
    8. Color and camera raw
  8. Working with selections
    1. Make selections in Photoshop Elements
    2. Saving selections
    3. Modifying selections
    4. Move and copy selections
    5. Edit and refine selections
    6. Smooth selection edges with anti-aliasing and feathering
  9. Working with layers
    1. Create layers
    2. Edit layers
    3. Copy and arrange layers
    4. Adjustment and fill layers
    5. Clipping masks
    6. Layer masks
    7. Layer styles
    8. Opacity and blending modes
  10. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
  11. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits - Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
  12. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

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)

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.

More like this

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy