Clever PNG Optimization Techniques

Advertisement

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 start with some essentials about the PNG format and will then move to advanced optimization techniques.

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

The boring part

Before we dive into image optimization techniques, we have to learn some technical details about the PNG format. Each graphic format has its own advantages and weaknesses; knowing them will allow you to modify original image for better visual quality and compression. This is a key concept behind professional image optimization.

PNG was developed as an open-source replacement of the proprietary GIF format. They have some common features (like indexed color palette), but PNG is much better than GIF in every aspect. It introduced some cool features for image packing and compression, but for us – web-designers and developers – the most important one is the scanline filtering (also known as ‘delta filters’).

Scanline filtering

Here is how it works. For example, we have a 5×5 pixels image with horizontal gradient. Here is a schematic view of this image (each number represents a unique color):

Screenshot

As you can see, all identical colors spread vertically, not horizontally. Such images will have a very poor compression ratio in GIF, because it compresses colors that spread horizontally. Let’s see how this image data can be packed by scanline filtering:

Screenshot

Number 2 before each line represents applied filter, which is “Up” in this case. The “Up” filter sends the message to the PNG decoder: “For the current pixel take the value of the above pixel and add it to the current value.” We have 0 value for lines 2—5 because all pixels in each vertical line have the same color. And such data would be compressed better if the image was relatively large. For example, 15 pixels of value 0 can be written as 0(15) and this is much shorter than fifteen 0′s—this is how compression works in common.

I wrote “can be packed” because in this ideal test case the “Sub” filter (number 1 before each line) will give much better result:

Screenshot

The filter “Sub” sends the message to the decoder: “Take the value of the left pixel and add it to the current value.” In this case, it’s 1. As you may already have guessed, such data will be compressed very effectively.

Scanline filtering is important for us because we can use them: in particular, we can do some image manipulation to make filtering better. There are five filters: None (no filtering), Sub (subtract the left pixel value from the current value), Up (subtract the above pixel value), Average (subtract the average of the left and the upper pixels) and Paeth (substitute the upper, left or upper left pixel value, named after Alan Paeth).

And here’s how these filters affect the image size in comparison with the good ol’ GIF:

Screenshot

GIF, 2568 bytes

Screenshot

PNG, 372 bytes

As you can see, the GIF image is 7 times larger than the same PNG-image.

Image type

Another important thing to know about PNG is image type, the meta-data stored inside the file. As a Photoshop user, you are familiar with PNG-8 (indexed image) and PNG-24 (truecolor image). As a Fireworks user, you may know PNG-32 (truecolor with transparency), which is quite confusing, because Photoshop’s PNG-24 may also store truecolor with transparency. Well, it’s worth knowing that these names are not official, and you won’t find them in PNG specs. For your convenience we’ll use Photoshop’s naming convention of PNG image types in this article.

There are 5 available image types in PNG: Grayscale, Truecolor, Indexed-color, Grayscale with alpha and Truecolor with alpha. There are also two subtypes of indexed-color type (non-official, too): bit transparency (each pixel can be fully transparent or fully opaque) and palette transparency (each pixel can be semi-transparent). In second case each color is stored in palette with its alpha value. Thus, opaque red and 50%-transparent red are two different colors and they take 2 cells inside palette.

The worst thing is that Photoshop can save PNG with only 3 of these types: Indexed-color with bit transparency, Truecolor and Truecolor with transparency. That’s why you may find a lot of opinions that Adobe Fireworks is the best tool for PNG optimization. Personally, I don’t agree with them: Fireworks doesn’t have enough tools for image manipulation, it’s only have slightly more options for saving PNG image, but it’s a topic for another discussion.

This is where utilities such as OptiPNG or pngcrush come in handy. Essentially, these tools do the following:

  1. Pick up the best image type for an image (for example, truecolor can be converted to indexed-color if there aren’t too many colors in the image).
  2. Pick up best delta filters.
  3. Pick up the best compression strategy and, optionally, reduce the color depth.

All these operations do not affect image quality at all, but do reduce the file size of the PNG-images, so I highly recommend you to use such tools every time you save a PNG image.

Now enough with the boring part, let’s do some magic!

1. Posterization

This is a well-known method of the truecolor image optimization. Open up the example image in Photoshop, press the Adjustments layer icon in the Layers palette and choose Posterize:

Screenshot

Pick the smallest possible amount of Levels (usually 40 is enough) and save the image:

Screenshot

Original, 84 KB

Screenshot

Posterized, 53 KB

Here is how it works: the posterization simply reduces the amount of colors, converting similar colors to the single one, thus creating posterized regions. This helps to perform a better scanline filtering and achieve a better compression. The downside of this method is color alternation, which is especially visible if you are trying to stitch image with a HTML background:

Screenshot
Original image

Screenshot
Posterized image

2. Dirty Transparency

Take a look at the following images:

Screenshot
75 KB

Screenshot
30 KB

Both of them were saved in Photoshop without any optimization. Even if you do a per-pixel comparison of these images, you won’t notice any difference. But why is the first image 2.5x larger than the second one?

You need a special plugin for Photoshop to see hidden details. It’s called Remove Transparency and available for free download on the PhotoFreebies plugin suite. You have to install it first before proceeding with the next step.

Open both images form the example above in Photoshop and choose Filer ? Photo Wiz ? Remove Transparency. Now you can see the actual pixel data that was saved in the image:

Screenshot

Screenshot

