PNG Optimization Guide: More Clever Techniques

Advertisement

This post is a second part of the article Clever PNG Optimization Techniques31 that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We’ll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size.

You may want to take a look at the following related articles:

Grayscale

Photoshop can’t save grayscale PNGs, so you would have to use OptiPNG after saving black-and-white images, like this:

optipng -o5 bw-image.png

Grayscale images takes much less space than RGBs, because each pixel described with only one byte, not three:


PNG-24 (Photoshop → true-color), 8167 bytes.


PNG-24 (Photoshop + OptiPNG → grayscale), 6132 bytes

Setting the Grayscale color mode (Image → Mode → Grayscale) for images prior to saving them in PNG is very important, especially for semi-transparent images (see Dirty transparency84 method for more information).

Fewer Colors

This is an alternative to the Posterization5 method of reducing colors in an image. Posterization can dramatically change the colors in your image, which is unacceptable if you have to blend the image into the background of your website. This method gives you more control over color but is limited to 256 colors.

The method is basically to extract image data from the semi-transparent image (i.e. remove transparency), convert it to an indexed color and apply the original mask. Reducing the amount of colors will make image data stream packing by the PNG compressor more effective. Let’s see how it works.

1. Open the original image6 in Photoshop and duplicate it (Image → Duplicate).


63 KB

2. Remove transparency from the duplicated image (Filter → Photo Wiz → Remove Transparency):

3. Set the image mode to Indexed Color (Image → Mode → Indexed Color). In the new dialog window, enter the following settings:

  • Colors: 190,
  • Dither: Diffusion,
  • Amount: 80%.

4. Set the image mode back to RGB and copy the image layer to the original file. Align the copied layer with the referenced one and apply its mask. Now save it to PNG-24:


51 KB

As you can see, these easy steps have saved us 11 KB of the original image without any noticeable effect on image quality. But this method has another advantage: running OptiPNG on these images often saves even more bytes. In this example, the image’s size was reduced by 36%, from 51 KB to 33 KB. Instead of converting the image to Indexed Color mode, you can save it for the Web and apply the Influence mask7 to save extra bytes.

Please note that this method is not the same as PNG-8 with palette transparency in Fireworks. In most cases fewer colors will give you more than 256 colors, so you will have to save the image in PNG-24, not PNG-8. Remember, solid red and 50%-transparent red are two different colors.

Reducing Detail

This technique is useful for optimizing shadows, reflections, glows, etc. The idea is to reduce detail in areas of the image that are barely visible. As you will recall from the Dirty transparency84 method, each pixel of a true-color image with transparency is described in four bytes: RGBA. The last one controls pixel transparency. For pixels whose Alpha value is too low (i.e. pixels that are barely visible), you can replace the RGB data for better image compression. Let’s try that.

1. Open iPod retro9 in Photoshop, again.


63 KB

