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.
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:
- Open your image (or right- or control-click on “Gull in Snow” to download it).
- Select File > Save for Web ….
- Resize the image as necessary using the option in the lower part of the right panel.
- Select PNG-24 from the drop down in the right panel.
- Select Save.
- Give your image an appropriate name and save it to your web images folder.
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.
When optimizing GIF and PNG-8 images, you’ll follow the same basic steps as you did for JPGs:
- Download and open gull_in_snow, or another suitable image, in your image editor.
- Go to File > Save for Web … (Or Export for Web …).
- Select the 4-up tab (if you’re using Photoshop).
- Resize the image to width: 600 pixels.
- Select GIF or PNG-8 from the drop down.
- Activate the second preview pane by single clicking it. In the right pane, set the number of colors to 256.
- Activate the third preview pane by single clicking it. In the right pane, set the number of colors to 128.
- Activate the fourth preview pane by single clicking it. In the right pane, set the number of colors to 64.
- 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.
- 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.)
- 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.
GIF, PNG-8 & PNG-24 Transparency
If a logo was to be used on a continuous tone background, which file format might be best suited? Why?
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.