What’s happening? How is it possible to reveal the data from the original image from a single-layered PNG image? Well, it’s quite simple. Each pixel in the truecolor image with alpha is described by four bytes: RGBA. The last one is Alpha, which controls pixel transparency: the value of 0 means fully transparent pixel and 255 means fully opaque. And this means that every pixel (with any RGB value) can be hidden with just Alpha byte set to 0. But this RGB data still exists and, moreover, it prevents PNG encoder from effectively packing and encoding the data stream. Thus, we have to remove this hidden data (fill it with solid black, for example) before saving the image. Here is a quick method how to do this:

  1. Open the first image from the example above in Photoshop.
  2. Ctrl+click (or ?+click on Mac) on image thumbnail in Layers palette to create a selection, then invert it: Select ? Inverse.

    Screenshot

  3. Switch to Quick Mask mode by pressing Q key:

    Screenshot

  4. We have created a mask for a semi-transparent image, but we need to leave fully transparent pixels only. Choose Image ? Adjustments ? Threshold and move Threshold Level slider to the right, thus leaving fully transparent pixels of the selection:

    Screenshot

  5. Leave Quick Mask mode (press Q key again) and fill the selection with black:

    Screenshot

  6. Invert the seleciton again (Select ? Inverse) and click on the Screenshot icon in the Layers palette to add mask.

That’s it, now you can save this image in PNG-24 and ensure that the 75 KB image is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single keystroke.

You might think about “dirty transparency” as some kind of a bug in image editors: if those image regions can’t be seen and take so much space, why can’t they be removed automatically before saving? Well, this “bug” can be easily turned into a “feature”. Take a look at the following pictures:

Screenshot
5 537 bytes

Screenshot
6 449 bytes

If you remove transparency from those images, you’ll see the following:

Screenshot

Screenshot

Despite the fact that the first image contains more complex image data, it’s 1Kb lighter than the second one, which was optimized as described above. The explanation of this “abnormal” behavior is simple: image data stream in the first example was effectively packed by delta filters, which works better for smooth color transitions (like gradients).

Tech geeks may look at OptiPNG’s output log and ensure that filters were not applied at all for the second image. That’s why I highly recommend you to read The boring part of this article first before using these techniques: if you don’t understand what you’re doing, you can make your image even larger.

The ultimate solution to preserve original image data is to create a mask on the image layer in Photoshop (we’ll come back to this later):

Screenshot

As you can see, Dirty transparency is a very powerful yet very delicate technique. You have to know how and why it works before using it. If you are saving PNG-24 images with transparent areas, the first thing you have to do is to check image data in these areas and make the right decision on clearing or leaving them as is.

3. Split by transparency

Sometimes you have to save image in the “heavy” PNG-24 because of few semi-transparent pixels. You can save extra Kbs if you split such images in two parts — one with solid pixels, the second one with semi-transparent — and save them in appropriate graphic formats. For example, you can save semi-transparent pixels in PNG-24, and solid pixels in PNG-8 or even JPEG. Here is a quick (and recordable for Actions) solution to do this. For our experiments we’ll use this elder Russian iPod ancestor:

Screenshot
PNG-24, 62 KB

  1. Ctrl+click/?+click on image thumbnail in Layers palette to create a selection:Screenshot
  2. Go to Channels palette and create new channel from selection:Screenshot
  3. Remove selection (Ctrl+D or ?+D), select the newly created channel and run Threshold (Image ? Adjustments ? Threshold). Move the slider to the very right:Screenshot
  4. We’ve made a mask for selecting dead solid pixels. Now we have to split original layer by this mask. Ctrl+click/?+click on Alpha 1 channel, go to Layers palette, select the original layer and run Layer ? New ? Layer via Cut. As a result, there are two layers with separated solid and semi-transparent pixels.

Now you need to save those two images in separate files: solid pixels in PNG-8, semi-transparent ones in PNG-24. You can apply Posterization technique on semi-transparent pixels layer to make image file even smaller.

Screenshot
PNG-8
128 colors + dithering
17 KB

Screenshot
PNG-24
posterization 35
6 KB

And here is the result for comparison:

Screenshot
Before
63 KB

Screenshot
After
23 KB

This method has an obvious drawback: you get two images instead of one, which may be not so convenient to use (for instance, when making a product catalog in the CMS).

4. Influence masks

Actually, is is not a PNG-specific optimization technique, but demonstration of rarely-used Save for Web properties: Color reduction influence mask and Dithering influence mask.

Screenshot

Sadly, these properties were removed in Photoshop CS4, so you can try this optimization approach only in the pre-CS4 versions (I’m using CS3).

To understand how influence masks works, let’s open this demo image in PS and save it in PNG-8 with the following settings: Color reduction: Adaptive, Dither: No dithering, Colors: 256.

Screenshot
42 KB

The first thing I’ve noticed about this image is a very fuzzy pendulum. It is a very bright spot on the image and it attracts way too much attention. Let’s try to smooth pendulum’s color transitions by setting dithering to 100%:

Screenshot
46 KB

The pendulum looks better now, but we got another problems: image size increased by 4 KB and solid-color background became very noisy:

Screenshot

We can try to get rid of this noise by lowering dithering value, but the image quality may also be reduced.

Based on these problems, let’s try to do the incredible: increase image quality by lowering the number of colors and image size. Influence masks will help us.

Let’s start with the color. Go to Channels palette, create a new channel and name it color. We’ve already determined that the pendulum is our top priority region to improve image quality, so we need to draw a white circle right on its place (you can enable RGB channel for better precision).

Screenshot

Go to Save for Web dialog and set the following properties: Color reduction: Adaptive, Dither: No, Colors: 128 (as you can see, we reduced number of colors from 256 to 128). Now we have to select an influence mask: click on the Screenshot near Color reduction list and select the color channel from drop-down list: Now our image looks as follows:

Screenshot

You can see the influence mask in action: the pendulum looks perfect, but the other parts of image look really bad. By setting influence mask, we said to Photoshop: “Look, mate, the pendulum is very important part of image so try to preserve as much colors in this area as possible”. Influence mask works exactly the same as regular transparency mask: white color means highest priority in corresponding image region, black color means lowest priority. All intermediate shades of gray affect on image proportionally.

The pendulum now takes the highest color priority, so we have to lower the intensity of white circle to leave more colors for other areas. Close Save for Web dialog, go to Channels palette, select color channel and open Levels dialog (Image ? Adjustments ? Levels). Set the maximum output level to 50 to lower the white color intensity:

Screenshot

Try to save for Web again with the same properties:

