Saving Photos for the Web as GIF/PNG

Topics Covered in This Photoshop Tutorial:

Comparing GIF & PNG, Transparency on the Web

Exercise Preview

Exercise Overview

Photographs and images with many colors optimize better as JPEGs, but files with few colors (or areas of flat solid color) are ideal for GIF or PNG compression.

Saving As GIF

1. From the Photoshop Class folder, open the file corporate-logo.psd.

2. Although this image is already in RGB mode at 72 ppi, we should crop out the empty pixels to make the file size smaller. We could use the Crop tool and trim it manually, but there’s a better way. Go to Image > Trim and set the following:

   

3. Click OK, and Photoshop quickly and precisely trims the image for you!

4. Go to File > Export > Save for Web (Legacy).

5. In the settings on the right, from the menu below Preset, choose GIF.

   The GIF format shrinks file size by reducing the total number of colors in an image. GIFs may have up to 256 colors, but generally you’ll need far fewer than that.

6. From the Colors setting on the right, choose 16 Colors.

7. From the menu to the left of Colors, choose the Perceptual color palette.

   Adaptive, Selective, and Perceptual base their color choices on the actual image. The other options are preset color palettes and therefore are typically not desirable. We chose Perceptual in this case because it was the smallest file size, and visually there was almost no difference between the three options.

8. The Dither option uses scattered pixels to represent intermediate colors and often makes gradual blends look smoother. We don’t need that in this image, so in the menu immediately below Perceptual, choose No Dither.

9. From the Matte menu, choose whatever color you’d want to use as the background of your imaginary website (in this case, white).

   GIF transparency does not allow for partial transparency. Therefore, any partially transparent pixels must become opaque. The Matte color is used as a background blend color for any pixels that are partially transparent in the original image. Choosing a color similar to your background allows the edges to better blend with the background of the webpage it will be used on.

10. Make sure that the Transparency checkbox is checked.

11. Choose the Zoom tool on the left side of the window.

12. Click on the image to zoom in. The formerly translucent pixels around the edge of the logo have been blended with the Matte color to form completely opaque pixels!

Comparing GIF to PNG-8

GIF and PNG-8 compressions work almost exactly the same, but PNG is newer. PNG files are often smaller than GIFs but not always. Since all the settings are the same, we can do a quick test right now to see which is better for this graphic.

1. Take note of the GIF’s current file size.

2. In the settings on the right, from the menu below the Preset, change GIF to PNG-8.

3. Notice how the PNG is smaller? In our experience, a PNG with the same settings as a GIF is typically 5–25% smaller. For regular text, GIF is sometimes smaller, so you should typically do a test and go with whichever format yields a smaller file size.

4. Click Save and save it as yourname-logo.png in the Photoshop Class folder.

   For more information about color palettes and the GIF, PNG, and JPEG formats, refer to the Web File Formats reference at the back of this workbook.