Web Developer Tutorial: GIF and PNG-8 Compression
In general, I recommend saving GIF or PNG-8 images with the full range of 256 colors, especially if there are many different colors in the image. If you start to exclude colors from the palette, you will reduce the file size and you will also increase the possibility of undesirable color shifts, clumping together of colors and/or banding.
GIF NotesFor this tutorial, we will be using Paintshop Photo Pro X3. Here are some examples using GIF compression on a screen shot (originally saved as a 256 color GIF). Watch what happens as the file is saved with 256, 128, 64, 32 and 16 colors.
When saving images, you can do so from either File: Save As (and choose the file format), or File: Export: GIF Optimizer or File: Export: PNG Optimizer. I recommend the second option because it takes you directly to the image optimizer.
When saving images using GIF compression, you'll see several tabs. Generally these are the settings I recommend:
- The Transparency tab: None (unless you want a transparent part of the image)
- The Partial Transparency tab will be grayed out if you choose None in the previous step
- The Colors tab: Generally, 256 unless you have an image with fewer colors or a black and white drawing, in which case you could use fewer colors. Other options in this section are: Dithering, which attempts to approximate color transitions. Using it is a personal choice. I don't like the results I get with it. As for the palette, I recommend the Optimized option. The Web Safe palette can introduce unexpected color shifts.
- The Format tab: Non-Interlaced and version 87a (no transparency).
- No transparency
- This is the color of your web page background. I usually use white (RGB: 255, 255, 255) unless there's a reason to use another color.
- Image Quality. I recommend leaving this at the best quality unless you need to reduce the file size.
- Web safe colors or best colors. I usually choose best colors. Note that this may cause a color shift on other systems. Also note that web safe colors may also cause clumping together of colors and color shifts in more complex images.
- Here, you have one last chance to change the compression. Choose Finish to save your file.
When you open the PNG Optimizer, it may seem a bit confusing. This is because this dialog box is used for both PNG-8 and the full version of PNG. To make sure you get the correct results, here are the settings that I recommend:
- The Colors tab: Set image type to palette-based. For color selection, use Optimized Median Cut. Another option is Standard/Web safe, though that may introduce color shifts.
- Use 256 colors or less, if necessary. Leave Dithering at zero.
- The Transparency tab: Set transparency to none unless you want to create a transparent background.
- The Gamma tab: Leave the setting at 45455 for the PC.
- The Format tab: Use Non-Interlaced.
- No transparency
- Choose Web page background color
- Choose Best colors - the default is web safe colors
- Choose Better Image Quality unless you want to reduce the number of colors in the image
- You have one last shot at changing the compression. Click Finish to save your file.