How to Optimize Web Images in PNG Formats - dummies

How to Optimize Web Images in PNG Formats

When you’re designing for the iPhone, iPad, or iPod touch, you need to choose the best image formats and resolution, as well as optimize your photos and other graphics.

If you’re working with a graphic, such as a logo, cartoon character, or drawing that can be displayed in 256 colors or fewer, your best bet is to use the PNG 8 format and reduce the total number of colors used in the image as much as possible to reduce the file size.

If you want to make a color in the image transparent, and you’re working with a photograph or another type of image with millions of colors, your best options is PNG 24.

To help make up for the degradation in image quality that can happen when colors are removed, PNG uses a dithering trick. Dithering involves alternating pixels in a checkerboard-like pattern to create subtle color variations, even with a limited color palette. The effect can smooth the image’s edges and make it appear to have more colors than it actually does.

To convert an image to the PNG 8 or 24 format in Photoshop, follow these steps (in Photoshop Elements or Fireworks, the process is similar although the specific steps may vary):

1With the image open in Photoshop, choose File→Save for Web & Devices (or File→Save for Web).

The Save for Web & Devices dialog box appears. In this example, you see the black-and-white logo for the website inplainsight art. The PNG 8 format is best for images with limited colors, such as cartoons and line art.

2In the top-left corner of the dialog box, choose 2-Up or 4-Up to display multiple versions of the same image for easy side-by-side comparison.

This example shows 2-Up, which makes it possible to view the original image of the logo at the top, as well as a preview of the optimized version at the bottom.

3Select a preview image to begin changing its settings.

Click any image to make it active in the dialog window.

4On the right side of the dialog window, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose either PNG 8 or 24.

If you choose PNG 8, you’ll get the smallest file sizes. Choose PNG 24 only if you want to optimize an image with many colors and still be able to set one color to transparent.

5In the Colors box, select the number of colors, as shown in Figure 8-5.

The fewer colors you use, the smaller the file size and the faster the image will download. But be careful; if you reduce the colors too much, you lose details. The ideal number of colors depends on your image; if you go too far, your image will look terrible.

6If you want to maintain a transparent area in your image, select the Transparency check box.

Any area of the image that was transparent when you created the image in the editor appears transparent in the preview window. If you don’t have a transparent area in your image, this setting has no effect.

Transparency is a good trick for making text or an image appear to float on a web page. That’s because a transparent background doesn’t appear on the web page. You can select transparency as a background option in the New File dialog box when you create a new image in Photoshop or Photoshop Elements.

7If you choose Transparency, also specify a Matte color.

You want the matte color to match the background of your web page so that the dithering along the transparent edge will blend in with the background. If you don’t specify a matte color, the transparency is set for a white background, which can cause a halo effect when the image is displayed on a colored background.

8Specify other settings as desired.

The remainder of the settings in this dialog box can be left at their defaults in Photoshop.

9Click Save.

The Save Optimized As dialog box opens.

10Enter a name for the image and save it into the images folder (or any other folder) in your local site folder.

Repeat these steps for each image you want to optimize as a GIF or PNG for your site.

Trial and error is a great technique in the Save for Web & Devices dialog box. The preview window clearly shows the increasingly degrading effect that choosing fewer and fewer colors produces.