Exporting Assets: PNG & GIF

Topics covered in this Photoshop for Web Design tutorial:

Transparent photos, 8-bit graphic formats: GIF versus PNG-8, PNG transparency, Properly optimizing colors: limited colors versus gradients, Exporting 1x & 2x graphics

Exercise Preview

Exercise Overview

In this exercise you’ll learn how (and when) to optimize graphics as PNG or GIF.

Transparent Photos

JPEG does not support transparency, so how do we optimize a photo with a transparent background? Let’s see.

1. In Photoshop, close any files you have open.
2. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).
3. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize and double–click iphone-hand-mockup.psd.
4. In the Layers panel, hide the bg color layer by clicking the eye .
5. We don’t need the excess transparent pixels, so choose Image > Trim.
6. Set Based On to Transparent Pixels.
7. Make sure Trim Away has all sides checked on.
8. Click OK and Photoshop quickly and precisely trims the image for you!
9. Choose File > Export > Save for Web (Legacy).
10. On the right of the window, under Image Size, set W (width) to 400 px and hit Tab to apply it.

11. At the top right of the window, go into the Preset menu and choose PNG-24.

    Unlike JPEG compression, PNG uses a lossless compression. That means it does not lose quality, so you don’t get ugly JPEG artifacting.

12. Hit Cmd–Plus(+) (Mac) or Ctrl–Plus(+) (Windows) a few times to zoom in so you can see the details closely.
13. Notice the background has a checkerboard pattern indicating it’s transparent, and the edge of the hand blends into that transparent background.

14. Let’s try another file type. At the top right of the window, go into the Preset menu and choose PNG-8 128 Dithered.

    PNG-24 has millions of colors (24 bits), whereas PNG-8 has up to 256 colors (8 bits).

15. On the right, set Colors to 256.

16. Look closely at the following:

    • The colors in the hand, burger, etc. are not not as smooth as we’d like. This preset has some Diffusion dithering (which scatters pixels to help smooth things out) but you can still see some flat bands of colors.
    • The edge of the hand now has a sharp white halo instead of blending smoothly into the transparent background. While both PNG-8 and PNG-24 support partial transparency, Save for Web only supports partial transparency in PNG-24. Save for Web is not capable of making a partially transparent PNG-8.
17. Click Cancel.
18. Choose File > Export > Export As.
19. At the top right, set Format to PNG.
20. Make sure Transparency is checked on.
21. Make sure Smaller File (8-bit) is unchecked.
22. Under Image Size, set Width to 400 and hit the Tab key to apply the change.
23. At the bottom of the window, click the Plus (+) button a few times (until you can see the edge of the hand pretty well).
24. On the left side, below iphone-hand-mockup notice the file size is around 206 KB.
25. On the right, check on Smaller File (8-bit).
26. On the left, notice the file size is around 52 KB. Wow, that’s a lot smaller!
27. Notice the transparency still looks fine. Unlike Save for Web, Export As knows how to create a partially transparent PNG-8.
28. Also notice that the color gradations look better than Save for Web. There is some banding because PNG-8 only has 256 colors, but the color reduction of Export As is much better than Save for Web.

29. At the bottom of the window, click on the zoom percentage (between the – and + buttons) to jump back to 100% zoom.

    You can’t see the color banding at this size, so we can save a lot of file size by using PNG-8 instead of PNG-24 for this image!

30. This 400px wide image is what we need for 1x, but we also need a 2x version. At the top left of the window, click the Plus (+) button to the right of Suffix.

31. Set the second size to 2x so you end up with the following:

    

32. Click Export.
33. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize > optimized.
34. Click Open (Mac) or Select Folder (Windows).

35. Save the Photoshop file and close it.

8-Bit Graphic Formats: GIF versus PNG-8

SVG files work great in webpages, but they’re not well supported in HTML email or mobile/tablet apps. PNG and GIF are well suited to optimizing graphics and work well in emails. PNGs are commonly used in mobile/tablet apps. Let’s see how to export PNG and GIF.

1. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).
2. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize and double–click nyc-logo@2x.psd.
3. Let’s crop off the extra transparent pixels. Go to Image > Trim.
4. Set Based On to Transparent Pixels.
5. Make sure Trim Away has all sides checked on.

6. Click OK.

   For our design, we need partial transparency. This graphic doesn’t have many colors, so PNG-8 might work well. As we just learned, the PNG-8 in Save for Web does not support partial transparency, but Export As does.

7. Go to File > Export > Export As.
8. Make the window as large as possible.
9. At the bottom of the window, click the Plus (+) button until the preview fills the entire window.

10. Before we try PNG, let’s try GIF. At the top right of the window, set Format to GIF.

    Unlike JPEG, GIF and PNG both use a lossless compression. While you won’t get ugly JPEG artifacting, the limited color palette of GIF or PNG-8 may in some cases degrade the appearance of images with many colors.

11. In the empty parts of the logo, you should notice a checkered pattern that indicates transparency. Look closely at the edges, noticing that some pixels are light orange or white. (Zoom in more if needed).

    We need partial transparency, which means that some of the checkerboard pattern should be peeking through, as shown in the image below:

    

    GIF transparency is all or nothing. Any partially transparent pixels become completely opaque, as shown above. This would create an ugly light halo effect when placed over a darker background. This is not usable. Sometimes GIF can be smaller than PNG for simple graphics with no transparency, but typically PNG is smaller and has a usable transparency.

