Saving Photos for the Web as GIF/PNG

Topics Covered in This Photoshop Tutorial:

Comparing GIF & PNG formats, implementing transparency for modern web design

Exercise Preview

Exercise Overview

While photographs and complex imagery with thousands of colors perform best as JPEGs, graphics with limited color palettes—particularly logos, icons, and illustrations with areas of flat, solid color—achieve superior compression and crisp rendering when saved as GIF or PNG files. Understanding when and how to apply these formats will dramatically improve your web graphics' performance and visual quality.

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 need to eliminate unnecessary transparent pixels to optimize file size. Rather than manually cropping with the Crop tool , Photoshop offers an automated solution. Navigate to Image > Trim and configure the following settings:

   

3. Click OK, and Photoshop will automatically detect and remove all unnecessary transparent space with pixel-perfect precision.

4. Navigate to File > Export > Save for Web (Legacy) to access Photoshop's comprehensive web optimization interface.

5. In the export settings panel on the right, locate the format dropdown menu below Preset and select GIF.

   The GIF format achieves compression by intelligently reducing the total color palette of an image. While GIFs support up to 256 colors, most graphics require significantly fewer colors to maintain visual fidelity, resulting in smaller file sizes and faster load times—crucial factors for modern web performance.

6. In the Colors field on the right panel, specify 16 colors. This aggressive color reduction typically provides excellent results for simple logos while maintaining crisp edges and solid color areas.

7. From the color reduction algorithm dropdown menu to the left of Colors, select the Perceptual palette option.

   Adaptive, Selective, and Perceptual algorithms analyze your specific image content to determine the optimal color palette, making them superior to generic preset palettes. The Perceptual algorithm prioritizes colors that the human eye perceives as most important, often producing the best visual results at the smallest file sizes. In professional practice, test all three options and compare both visual quality and file size before making your final selection.

8. The Dither option employs scattered pixel patterns to simulate intermediate colors, creating smoother gradients in images with limited palettes. Since our logo contains primarily solid colors without complex gradients, locate the dropdown menu immediately below Perceptual and select No Dither to maintain clean, sharp edges.

9. From the Matte dropdown menu, select the background color of your target website (in this example, white works well for most modern web designs).

   Understanding GIF transparency limitations is crucial for professional web graphics. Unlike modern PNG format, GIF supports only binary transparency—pixels are either completely transparent or completely opaque. Any partially transparent pixels from your original design must be converted to fully opaque pixels. The Matte color serves as the background blend color for these edge pixels, allowing anti-aliased edges to seamlessly integrate with your webpage background. Choosing an inappropriate matte color will create visible halos around your graphics.

10. Ensure the Transparency checkbox remains checked to preserve your logo's transparent background.

11. Select the Zoom tool from the toolbar on the left side of the Save for Web dialog.

12. Click on the preview image to examine the edge treatment closely. Notice how the previously translucent anti-aliased pixels around the logo edges have been seamlessly blended with your chosen Matte color, creating clean, opaque edge pixels that will integrate smoothly with your web design.

Comparing GIF to PNG-8

While GIF and PNG-8 employ similar indexed-color compression methods, PNG represents the more modern standard with several technical advantages. PNG files frequently achieve smaller file sizes than equivalent GIFs, though results vary by image content. Since both formats share identical optimization settings, we can perform a direct comparison to determine the optimal choice for this specific graphic.

1. Note the current GIF file size displayed in the preview area for comparison purposes.

2. In the export settings panel on the right, locate the format dropdown menu below the Preset section and change from GIF to PNG-8.

3. Observe the file size reduction in the PNG version. In professional practice, PNG-8 files with identical settings typically achieve 5–25% smaller file sizes compared to GIF equivalents. However, for certain content types—particularly simple text graphics—GIF occasionally produces smaller files. The professional approach involves testing both formats and selecting whichever delivers superior compression for your specific image content.

4. Click Save and export the file as yourname-logo.png to your Photoshop Class folder.

   For comprehensive technical details about color palette optimization strategies and detailed comparisons of GIF, PNG, and JPEG formats—including modern WebP considerations for contemporary web development—consult the Web File Formats reference section at the back of this workbook.