Design - Photoshop

Optimizing PNG & GIF Files for the Web

In the previous article I showed you how to optimize JPGs for the web. In this tutorial I show you how to create GIF, PNG-8 and PNG-24 files. While the method is similar, results differ in terms of file size, colour reproduction and even usefulness.

One of the significant differences between optimizing JPG and GIF or PNG files is the way they handle colour. GIF and PNG-8 use indexed colour, palettes of between 2–256 colors, while JPGs can contain millions.


The start image is 922Kb in size. The final image is a miserly 58Kb.


PNG-24 files tend to reproduce color at least as rich as the original. If file size is less of a concern, PNG-24 files may be a sound choice, especially for portfolio sites.
Creating PNG-24 files requires fewer steps because there are no options:

  1. Open your image (or right- or control-click on “Gull in Snow” to download it).
  2. Select File > Save for Web ….
  3. Resize the image as necessary using the option in the lower part of the right panel.
  4. Select PNG-24 from the drop down in the right panel.
  5. Select Save.
  6. Give your image an appropriate name and save it to your web images folder.


IMAGE: Gull in Snow as an optimized PNG-24 file

The tradeoff with PNG-24 files is their additional file size. This image is 370Kb in size – way too large for use on most websites. The advantages are great color reproduction, lossless compression and full alpha transparency. JPG files don’t support transparency of any kind, making them all but useless for design elements that need to blend in with the background and most identity pieces, such as logos.

Transparent GIF, PNG-8 & PNG-24 Images

Full alpha transparency – 256 levels of opacity – permits gentle gradation from opaque to transparent pixels. When a pixel is either on or off – as it is in transparent PNG-8 and GIF images – it has sharp edges that don’t blend well with surrounding pixels, which can make it look like it was poorly “Photoshopped.”
If the background is a solid color you can set it as the matte color in the Save for Web dialog. Their are drawbacks, however: every time the background color is changed, a new GIF or PNG-8 file must be produced with the appropriate matte color. If the background is a gradient or image, it’s going to look unprofessional.

Optimizing Illustrations

When optimizing GIF and PNG-8 images, you’ll follow the same basic steps as you did for JPGs:

  1. Download and open gull_in_snow, or another suitable image, in your image editor.
  2. Go to File > Save for Web … (Or Export for Web …).
  3. Select the 4-up tab (if you’re using Photoshop).
  4. Resize the image to width: 600 pixels.
  5. Select GIF or PNG-8 from the drop down.
  6. Activate the second preview pane by single clicking it. In the right pane, set the number of colors to 256.
  7. Activate the third preview pane by single clicking it. In the right pane, set the number of colors to 128.
  8. Activate the fourth preview pane by single clicking it. In the right pane, set the number of colors to 64.
  9. Zoom in on the previews (in Photoshop, click the plus (+) button in the lower left corner of the dialog). Analyzing the previews at 200–300% will reveal any compression artifacts, banding and color shifts. Turn off each of the backgrounds and re-examine the image in the preview panel.
  10. Now download and open image_optimization_logos.tif in an image editor that supports layered TIF files. (N.B.: the hideous gradient is here to put each transparency type through its paces and is not recommended for any real world use.)
  11. Repeat steps 2 and 4–8. Note: This image doesn’t need to be resized.

Continuous Tone Images Using Indexed Color

Compare PNG-8 and GIF previews with identical settings. What, if any differences in output do you notice? Which, if any, preview looks best? As with choosing JPG quality, this is a subjective choice. As shown in the image below, at relatively small image sizes, loss of detail is barely perceptible to most users. Whether smaller image dimensions are right for the project is another consideration. For the most part, users will expect larger images in portfolios.


With a width of 600 pixels at 100% zoom there is little noticeable differences between the JPG, GIF and PNG-8 files. However, the difference in file size is significant.


Now take a look at the same image at 300% zoom. If Gull in Snow is to be used in a web portfolio, which format would be best? Which would likely fail? Why?

GIF, PNG-8 & PNG-24 Transparency

IMAGE: Optimize for web previews of JPG, PNG-8 & GIF image formats.

Previews of logo.tif as JPG, GIF & PNG-8 files.

IMAGE: GIF previews at 256, 128 & 64 colors.

Here, we preview a GIF with 256, 128 & 64 colors.

IMAGE: PNG-8 optimization previews at 256, 128 and 64 colors.

PNG-8 at 256, 128 & 64 colors. Note the file size and image quality.

If a logo was to be used on a continuous tone background, which file format might be best suited? Why?


This image previews a GIF with Restrictive, Selective & Perceptive dither applied. Dither mixes different colored pixels into an image to trick the eye into seeing more colors than present. Wikipedia has a good article on image dither.


Today I showed you how to optimize PNG-24, PNG-8 and GIF images for web use. I also demonstrated ways each format might be successfully used. Choosing the best image format for your project depends upon how the image is to be used.

The procedure for producing optimized images is similar, regardless of output format. Each file format has its strengths, i.e.: JPG compression can reduce the file size of photos with a negligible loss of detail. PNG-24 can produce beautiful photos and 256 levels of transparency, but can also result in larger file sizes. GIF and PNG-8 files are limited to 256 colors and transparency, and are best suited for art with large areas of flat color, such as illustrations.

Adding image optimization to your web or device design workflow takes moments and provides your users with a leaner, faster – and, for your mobile users, less costly experience. And when our users are happy, we’re happy.

About the author

Gord taught the graphic design program at a private college for six years. He also wrote nineteen of the program's courses. After six years leading classes, he felt it was time to learn how to be a graphic designer again. In addition to graphic design, Gord's an accomplished writer. Digital painting and photography are two of his hobbies.

Share this post

Leave a Comment

Subscribe To Our Newsletter