Screenshot

Looks better now, but now we’ve got problems in other image areas:

Screenshot

I think you already understand how influence masks works: you provide Photoshop with some clues about important image areas with different shades of gray. With trials and errors I’ve got the following color mask (you can copy it and apply to the image):

Screenshot

Dithering influence mask works exactly the same, but instead of colors, it affects the dithering amount of different image areas. Lighter color means more dithering. This is a very useful feature, because dithering creates irregular pixel patterns which hinders the PNG compressor to use delta filters. You can determine the exact areas where dithering must be applied while leaving other areas intact, thus gaining better compression of image data.

My dithering channel looks like this:

Screenshot

Applying both color and dithering influence channels with the same optimization settings (Adaptive, 128 colors):

Screenshot

Pretty good for 128 colors, isn’t it? Let’s do some finishing touches: set colors to 180 and max dithering to 80%. And here is our final result compared to original, non-optimized version:

Screenshot
256 colors, no dithering, non-optimized
42 KB

Screenshot
180 colors, optimized
34 KB

Please stay tuned (RSS, Twitter) for the second part of the article where we’ll cover further techniques; we’ll talk about grayscale images, using less colors, lowering details and discuss further tips for PNG usage and optimization as well as the PNG optimization in practice.

Related posts

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


↑ Back to top

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.

  1. 1

    Great article… congratulations

    -1
  2. 2

    this is cool

    0
  3. 3

    sweet!

    0
  4. 4

    Very good article. I never knew about these techniques.

    1
  5. 5

    Excellent article!

    0
  6. 6

    Great, but the “Russian iPod Ancestor” After demo isn’t showing the transparent part of the image in Firefox 3.5 for me… Using OS X, if that helps.

    -1
  7. 7

    VERY interesting post. I was just messing up with Photoshop the other day trying to optimize PNG’s… Thanks!

    0
  8. 8

    great article, keep going!

    0
  9. 9

    Bravo! Nicely done. I’m constantly using PNG and now this just gives me even more of an excuse.

    0
  10. 10

    Wow, thanks for this insightful tutorial. I never knew we could use posterization to reduce the image size without causing much reduction in image quality.

    I especially adore the technique you’ve used for the iPod’s ancestor. Amazing one :)

    0
  11. 11

    I hate using elite speak, but this truly is an “epic” post. I did not know about the dirty png transparency, etc. Thanks so much!

    0
  12. 12

    Excellent article…you guys rock!! thx alot

    0
  13. 13

    great article!
    this might be interesting for osx users
    http://code.google.com/p/imageoptim/

    -1
  14. 14

    Awesome post! All smashing articles should be this good! Share more with us!!

    0
  15. 15

    I wasnt aware of any of these techniques. Thanks a lot.

    -1
  16. 16

    The “After” image in step 3 is decidedly different than the “Before” image. I assume what I’m supposed to be seeing is the reflection image underneath the opaque one, but it’s not working for me.

    (SM) Sorry, James. There was a mistake in the markup. It is fixed now.

    -1
  17. 17

    Wow, this was new to me – love it!!!
    Thanks

    0
  18. 18

    DIZZZAMM! Way sweet article. Thanx!

    0
  19. 19

    Awesome!
    I was just working on png screenshots with a transparent shadow. Out of all these techniques the most precious appears to be the posterization. The other techniques are too complex to bother if they shave only as much size. I’d use them very infrequently on some gem images.
    Thank you so much, the timing of this article couldn’t be more impeccable.

    0
  20. 20

    wow… love it !

    -1
  21. 21

    very nice post

    0
  22. 22

    I LOVE YOU MAN <3

    -1
  23. 23

    Very informative, cool!

    0
  24. 24

    Thank you for a GREAT article. I used to think I was stuck with huge PNG-24 files (I use them a lot for flash ads). This will really help a lot! Fantastic!!

    0
  25. 25

    Excellent!

    0
  26. 26

    This is by far the best article Smashing mag have produced this year. I’ve been doing image optimisation for years and thought I knew it all — boy, was I wrong! Some great new techniques to try out here. Many thanks.

    0
  27. 27

    Thank you for that article. This information is really appreciated.

    0
  28. 28

    Gracepoint After Five just recently launched punypng (http://www.gracepointafterfive.com/punypng) which combines a lot of the open-source technologies out there. The Ask.com User Experience team that I’m a part of uses punypng as our weapon of choice as well as the Gracepoint Fellowship Church web team. It’s very competitive to smush.it and pngout, and punypng beats them out most of the time (though don’t my word for it, try it out yourself to see).

    I think the great thing about something like punypng versus the command-line tools is that you can throw a whole folder at punypng and just let punypng do all the work to figure out which tool is best for the job. Sometimes converting a JPEG to PNG and then compressing it down is better … sometimes jpeg-tran or jpegoptim is better. Punypng just works.

    For more info about punypng on the Gracepoint After Five blog:
    http://www.gracepointafterfive.com/punypng-making-the-web-a-more-puny-place

    0
  29. 29

    I know the author mentioned that he doesn’t agree with using fireworks due to the lack of manipulation options, but for step #3 if you took that image and saved it with fireworks as a PNG 8 you’d get semi transparent pixels for the whole thing, with one image, and a smaller file size and less HTTP requests (if the output is for the web).

    So please don’t drop Fireworks completely just because its not the best in all cases. It is better than Photoshop for saving png 8 images.

    0
  30. 30

    Loved the article, especially the “boring part.”

    0
  31. 31

    Excellent article. Rocks!

    0
  32. 32

    really great article, and I learned a lot, but the last technique (influence mask) seems to be a bit too time-consuming, to just save 8kB, nowadays where internet is fast enough.

    0
  33. 33

    Sergey Chikuyonok

    July 15, 2009 11:14 am

    So please don’t drop Fireworks completely just because its not the best in all cases. It is better than Photoshop for saving png 8 images.

    True. But Fireworks doesn’t have enough tools for image optimization for PNG.

    but the last technique (influence mask) seems to be a bit too time-consuming, to just save 8kB

    This is just a demonstration how influence masks works. It doesn’t mean that you can save 8 KB only, on other images it might save even more KB.

    0
  34. 34

    ok, so influence mask can save more KBs on bigger images?

    0
  35. 35

    Sergey Chikuyonok

    July 15, 2009 11:29 am

    ok, so influence mask can save more KBs on bigger images?

    It depends on image. It can save more, of course. But I use this technique as a good companion to the “Less colors” method (you’ll see it in the next article) to improve image quality and reduce file size.

    0
  36. 36

    Photoshop really should give us more control over the output of PNGs, it hasn’t changed since ‘save for web’ was first introduced in 5.5…

    Am I right in thinking that Photoshop saves PNGs with extraneous metadata too? OptiPNG/PNGcrush seem to strip this out, plus resolve colour inconsistencies between browsers that I have noticed when you save straight from Photoshop. Would like more info on this if poss.

    0
  37. 37

    Sergey Chikuyonok

    July 15, 2009 11:55 am

    Am I right in thinking that Photoshop saves PNGs with extraneous metadata too?

    No. It saves clean file (if you use Save for Web dialog), but OptiPNG and other tools tries to determine better compression and filtering parameter. OptiPNG also tries to change image type (PNGCrush does not). I’ll give a little more info on this in the next part.

    0
  38. 38

    Re: dirty transparency

    I recorded the Photoshop action as mentioned in the article and made it available for download if anyone wants it.
    http://www.gracepointafterfive.com/dirty-transparency

    (SM) Conrad, thanks. The link was added to the article.

    0
  39. 39

    Wow! Someone buy this guy a beer!

    0
  40. 40

    Thank you for this extremely well written and helpfull article.

    You guys are the best.

    0
  41. 41

    Really, really interesting, thanks.
    Claudio.

    0
  42. 42

    Really good article !!! nice job!!!!!

    0
  43. 43

    Ian Storm Taylor

    July 15, 2009 12:55 pm

    Very interesting article.

    I have a quick question… You describe how PNG encodes vertically while GIF encodes horizontally (sorry if I butchered your information, but you get the point).

    Does this mean that when saving a horizontal gradient we should use GIF? or is PNG more efficient for all gradient directions. (Tried to glean this information from the article, but I couldn’t understand it all.)

    Thanks!

    Please have more articles like this… combined with the JPEG optimization techniques I am now going to completely reoptimize my website and compare load times.

    EDIT: Hmm… after rereading again to try and avoid an unnecessary answer… I think PNG will work just as well for horizontals, because isn’t it the Paeth-type that does this? And it can be used for Up or Left?

    Maybe that’s completely wrong… but let me know.

    0
  44. 44

    The Posterize is a very briljant technique. Thanks alot!

    0
  45. 45

    Am I right in thinking that Photoshop saves PNGs with extraneous metadata too?

    Yes, it does. Any PNG image saved with Photoshop’s Save for Web… or Save As…> PNG includes a tEXt chunk with Software=Imageready. You can see it by opening the image as text, e.g. in a text editor like Notepad++, the text is right there.

    Earlier versions, like Photoshop CS, always added chunks pHYs and cHRM (chromaticities), the latter responsible for color discrepancies in browsers.

    0
  46. 46

    Absolutely brilliant. Bookmarked!

    0
  47. 47

    outstanding

    0
  48. 48

    Sergey,

    Have you done any side-by-side comparisons of some of these techniques with just running the image through OptiPNG or pngcrush? I’m curious what sort of savings the extra manual work might offer.

    0
  49. 49

    So now it’s why PNG compress better than GIF

    Btw how about Animated PNG a.k.a A-PNG, any chance to discuss it?

    0
  50. 50

    Very interesting article — informed me of a lot of things I wasn’t aware of. Not sure I understand it all, but peaked my curiosity anyway. Thanks!

    0
  51. 51

    cancel button,

    I ran some tests using Sergey’s techniques through punypng which uses a variety of open-source compression in its toolbox.

    For 8-bit transparent PNGs, with Sergey’s dirty transparency technique, I saved around 25%. Running that through punypng added another 10% of savings. The punypng part really depends on the type of image you’re working with, but basically, the kind of optimization that Sergey describes are ones that work well in tandem with traditional png compression like in pngcrush or optipng.

    The only time dirty transparency produced larger results and actually worked against punypng was when I was using 1-bit transparent PNGs. In these cases, the better choice would be to output an indexed GIF and then convert it using punypng to an indexed PNG.

    0
  52. 52

    Nice article! You might also want to check my 16 Image Optimization Tips Post: http://codefusionlab.blogspot.com/2009/07/16-impressive-image-optimization-tools.html

    0
  53. 53

    One other useful technique for transparent PNGs is to create an 8-bit PNG that contains also contains semi-transparent colours.

    Fireworks supports this rare PNG feature as well as pngquant (+ the manfred pngquant GUI).
    http://www.libpng.org/pub/png/apps/pngquant.html
    http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/

    This method also has some benefits, as described in this Sitepoint article:
    http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    0
  54. 54

    One of the best posts that I have read on Smashing: containing both theoretical information and practical techniques that I’d never heard of, and both explained very clearly. Well done.

    0
  55. 55

    when using the .png file format within design elements don’t forget to remove the gamma: http://morris-photographics.com/photoshop/articles/png-gamma.html

    0
  56. 56

    That absolutely rocked. Would be very interested in knowing if, of the methods listed in the above article, there are particular techniques that are more or less useful in optimising PNGs (or other image formats) for use in Flash.

    At the moment I tend to save most images as PNG 24 before importing, and Flash looks like it can optionally then do it’s own kind of compression on them (jpeg), while still maintaining transparency/semi-transparency. Any insights as to how Flash is actually interacting with these images, and how to maximise optimisations like those discussed above, would be extremely useful.

    I’ll of course be doing some experimenting with it on my own, in the meanwhile, but don’t think I’ll ever have the level of insight that could be provided by the author of this article!

    0
  57. 57

    Could it be that I can’t see some images of this article either on my Google Reader or Safari or Firefox? Is it just my problem?

    0
  58. 58
  59. 59

    very very targeted article

    0
  60. 60

    Carola, no it’s not just you, half the images are missing for me too, I’m using IE8

    0
  61. 61

    Some of the images in this article are missing for me as well. Missing in IE and Firefox. Guys, any idea why I can’t see them?

    0
  62. 62

    Some screenshot images missing …

    0
  63. 63

    very clever technique :D Though some images in comparison are missing, any idea why?

    0
  64. 64

    Very good article!
    But some (comparison) images are missing… :(

    0
  65. 65

    This is very good.

    Can we use this type of PNG in background repeat-x using with css?

    Thanks in advance

    0
  66. 66

    iPod ancestor :):)

    0
  67. 67

    Smashing Editorial

    July 15, 2009 10:58 pm

    Sorry guys, we had some media server issues – we are working to solve the problem!

    0
  68. 68

    Thank you for that article. This information is really appreciated.

    0
  69. 69

    I used photoshop cs2, and the remove transparency worked same for both the images, the transparent portion was converted to opaque white color and not the entire image as you said.

    0
  70. 70

    Very helpful, thank you! I’m starting to use .png on the wide range so this article is excellent for me now! Best regards to the Author.

    0
  71. 71

    Totally Amazing ! Very good Artikel ! Thanks a Lot !

    0
  72. 72

    Informative boring part :)

    0
  73. 73

    Thanks again – I can get back to designing again without having to worry about huge PNG file sizes.

    0
  74. 74

    amazing post

    0
  75. 75

    Sergey Chikuyonok

    July 16, 2009 12:11 am

    I think PNG will work just as well for horizontals, because isn’t it the Paeth-type that does this?

    PNG is better than GIF in every aspect, is saves both vertical- and horizontal-spread colors very good. The real compression is made by Deflate algorithm, scanline filtering is a helper feature that makes compression even better.

    Have you done any side-by-side comparisons of some of these techniques with just running the image through OptiPNG or pngcrush?

    Yes, I did. That’s why I’m using these techniques :) The main idea of these optimization methods is to prepare image for better PNG compression. Savings are very big, sometimes it’s 50–60% off without noticeable quality degradation. Stay tuned for the next article, I made a screencast that shows how these techniques work in real life and affects on OptiPNG compression.

    Would be very interested in knowing if, of the methods listed in the above article, there are particular techniques that are more or less useful in optimising PNGs (or other image formats) for use in Flash.

    You should try “Dirty transparency” method. Also you may try to extract transparency mask from the image, optimize it with Posterization and apply to the original image. This might save you a few bytes.

    I used photoshop cs2, and the remove transparency worked same for both the images, the transparent portion was converted to opaque white color and not the entire image as you said.

    It depends on how these portions were masked. If you delete them, some portions will be filled with solid color (it also depends on mask shape), if you apply a mask to the image layer, the masked areas will be preserved.

    0
  76. 76

    wow. those influence masks are incredible. but it does take a lot of time to save 8k

    0
  77. 77

    Thanks for a great article, I was always wondering about photoshops lack of PNG compression options, bookmarked for life!

    0
  78. 78

    cool. i wish PNG could be animated.

    0
  79. 79

    Incredible article, thanks!

    0
  80. 80

    Thanks smashingmag for very useful article.

    0
  81. 81

    Great article – and postet exactly on the day that I needed these infos. :)

    Since you mentionend the tools OptiPNG and pngcrush you might want to take a look at PngOptimizer: http://psydk.org/PngOptimizer. It is IMO much easier to use and gets my PNGs compressed a bit more.

    0
  82. 82

    great post !

    is anybody knows the translation for “posterize” in the french photoshop ?
    thx ;-)

    0
  83. 83

    Great article! Thank you

    0
  84. 84

    Thanks for that detailed tutorial, highly appriciated!

    0
  85. 85

    This is an amazingly useful article! Show’s a real understanding of the technical knowledge behind design that so many people lack. Thank you.

    Managed to get a set of 14 images from 900KB down to 300KB with the posterization technique and then pngcrush.

    0
  86. 86

    great, great, great!
    Thanks!

    0
  87. 87

    One of the best articles I’ve seen on Smashing for a LONG time. Well done.

    0
  88. 88

    So IE6 is all happy with PNGs then

    0
  89. 89

    You don’t have to split the image into two as PNG-8 supports alpha transparency just fine.

    Open the image in Fireworks, change from “No Transparency” to “Alpha Transparency” under the Optimize tab and edit in the semi-transparent pixels you want.

    Save the image through File > Export…

    Semi-transparent pixels will become fully transparent in IE6 and below while in the more capable browsers (IE7+, Firefox, Opera, Safari et al.) it’ll have full-blown alpha transparency.

    0
  90. 90

    Great! it must knew every web designer.
    Thanks!

    0
  91. 91
  92. 92

    hans:

    You mean MNG, then: http://en.wikipedia.org/wiki/Mng

    “MNG is closely related to the PNG image format. When PNG development started in early 1995, developers decided not to incorporate support for animation, not least because this feature of GIF was seldom used at the time. However, work soon started on MNG as an animation-supporting version of PNG. Version 1.0 of the MNG specification was released on January 31, 2001.”

    0
  93. 93

    Complicated but nice and understandable!!!
    thanks a lot!

    0
  94. 94

    crazy…

    0
  95. 95

    Amazing Post… Splendid … Hats off to you Sergey!!!!!!!!!!

    0
  96. 96

    Two thumbs up. Great work Sergey. Cheers!

    0
  97. 97

    Awesome… Very informative

    0
  98. 98

    Excellent technique, but its very time consuming. Optimising 200+ PNG files in site means a lot of additional time spent on image editing… My clients wont pay for that.

    Anyway Chapeau Bas Monsieur :-) Great Stuff.

    0
  99. 99

    As a png novice – are they safe to use on websites in place of gifs?

    Do all browsers like them?

    0
  100. 100

    Sergey Chikuyonok

    July 16, 2009 6:09 am

    Quakeulf, APNG is a Mozilla’s fork of animated PNG: http://en.wikipedia.org/wiki/APNG

    Beacuse of two different forks (APNG and MNG) we still don’t have apropriate standard for everyday use.

    0
  101. 101

    As a png novice – are they safe to use on websites in place of gifs?

    Do all browsers like them?

    IE6 hates PNG, but you can get some simple JS work arounds.

    0
    • 102

      IE6 Is no longer supported… And you shouldn’t suport it either.http://www.ie6countdown.com/

      IE6 is dead dude.

      I would love some examples of how this technique is applied in the workplace. I’ve never been asked to reduce a PNG from 30KB to 17KB. Than again, I’ve never worked on a site that had millions of hits per day, with hundreds of thousands of uniques. There was one, but It was a mashup site that was hosted for the durration of the promotion and required a lot of throughput (video and audio I/O, so a PNG wasn’t a huge deal). *shrugs* I would love to master these techniques, the Split by transparency part seems like a total PITA though.

      0
  102. 103

    For those concerned with the time involved in manually editing possibly large amounts of images (I’m one of them), check out http://smush.it

    It uses OptiPNG and pngcrush (both mentioned towards the top of this article). It’s also available in the latest YSlow (under Tools).

    0
  103. 104

    Liked the Article. Been using PNG’s and the methods described here for a While.

    I did want to point out one little thing that may be misleading.
    Your small gradient was only 5 steps, sure – but you should not use the .gif format for something like that. Basically Gif works because it records the first bit (color), and how far that color continues until it hits a new color.
    So a Solid Red square, no matter How big, will have the same file size. If you have an image with Many color changes (i.e. a photo, or even a life like illustration or a large gradient), it is best to use a .jpeg format. (I don’t want to get into the compression of .jpeg here, but it samples “clusters” of similar colors). Now, since we are discussing transparency here, Obviously, you want to use a gif, jpegs don’t have an alpha channel. and the rest of the article is great – I just didn’t want readers to straight compare a .png gradient file with a .gif gradient file, as it should have not been used in the first place. Unless it really is a Tiny file.

    Keep up the Great work, and Ill keep up the great reading!

    3
  104. 105

    OMFG this is fuckin awesome!

    1
  105. 106

    Wow, this is an awesome article! I have to go through this several times as this is just incredible and comes so in handy. Thanks for sharing!

    0
  106. 107

    @bryan

    IE6 will work fine with PNGs, except that it won’t recognise alpha transparency out of the box (the transparent areas show as a weird opaque blue-grey colour).

    There are two solutions:

    1. Use Fireworks to create an 8-bit PNG with indexed alpha transparency – works fine in all browsers and just shows up as GIF-like boolean transparency in IE6. Pros – will work without any hacks or additional scripts. Cons – a bit time consuming to apply to large numbers of images.

    2. Use JavaScript to invoke either the Microsoft proprietary filter effects or VML rendering to force IE6 to recognise the alpha channel. Pros – quick to implement. Cons – using filters can trigger other bugs in IE6, some scripts are incompatible with other JS frameworks (such as JQuery) that you may be using, and if end user has JS turned off they just won’t work.

    Best script for this I have found so far is DD Belated PNG

    0
  107. 108

    You should try “Dirty transparency” method. Also you may try to extract transparency mask from the image, optimize it with Posterization and apply to the original image. This might save you a few bytes.

    Thanks for the tips! Of all the times where I find myself fretting over filesize, flash projects (especially banners) are where optimisation has had the most immediate and practical impact.

    0
  108. 109

    Another interesting read. This is a great site – really – well done. Please keep it up.

    0
  109. 110

    Great article, some really handy techniques. One caveat I feel should go with the splitting the png image:

    Splitting an image in 2 can become counter productive, particularly for smaller images (sub 20kb) when taking into account connection lag overhead. This is particularly important when considering the increased use of internet connections on cellular networks. By the time you go through a local wireless router to a wireless internet connection to a local exchange then to a remote server you can be looking at a significant lag in connection time in each request.

    I’m not saying this isn’t a valid technique, just saying that latency should be taken into account before deciding to split images. This also depends greatly on your server and it’s something you have to assess on a case by case basis.

    0
  110. 111

    nice tut ;)

    0
  111. 112

    Superb article; informative, well-written and useful. If there was more of this quality the web would be a much better place!

    0
  112. 113

    thanks for the tut

    0
  113. 114

    In Fireworks all this is just build in, Fireworks rule png on all ways.

    -3
  114. 115

    wow this is just amazing, thx

    0
  115. 116

    If you use PNGOUT on your best result, it compresses it even further – down to 31,957 bytes (compared to yours 34,610).

    http://www.olegkikin.com/result1.png

    0
  116. 117

    This is nice info but the point of PNG is to have lossless compression.

    In all these cases, using JPG would give better results.

    1
  117. 118

    woahh! great style! :D

    0
  118. 119

    I don’t understand this very well. I will have to re-read it quite alot

    0
  119. 120

    Gread article!

    0
  120. 121

    Thanks for this superb article! Using the posterization technique here and the Dirty Transparency action I was able to reduce the header PNG on my site from 590K to 404K!!

    0
  121. 122

    Sergey, thanks for an excellent post. It’s very informative and well-researched.

    0
  122. 123

    Thanks for the amazing PNG Tut :)
    Slice2u.com

    0
  123. 124

    Just wanted to announce that punypng (http://www.punypng.com) now has built-in support for dirty transparency. I’ve been getting some great results with the new technique that I decided to just add it into punypng so I don’t have to even think about it.

    Here’s my write-up on punypng’s implementation of dirty transparency and some side-by-side comparisons:
    http://www.gracepointafterfive.com/punypng-now-supports-dirty-transparency

    I’ve been in contact with Sergey Chikuyonok (the author of this smashing article) regarding the implementation of dirty transparency. He took punypng for a test drive and reported to me that his results with punypng have been very impressive … better than optipng or imageoptim (with all the libraries enabled). Give it a try as well … I’d like to hear what others are getting out of it.

    3
    • 125

      I love PunyPNG, what a sweet tool! Even after taking a PNG-24 from Photoshop, then reducing it to an adaptive alpha PNG-8 in Fireworks, it STILL comes back with an even more reduced result. Crazy awesome.

      0
  124. 126

    In the Split by Transparency technique, how was the final image saved as one file so the file size is 18 Kb?
    Thanks

    1
    • 127

      *bump*
      I’m also curious how this technique is put into practice in HTML/CSS. Layering image divs on a z-index or what?

      0
  125. 128

    Nice article!
    Last time i cared about png optimization was in 2003.
    Don’t think it is necessary anymore, since the internet connections keep getting better!
    Just wondering, does anyone know if Photoshop has improved their png compression options? Back then PS was the worst!
    Makes me think about how few the Web has changed since then, 6 years and you still find similar issues discussed!

    0
    • 129

      This comes up primarily because of the rises of Internet access via cellular networks, I think. There are two major concerns with websites that take mobile devices into account – download speed (4G tends to be pretty good, but 3G sucks, and both suck at peak times or when signal strength is low), and data limits. While it’s not necessarily any given developer’s job to make sure they don’t risk a user going over in their data limit, it is/can be considered “good sportsmanship” to take reasonable steps to ensure that sites aren’t overly large because of images.

      Data limits, especially, can also be a concern in other places where metered usage is a common service model (I think some parts of Australia do this, and maybe some American Comcast places). There are also still a number of people who are stuck with dial up or barely-better-than-dialup DSL or satellite Internet services, for whom download speeds suck all around.

      In short, it depends on who your target audience is. If you’re a developer for, say, LucasArts, Blizzard Entertainment, or ESPN, your audience probably doesn’t care, as they’re likely already paying premium rates for unlimited, high-bandwidth Internet plans, and a MB or two per site saved won’t affect them much. If you’re developing for a company that services rural American areas, however, you’re site is likely better received if it’s as small as you can make it (while still having a modern look).

      2
  126. 130

    Nice article, I’ve learn a lot. Although the last technique didn’t really work for me. When I saved the image as PNG-8 it locked the layer and then I couldn’t draw the white circle in the channel I created. The only way to unlock the layer was to save it in a JPG format and do the changes in JPG format. So I am not sure if the instructions are not quite precise or I am doing something wrong.

    0
  127. 131

    From the article, I learned a lot, it helped me solve a lot of questions.
    I believe that in China there are still a lot of people every day in the search “PNG”, and it troubles. Such a good article I hope to be able to help more of the front-end engineer, so I would like to have your permission to let me use the Chinese translation of this article, thank you!

    0
  128. 132

    Mr. x128 has created the small program for interactive optimising records png.
    This program allows to make png better quality, than that are described here in article.
    http://pj2k.livejournal.com/1728.html

    0
  129. 133

    awesome article …
    thought i dont get whats happening in the PNG conversion part … hehe …
    anyways … thanks …

    0
  130. 134

    One of the best articles I’ve ever read!

    0
  131. 135

    most wonderful post ! Congratuation!

    0
  132. 136

    wow! I’ve been reading Smashing magazine for a while and this has to be one of the best and most useful articles I’ve ever read. Great work Segey!

    0
  133. 137

    Outstanding work and research. Simply, the best article iv read on SM.

    0
  134. 138

    Thank you! That’s Awesome Post!

    0
  135. 139

    AMAZING!! Cheers!

    0
  136. 140

    Sadly most of these techniques don’t work very well in images that have a lot of transparency. The first technique worked very well though. PS is amazingly complex… Anyway, I had a 134kb image (main logo) at http://wildreason.com and I was able to get it down to 99kb using posterize. Pretty awesome. I’m a freelance website designer and I think load times is one of the most overlooked aspects of creating a highly optimized website for search engines.

    But for really impressive, detailed graphics, the jury is still out. The search continues! Thanks for the tips though… bookmarked.

    0
  137. 141

    Anthony thyssen

    July 6, 2010 7:13 pm

    You can use ImageMagick to batch process PNG images to remove Dirty transparency…

    See the ImageMagick option -alpha Background
    http://www.imagemagick.org/Usage/basics/#alpha_background

    Also look at the discussion on the ImageMagick Forums
    http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=16566&p=60757#p60757

    2
  138. 142

    Very good article.

    0
  139. 143

    Dirty transparency rocks! works well for me. thank you so much for this post !

    -1
  140. 144

    I have not used the posterize adjustment yet. Nice little tip there.
    Thank you!

    0
  141. 145

    So useful!

    0
  142. 146

    Excellent tutorial, I have a site that’s very transparent image intensive so this is gonna save me a LOT of grief. Dirty transparency is the missing link for me. Great stuff, thanks!

    0
  143. 147

    Great article. Thanks.

    0
  144. 148

    Awesome tutorial. Thank you! Definitely bookmarked.

    0
  145. 149

    The ultimate tool for PNG compression optimisation (see also page2 of the thread for updates)

    http://en.irfanview-forum.de/vb/showthread.php?3318-the-ultimate-tool-for-PNG-compression-optimisation

    0
  146. 150

    Great Tutorial. I used a few of these techniques and got my large png from 600 to 340. Thanks again.

    0
  147. 151

    Great article. The “remove transparency” plugin, however, seems to be down. Bummer.

    0
  148. 152

    thanks for this amazing article.. very useful for optimize png

    0
  149. 153

    Excelente artículo!!, very clever optimization buddy

    0
  150. 154

    Sergey, thanks for the awesome tutorial. I never knew about the posterization trick. You just saved me a few pixels :)

    0
  151. 155

    Thanks for this great article. I see it is from 2009 but didn’t stumble upon it until now. We (the company I work for) never really used big sized PNG images in our web projects, but just recently we finished a website which called for large PNG images on top of another background image. Due to the large amount of visitors there is a lot of data traffic on the server which is know casuing problems. I am looking into optimizing all the PNG images and posterization seems like it’s the only way to go since all the images contain shadows. Does anyone know an easy way to apply technique number 2 (Dirty Transparancy) to PNG images containing shadows? I hope someone can help.

    0
  152. 156

    I used posterize on Paint Shop Pro and set it to 40 as you suggested. It got a huge png from 253kb down to 161kb. I tried a number of the other programs that some suggested here. The best was Riot. It created a gif file with transparency down to 74 kb. However, it was not good enough for professional work. When I used Riot in the png format, it took very little off, and when I went to keep the transparency it actually added to the file size up t0 290 kb.

    I found most of the other programs only take a little off. Very rarely do you find a help as yours which is so much better and so much easier. The posterize trick took 30 seconds. All the rest were time consuming. Great job!

    0
  153. 157

    frankly, i find photoshop an abysmal waste of money and time and got rid of it as PNG is the only raster platform I need for web graphics ~ i feel sorry for people like the author of this article who recognize the vaste superiority of PNG alpha layering over PSD memory rape and mental anguish ~ one of two things could correct this deplorable situation :: Adobe could finally adopt full support for Open Source PNG Alpha Transparency Layering (come on baby, talk to Ulead or Microsoft or Micrographix or or or …) :: unplugged brain drains like this article could disappear forever (that we will not miss)

    -1
  154. 158

    Marwan Salfiti

    July 7, 2011 2:53 pm

    I just used this technique for a few of my websites. I build my sites with WordPress and have been hearing from my clients the the sites were slow. Granted, these are graphic rich sites, but in this day and age, that shouldn’t really matter, right? Wrong! I tried so many tips and tricks and this technique (posterizing the images) worked masterfully. On some images, I crunched more than have the size out.

    To put a number to this, I eliminated over 130k in some instances on a restaurant site where image presentation is key. I posterized, reduced, masked where I could not suffer in quality and tadaaaaa! Thanks for the great tut, one definitely worth saving and referencing over and over.

    0
  155. 159

    Impressive in-depth article on png-optimization.
    A few of these techniques were totaly new to me

    0
  156. 160

    Great article! However there might be something wrong within your post.Check this: “The “Up” filter sends the message to the PNG decoder: “For the current pixel take the value of the above pixel and add it to the current value.””. Should it be ‘SUB’ not ‘add’? And same problem with the “Sub” filter. :)

    0
  157. 161

    I don’t understand how the posterizing thing works. According to the Gimp documentation, a level of 40 means 2^40 colors, while a (no-alpha) PNG is 24-bit, which I would assume would mean 2^24 colors So why does it reduce colors?

    Not that I’m complaining: It works well enough that I got an image to be smaller than a JPEG. Heck, it was almost the size it was when I made it an 8-bit PNG (which looked awful).

    0
  158. 162

    Jeffrey Faurillo

    August 29, 2011 4:20 pm

    Nice info! now I know how to optimize png files :) kudos!

    0
  159. 163

    This is a very in-depth article. For developers who want more of a turn-key solution to some of the techniques described here (or even to add a layer of optimization on top of these), try my PNG optimization application for Mac OS X, PNGPress: http://extrafuture.com/code/pngpress/

    0
  160. 164

    Totally rocking article. I always wondered about Fireworks and Photoshop saving different sized png’s. Those examples are fantastic also, really detailed and teaches me techniques I never knew of.

    0
  161. 165

    ImageAlpha does these optimisations automatically!

    Especially posterization can be done *much* better than in Photoshop. In the article it reduces 84KB → 53KB, but ImageAlpha can do 37KB on the same image! (or even down to 24KB with PNG8+alpha).

    0
  162. 166

    Unbeliveble……2. Dirty transparency
    Its really works for me. Thank You

    0
  163. 167

    Wow, definitely bookmarking this post.

    I can see these techniques being very useful.

    Thanks :)

    1
  164. 168

    This is a really helpful article. Well done!

    0
  165. 169

    Very interesting, updated and useful. Also boring actually, that is said by yourself in your article though, but really really a must read for front-end designer.

    0
  166. 170

    Thank you! Posterise has helped me out amazingly!! All GIMP users – it’s in there under Colours! :)

    0
  167. 171

    Rolf Timmermans

    June 25, 2012 12:47 am

    We have created an online service at http://tinypng.org that allows you to convert 24-bit PNG files to 8-bit PNG files, while keeping full transparency (semi-transparent pixels are preserved). The number of colours are intelligently reduced, somewhat similar to the posterisation technique described here.

    6
  168. 173

    Am I missing something on step 2? First of all, I didn’t see “Remove Transparency” anywhere on their website, but I downloaded anyway. When I installed it and restarted my PhotoShop, it doesn’t show up under my filter menu. I’m in PS 6 on Windows.

    0
  169. 175

    Great article. it’s very useful. Thanks a lot.

    0
  170. 176

    Great article! Very helpful.
    One more image optimize tool: Lossless Photo Squeezer.
    Give it a try.

    0
  171. 177

    Herbert van der Wegen

    December 18, 2013 9:03 am

    People! Please just use Color Quantizer – nothing comes close to that little gem for PNG optimization. It’s free, includes an easy to use quality mask brush, and comes with many settings if so desired.

    Batch processing is included, and colour reduction in steps of 16,32,64,128,256,512(!), 1024(!), 2048(!) and 4096(!) is supported as well. The developer is switching to Zopfli soon for even better compression.

    Nothing out there beats it for sheer flexibility in a easy to use GUI.
    http://x128.ho.ua/color-quantizer.html

    0
  172. 178

    Nice tips.Thanks for sharing..
    One more great tool for Mac to reduce the size of images–IMAGEmini
    More information ,you can search it in Mac App Store.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top