12. If you can’t see the entire graphic, click the Minus (–) button at the bottom of the window until you can.
13. Change the Format to PNG.

14. To compare the file sizes, check and uncheck Smaller File (8-bit) a few times, while watching the file size on the left of the window.

    The visual quality is the same, but the PNG-8 is around 1.1K and the PNG-24 is a little bigger at 1.4K. Both support partial transparency, so we should use the PNG-8.

15. Make sure that Smaller File (8-bit) is checked on before proceeding.

16. Click Export.

    NOTE: For this graphic we’re only going to export a hi-res (@2x) version. As more displays become hi-res, sometimes we only use a 2x graphic and don’t bother making a 1x version (especially for small files like this).

17. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize > optimized. Keep the suggested filename nyc-logo@2x.png and click Save.

18. Save the Photoshop file and close it.

Optimizing a Graphic with a Gradient

The last graphic had flat colors, but what about graphics with more colors and gradations? Let’s see how to optimize them.

1. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).
2. If you’re not still in the Graphics to Optimize folder, navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize.

3. Double–click app-store-icon@2x.psd.

   We do not need partial transparency for this graphic because we want to display it on a white background. That gives us more options to reduce the file size while maintaining quality in the blue gradient.

4. Go to File > Export > Save for Web (Legacy).
5. In the Optimized tab, hit Cmd–0 (Mac) or Ctrl–0 (Windows) to make the preview fill the entire window.

6. PNG-24 files are typically larger than the other options, but let’s get a sense of the maximum size and quality for this file. At the top right of the window, go into the Preset menu and choose PNG-24.

   Yikes, this small icon is almost 24K (you can see it at the bottom left of the window).

7. Supporting transparency generally adds a bit of file size to a PNG-24, so uncheck Transparency. The file is a bit smaller, but it’s still unacceptably large for such a small icon. Let’s try some other options.

8. While JPEGs are generally better for photos than graphic art like this icon, JPEG might be more ideal because our image has a lot of colors and gradations. Set the Preset to JPEG High.

   At around 12.31K, the file size is smaller than the PNG-24. The default 60 Quality produces quite a bit of artifacts around the edges, but at normal size you probably wouldn’t notice it. Can we do even better though?

9. From the Preset menu choose GIF 128 Dithered.

   Dithering scatters pixels to help make gradual blends look smoother. It improves the appearance, but it increases file size. Even with dithering, the gradient has a little banding (colors forming stripes), but it would barely be visible at a normal size.

10. At the bottom left of the window, notice that the file size is about 8.576KB.
11. From the Preset menu choose PNG-8 128 Dithered.
12. The image looks the same, but at the bottom left of the window notice that the file size is smaller (about 6.673KB).
13. Uncheck Transparency and notice the file size shrinks a little more.

14. Let’s see if we can get away with using fewer colors. Set Colors to 64.

    NOTE: The newer Export As does not let us reduce the number of colors, which is why we’re using Save for Web.

15. This does create more noticeable color bands, but let’s experiment with some other settings that may help. There are different ways for Photoshop to decide which colors are being used.

    From the menu that reads Selective, test out the Perceptual and Adaptive color reduction algorithms, while keeping an eye on the image quality and file size.

16. Visually there isn’t much difference between the three choices, but Selective is the smallest, so switch back to Selective.

    NOTE: Perceptual, Selective, and Adaptive base their color choices on the actual image. The other options are preset color palettes and are typically not desirable.

17. Set Dither to 100%
18. Let’s experiment with the type of dither to see how that works. From the menu that reads Diffusion, switch to Pattern and then Noise.
19. Pattern and Noise look a bit smoother than Diffusion, but they increase the file size. Switch the dithering back to Diffusion.

20. Hit Cmd–1 (Mac) or Ctrl–1 (Windows) to view at 100% so you can judge the quality at a more appropriate size.

    At this size Diffusion looks good, and it’s a smaller file size.

21. Let’s see if we can reduce the colors even more. Set Colors to 32.

    You may be able to see a slight increase in the color banding (stripes), but it’s quite subtle. This is usable, although the file size isn’t that much smaller.

22. We prefer the slightly smoother gradient, so set Colors back to 64.

23. Let’s compare the file sizes, from biggest to smallest. (Don’t worry if your sizes are slightly different than ours.)

    PNG-24: “Export As”, No Transparency	22.7K
    PNG-24: “Save for Web”, No Transparency	21.8K
    JPEG: “Export As”, 60% quality	12.4K
    JPEG: “Save for Web”, 60% quality	12.31K
    PNG-8: “Export As”	10K
    PNG-8: 256 colors, 88% Diffusion Dithering	9.893K
    PNG-8: 64 colors, 100% Diffusion Dithering	5.451K

    Photoshop’s Export As feature does not let you reduce the number of colors. So if you don’t need transparency (and the file looks good with less than 256 colors), use Save for Web to further reduce file size.

    NOTE: Because Save for Web and Export As use different algorithms, their output can have different file sizes and look different.

24. At the bottom right, click Save.
25. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize > optimized. Because it is a HiDPI/Retina image, keep the filename app-store-icon@2x.png
26. Save the Photoshop file and close it.

27. If you want to see the files that you exported, they are in Desktop > Class Files > yourname-Photoshop for Web Class > Graphics to Optimize > optimized.