2. As you can see, the radio has a reflection below it, which is a good candidate for optimization. Ctrl + click or ⌘ + click on the image thumbnail in the Layers palette to create a selection. Go to the Channels palette and create a new channel from the selection:

  • 3. We have to localize only those pixels that are barely visible. Invert the channel (Image → Adjustments → Invert) and open the Threshold dialog (Image → Adjustments → Invert). Setting the Threshold Level to 170 is good enough:

    4. We’ve got the mask that includes barely visible pixels only. Ctrl + click or ⌘ + click on the channel in the palette to create a selection. Go back to the Layers palette, select the image layer and open Filter → Noise → Median. This filter will smooth out pixels in the selection, making them more conducive to compression. Set the Radius value to 5:

    Now save this image “for the Web” in PNG-24 and see how its size has been reduced from 63 KB to 59 KB. You can vary the threshold level and median radius to compress more or preserve more details.

    More Tips For PNG Use And Optimization

    1. Each optimization must begin with a thorough image analysis. Choose the best technique for each image or combine techniques to achieve better results.

    2. Be creative. Use these techniques as a starting point for your own methods customized to your particular images.

    3. Many people think that PNG-8 is always better than PNG-24 for low-color images. It’s not. In some cases, PNG-24 may give you better results:


    PNG-8, 833 bytes


    PNG-24, 369 bytes

    In this example, there is an overhead in PNG-8: 3 bytes were used to describe the pixels in the color palette, and 1 byte to describe the pixel color in the image data stream, while PNG-24 took up only 3 bytes for each pixel. So, if you’re saving low-color images in PNG without transparency, test whether PNG-8 or PNG-24 gives you the smaller file.

    4. If you are using an older version of Photoshop (prior CS3), you may find that PNG images in the image editor look different from ones in a Web browser. This is because of the gAMA chunk that is saved in the PNG file, which controls image gamma. You can safely remove it with tools such as TweakPNG10 (Windows only) or smush.it11.

    5. A “special” PNG image type allows you to save a semi-transparent image as an indexed-color PNG-8. This image type isn’t available in Photoshop (Fireworks has it), but you can prepare the image in Photoshop and then convert it with OptiPNG.

    OptiPNG will convert truecolor images to 8-bit palette by default if your image contains less than 256 colors. To do this, you can apply “Less colors” and “Lowering details” techniques and “guess” number of colors. But it may be very time consuming. There’s a tool called PNGNQ12 which can convert truecolor image to 256 palette, but you won’t have enough control over resulting image.

    You will have to reduce the total amount of different colors, including semi-transparent ones, to 256 or fewer. This format is “special” because of how it displays in IE6:


    IE6


    Other browsers

    As you can see, IE6 displays only the opaque pixels. The good thing is that you can include such images with the regular <img> tag or as background images (i.e. without using the resource-greedy AlphaImageLoader CSS filter), making for graceful degradation.

    6. Don’t use the “Save As” dialog to save PNG images for the Web; use the “Save for Web” dialog instead. By default, Photoshop saves an image preview as additional info in the file, making the file a few times larger than it needs to be.

    PNG Optimization In Real Life

    A screencast demonstrating how most of these techniques work in real life:

    Advanced PNG Optimization13 from Sergey Chikuyonok14 on Vimeo15.

    And here is the result16. You can also download source PSD17 to try it yourself.

    (al)

    Footnotes

    1. 1 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
    2. 2 http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
    3. 3 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
    4. 4 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/#dirty-transparency
    5. 5 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/#posterization
    6. 6 http://www.smashingmagazine.com/wp-content/uploads/images/png-optimization-guide/split-reference.png
    7. 7 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/#influence-mask
    8. 8 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/#dirty-transparency
    9. 9 http://www.smashingmagazine.com/wp-content/uploads/images/png-optimization-guide/split-reference.png
    10. 10 http://entropymine.com/jason/tweakpng/
    11. 11 http://smush.it
    12. 12
    13. 13 http://vimeo.com/5685903
    14. 14 http://vimeo.com/user2060676
    15. 15 http://vimeo.com
    16. 16 http://www.smashingmagazine.com/wp-content/uploads/images/png-optimization-guide/tips/index.html
    17. 17 http://www.smashingmagazine.com/wp-content/uploads/images/png-optimization-guide/tips/clock.psd

    ↑ Back to topShare on Twitter

  • Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.

    Advertising
    1. 1

      cleverly found but these posts are like … 10 years to late. Now-a-days with all the quick internet connections you give us the tools to make a png image 2000bytes smaller…

      -4
    2. 2

      I wonder why SM publishes this. How many webdesigners will make use of time consuming techniques to safe a few bytes?

      In Photoshop, you can easily select the best compression method with the ‘safe for web and devices’ menu.

      -7
    3. 3

      Again………………or update

      (SM) This article is a second part of the series about PNG Optimization Techniques. Please read the introduction to this article more carefully.

      0
    4. 4
    5. 5

      very cool Techniques

      0
    6. 6

      making more weird n cool thanks SM

      0
    7. 7

      you said “A “special” PNG image type allows you to save a semi-transparent image as an indexed-color PNG-8. This image type isn’t available in Photoshop (Fireworks has it), but you can prepare the image in Photoshop and then convert it with OptiPNG.”

      then, optipng will convert a png-24 into a png-8? can you write the command line to do this conversion with optipng, pls?

      0
    8. 8

      #6 i’m sure i will not hire you in my next web project =)

      0
    9. 9

      Thank you.

      TB: blog.qmerdesign.net

      0
    10. 10

      sayan mukherjee

      July 25, 2009 10:56 am

      Thanks again….for the second part….
      a really great help.
      Thanks a lot.

      0
    11. 11

      Just FYI to folks re: the grayscaling technique. If you don’t have access to optipng, you can also use punypng by Gracepoint After Five …. it has automatic built-in support for grayscaling.

      I got the 8-ball image in the article from 8,167 bytes to 5,623 bytes (32% savings).

      http://www.punypng.com

      Also, one little improvement I suggest to the Fewer Colors section is to use a Local (Selective) palette rather than the default. At Ask.com, we found that using the selective palette lends itself better to blockier pixels which makes RLE-style encoding a lot more efficient as compared to Perceptual or Adaptive palettes which tend to be too diffuse.

      I’m hoping to build similar support in punypng using the pngquant library which does a very similar thing as above.

      0
    12. 12

      I’d second xavi’s request, or if anyone has other tools for creating semi-transparent indexed PNGs other than using Fireworks, would be very interested. After years of using Photoshop I just can’t get used to FW…

      0
    13. 13

      I’ve tried the technique and successfully converted 1,5MB of png to 1,1MB but then i exported the image to flash and renders it to swf, and found out that the swf file size is still the same as the unoptimized version, anyone experiencing the same?

      I always wonder how the sites like http://www.ff0000.com or http://www.jointhehunt.ca optimized their super huge image… any clue?

      0
    14. 14

      Stuff like this is why web design is so damn complicated @_@
      Still, thank you for this.

      0
    15. 15

      Sergey Chikuyonok

      July 25, 2009 1:45 pm

      can you write the command line to do this conversion with optipng, pls?

      OptiPNG will convert truecolor images to 8-bit palette by default if your image contains less than 256 colors. To do this, you can apply “Less colors” and “Lowering details” techniques and “guess” number of colors. But it may be very time consuming. There’s a tool called PNGNQ (http://pngnq.sourceforge.net/) which can convert truecolor image to 256 palette, but you won’t have enough control over resulting image.

      0
    16. 16

      just-digital.net

      July 25, 2009 2:27 pm

      This is a great article, thanks for sharing

      0
    17. 17

      For those of you that remain skeptical…please think that these techniques can save huge ressources on the server side…not on the user side…

      0
    18. 18

      I like to use PNG Monster. I first do as much compression as I can in Photoshop and then run the files through it, usually saves me anywhere from 5% to 20% on each image.

      0
    19. 19

      I agree, #6 doesn’t know what he is talking about. Sometimes you have to save some space.

      Link

      0
    20. 20

      Anybody who questions the usefulness of optimizing images shouldn’t be doing web work

      1
    21. 21

      One of the best post on smashing ever. These techniques are really handy for making banners for instance. where every byte counts.

      Thanks a lot. Keep it up!

      0
    22. 22

      The most case scenario is that you don’t have the PSD files to use the above techniques.
      You just have the saved PNG – no layers – just the PNG file.
      It would be interesting to read a post about optimization techniques for a PNG file – not techniques about best practices for optimizing a PNG format image size.
      I hope I’m clear.

      0
    23. 23

      Loved the video … what’s the music used on that?

      0
    24. 24

      @xavi : i would never want nor need a customer who thinks he knows how to do my job =) good luck with you next project

      0
    25. 25

      Useful post. I’m sure I’ll use these techniques.

      0
    26. 26

      Bradford Sherrill

      July 26, 2009 8:04 am

      Great post continued from part 1, can we discuss Animated PNG as well?

      0
    27. 27

      It is also worth reminding designers that besides the sophisticated optimization techniques, before you apply them, think about planning the design in a way that avoids using huge graphics. Be as minimal as possible instead of trying to impress the client with flashy graphics that, face the truth, in the long run get boring.
      I don’t know about you, but most designs showcased at smash are overdone. I get easily bored looking at a design longer than a week, and web design’s supposed to last the client for a long time, sometimes forever.
      So instead of toiling over saving a few bites on images, think how to design with less images. Now, that’s an art!
      Regards..
      ps. yes I think this post is useful- it never hurts to know more than less.

      0
    28. 28

      I agree, #6 doesn’t know what he is talking about. Sometimes you have to save some space.

      I’d rather read the comment of someone who doesn’t know what they’re talking about than someone who does but uses their comment to spam with off-topic links. :P

      0
    29. 29

      Yes, as these techniques seem to save only 10KB or less, web designers may tend to bypass them. But if you work in a mobile game company, then you should have learned how to value each byte.

      0
    30. 30

      Great article, Lebedev hires the best. I would also recommend PNG Gauntlet — it sometimes brings about 30-40 per cent of compression.

      0
    31. 31

      While it’s true that with broadband 100k may sound like nothing, many of us are still building 30k web banners or mobile applications and this kind of technique is priceless. It’s just awesome that Smashing is documenting these sort of things. Go SM!

      0
    32. 32

      Why not just use Fireworks?

      -1
    33. 33

      There’s clearly a balance to be struck between optimization and time (and budget) available, and there are also considerations about the type of site you’re dealing with. A site with a large number of visitors and a development budget should be optimized enormously, but a personal blog likely to attract maybe a dozen visitors a day really doesn’t need to be.

      0
    34. 34

      @xavi, I’d be interested to see if you pay extra for this type of service, or you just assume it to be standard practice that warrants standard rates. I can’t imagine any client agreeing to pay for the extra time required to pull this off on all images required to design and develop a site. Majority of them wouldn’t notice the difference.

      0
    35. 35

      I wonder if the advanced PNG Optimization In Real Life method would influence the size of exported SWF containing PNGs additionally optimized within Flash… Any knowledge share?

      0
    36. 36

      Grayscale+alpha is not a “PNG-24″, but a “PNG-16″ (16 bits / pixels).

      0
    37. 37

      This is something I face on a frequent basis, as I design a lot of Flash banners for a furniture company who always wants to use images of their products. With all vendors, the file has to be 40k or under, and this always limits what I can do.
      YET: I see great banners online all the time, and it blows me away how complex some of them can be, assuming they’re also working within 40k constraints.
      My best results have been with JPGs, as the PNG transparency always makes my files 4 to 5 times the size of the optimized JPG.
      Other than the advice given here, what would be the 3 most important things when optimizing .swfs?
      This is a great article, and great thread.

      0
    38. 38

      NICE WORK

      0

    ↑ Back to top