Web Developer Tutorial: GIF and PNG-8 Compression

In our last tutorial we looked at compression using the JPEG format. This time around we’re going to look at GIF and PNG-8 compression. These two types of compression are best for screen shots of dialog boxes, lettering and line art. The GIF format has one other option – animation, though that is the subject of another tutorial.

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 Notes

For 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.

256 Colors

128 Colors

64 Colors

32 Colors

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).
  

Another option is to use the Wizard, which guides you through 5 steps to save a GIF. Here are the settings I recommend:

1. No transparency
   
2. 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.
   
3. Image Quality. I recommend leaving this at the best quality unless you need to reduce the file size.
   
4. 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.
   
5. Here, you have one last chance to change the compression. Choose Finish to save your file.
   

PNG-8 Notes

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.
  

Another option is to run the Wizard, if you’re not comfortable with the procedure above. There are six steps. Here are the settings I recommend:

1. Palette-Based
   
2. No transparency
   
3. Choose Web page background color
   
4. Choose Best colors – the default is web safe colors
   
5. Choose Better Image Quality unless you want to reduce the number of colors in the image
   
6. You have one last shot at changing the compression. Click Finish to save your file.
   

Conclusion

In this tutorial, we have covered many of the steps you need for saving GIF and PNG-8 files. If you liked this tutorial, ou won’t want to miss our tutorial on image slicing, where we cut an image into pieces, allowing those portions to load faster than they would if they were one complete image.