PNG Alpha Transparency – No Clear Winner

Bookmark and Share

Jul ‘08 25

As a long time user of Adobe Photoshop, I missed the boat on a very important discovery in image optimization – PNG-8 supports full alpha transparency!

Alex Walker wrote a great article on PNG and included a nice example on creating PNG-8 images with a full alpha transparency layer with Fireworks – yes, Fireworks. Stoyan Stefanov points out this ability in his image optimization mistakes presentation as well. Thanks to you both for enlightening me!

Before Stoyan and Alex, I like probably many other thousands of Photoshop users believed, or still believe, that PNG-8 is identical to GIF, i.e. an all or nothing scenario when it comes to transparent pixels. In Photoshop, we are left with the usually bloated, heavy PNG-24 format that I typically steer folks away from.

However, in applying PNG-8 to my favorite PNG transparency techniques, I came to a different conclusion than Alex and Stoyan. This article shows there is no silver bullet when it comes to saving out PNGs (are you listening, Adobe?).

PNG Transparency Text Effects

One cool technique we can do with alpha PNGs are text effects, as detailed here by Nick La. The technique involves layering an empty element containing the horizontally tiled background gradient over system text.

Using this CSS and HTML, we can pull off the desired effect:

<style type="text/css">
.glossy-text
{
	font: 45px 'arial rounded mt bold';
	margin: 0;
	position: relative;
	color: #f30;
}

.glossy-text b
{
	background: url(glossy-text-photoshop.png) repeat-x;
	position: absolute;
	width: 100%;
	height: 27px;
	top: 4px;
	display: block;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='glossy-text-photoshop.png', sizingMethod='scale');
}
</style>

<div class="example">
<h2 class="glossy-text"><b></b>PNG Can Overlay Text</h2>
</div>

Here are the results…

PNG Can Overlay Text

And another using the same image, with blue text…

One Image for Every Heading!

The optimization win here is clear – use only 1 image across multiple headers to pull off a polished design for headings!

The PNG Image

I created the PNG image in Photoshop using a Gradient Fill layer. This gives us a fine deal of control over the gradient and the level of transparency to apply at each point. We can visually see how much transparency is applied by looking at the shade of the Opacity Stops. White is 0% Opacity (invisible), while black is 100% Opacity, or fully visible.

Photoshop Gradient Fill

Now, we will head on over to our trustworthy Save For Web tool, and notice how our PNG-8 doesn’t support full alpha, as usual.

PNG-8 PNG-24
Glossy Text Photoshop Png8  Glossy Text Photoshop Png24 

I will save out the PNG-24 version, which comes out to 156 bytes, not too bad at all. Let’s see if Fireworks and its PNG-8 format can do better.

Now, if you are new to Fireworks (like me), the workflow is a bit different than Photoshop. Let’s start by opening up our PNG-24 image saved out of Photoshop, and switching to the export Preview view.

Fireworks Export Preview View

The Export Preview is essentially the same thing as Photoshop’s Save for Web tool. Look over to the right in the above graphic at the Optimize and Align panel – those are the settings it’s using. Let’s update that to PNG-8, and the Alpha Transparency option.

Fireworks Optimize Align Png

To export the image, we can go to File…Export, but we can also see the expected KB in the lower-left corner of the panel, a file size of 248 bytes. After exporting, we see it was actually 238 bytes. (Adobe, why can’t this be completely accurate?)

Photoshop PNG-24, 156 bytes glossy text from photoshop
Fireworks PNG-8, 238 bytes glossy text from fireworks
Fireworks PNG-8 (dithered), 278 bytes glossy text dithered from fireworks

Now, this brings me pause, because the PNG-24 I saved out of Photoshop was a mere 156 bytes – 37% smaller in size! You can also clearly see that the Fireworks image is banding, which I would not expect to happen on such a low color image. I also dithered it, and it got larger and the pattern was still noticable.

It would seem that for this design purpose, the glossy text overlay, Photoshop’s PNG-24 is the better choice. My luck indeed!

Gradient Header Backgrounds

Similar in design to the text overlay image, the same finding is bound to hold true for gradient background techniques, right? Read on…

I’m going to create another Gradient Fill layer, and overlay a fade to white, and a fade to black over a layer filled with red. Notice I added a Color Stop in the center to ensure one side is white, and the other is black.

Glossy Background Gradient Fill

Just to be fancy, I will go ahead and add some fully opaque rounded corners using our selection tool. First, I’ll make a circle selection with a 10px diameter, giving us a 5px corner radius.

circle selection at the top left corner of the header

Next, we’ll add to the selection along the top and left hand sides of the circle selection.

same thing on the left hand side

Next, we’ll need to use Select…Inverse to flip the selection so we can fill it in.

menu select inverse

Using our pencil tool with at least a 5px radius, we fill in our rounded corner with white.

filled in with white

Notice that it also nicely anti-aliases against the layer below. For the other side, we’ll simply make a selection around it, and copy it over to the other side of the header.

copying the rounded corner

Move it over to the other side and do Edit…Transform…Flip Horizontal.

menu flip horizontal

And finally, position it in the right spot.

position the right corner

It is time to save out our PNG. Let’s go ahead and disable our layers and crop the image.

before diabling layers

after disabling the layers

cropped

And now for the PNG-24 vs. PNG-8 test.

Photoshop PNG-24, 399 bytes Glossy Background Photoshop Png24
Fireworks PNG-8, 397 bytes Glossy Background Fireworks Png8
Fireworks PNG-8 (dithered), 411 bytes Glossy Background Fireworks Png8

The tables have turned – PNG-8 wins by 2 bytes! However, notice again there is banding going on, which is bothersome to me for such a low color image. I played with all the settings I could in Fireworks to no avail, and the dither is larger in size and looks worse, so again I will have to hand this one to Photoshop’s PNG-24.

ImageOptim, a GUI PNG Tool

And then, I thought about messing around with some programs Alex mentioned in his article, the programs PNGQuant and PNGNQ. PNGQuant and PNGNQ take 32-bit or 24-bit PNG images and "quantize" them down to 8-bit, or PNG-8. Now, what sucks is that the tools are command line, although PNGQuant has a GUI version for Windows, it is difficult to install and doesn’t help OS X fans like myself and many other designers.

I couldn’t get either of these to work on OS X, because I am chobo and didn’t want to spend more then the 30 minutes I did trying to compile the source code on OS X.

In my Googling for GUIs, I discovered ImageOptim. Now, I have no clue what language the developer speaks, or what the tool does exactly, but if you want to help me translate for my readers, be my guest:

screen shot of imageoptim homepage with non english text

If I had to guess, it appears to try various PNG algorithms until it gets one that compresses the best. The tool is very user-friendly, and would fit nicely into any process as you simply drag and drop your files into its window, and it takes care of the rest.

To see how we fare, let’s take our full quality Photoshop PNG-24, and drop it in.

dragging png24 into imageoptim window

Viola! ImageOptim crunched our PNG-24 down to 355 bytes, a savings of 11%. Recall this is also smaller than our Fireworks PNG-8 (397 bytes).

imageoptim results window savings of 11%

The resulting file was smaller and identical to the original:

Photoshop PNG-24, 399 bytes Glossy Background Photoshop Png24
Fireworks PNG-8, 397 bytes Glossy Background Fireworks Png8
ImageOptim PNG, 355 bytes image optim png

Let’s go back and see if we can save anything from our Glossy Text image.

glossy text results showing no gain

Looks like we didn’t gain anything, oh well.

My one beef with ImageOptim is that I have no clue what it did. Did it throw away information? What program did it use, OptiPNG, PNGCrush, AdvPNG? And why is their logo of a man getting impaled by credit cards?

imageoptim logo

Okay, with that we’ll use the ImageOptim version of the PNG to complete our design, along with the following CSS and HTML, for those interested.

<style type="text/css">
div.glossybg
{
	width: 250px;
	font-family: verdana;
	margin-bottom: 1em;
}
div.wide
{
	width:500px;
}
div.glossybg h2
{
	color: #fff;
	height: 32px;
	font: 18px/30px verdana;
	margin: 0;
	padding-left: 12px;
	background: #f30 url(glossy-background-imageoptim.png) repeat-x;
	text-align: center;
}
div.glossybg h2 b
{
	display: block;
	background: url(glossy-background-imageoptim.png) top right; /* Tricky bit! */
	background-color: #f30;
	padding-right: 12px;
	font-weight: normal;
}
div.glossybg h2.cold, div.glossybg h2.cold b
{
	background-color: #0066b3;
}
div.glossybg p
{
	border: 2px solid #ccc;
	border-width: 0 2px 2px;
	margin: 0;
	padding: 10px;
}
</style>

<div class="glossybg">
<h2><b>A Red Header</b></h2>
<p>Some text inside the skinny box.</p>
</div>
<div class="glossybg wide">
<h2 class="cold"><b>A Blue Header</b></h2>
<p>Some text inside the fat box.</p>
</div>

A Red Header

Some text inside the skinny box.

A Blue Header

Some text inside the fat box.

Notice the tricky bit of CSS indicated above. We are layering the image in <b> element of the header to pull off a rounded corner on the right side, allowing us to stretch the image to various widths, a favorite technique of mine.

Transparent Image Overlays

For my final experiment, I will create a banner header with a logo overlay, to demonstrate a more complex application of PNG.

We’re going to create a website banner for a fan site of a well known American politician. I downloaded some free artwork from his campaign website.

For our transparent overlay, I will need to cut him out of his poster and copy and paste him on a black background.

obama cut out

Then, we switch our document to Lab color mode.

lab color mode switch

This gives us a nice Lightness channel which we can use to create our overlay. In the Channels panel, select the Lightness channel, we’ll then make a selection using Command + Click (Windows Ctrl + Click).

select lightness channel and make a selection from it

This selects the light areas of the image, and also includes transparency information. Visually, you will see anything greater than 50% white with a marquee around it. If we wanted the dark pixels, we could simply select the inverse to obtain it.

This is also why we created him on a black background, to maintain the outline (transparent pixels are counted as white).

Now that I have my selection, I am going to switch back to RGB mode, create a new layer, and fill the selection in with white. I disabled the color layer to show the end result.

filled in the selection with white

We now have a layer with white transparency information in the shape of our political figure. Disable the black background, and save it out as Photoshop PNG-24. Export it through Fireworks and ImageOptim as outlined above.

Photoshop PNG-24
16764 bytes
Fireworks PNG-8
4542 bytes (73%)
Fireworks PNG-8 (dithered)
5265 bytes (69%)
Obama Photoshop Png24 Obama Fireworks Png8 Obama Fireworks Png8

ImageOptim was unable to gain any savings, so I didn’t include it. It seems as though ImageOptim doesn’t include a quantizer that will reduce the color palette like PNGQuant and PNGNQ, which is what we really want.

But I think we are finally getting somewhere on the Fireworks front. Our Fireworks PNG-8 was 73% smaller than our original PNG-24, though that banding is back (see his shoulder).

I exported another image out of Fireworks with a 100% dither, and think it looks much better. While a tad larger, I would recommend going with the dithered Fireworks PNG-8 image.

Let’s see how our finished product looks.

And if the boss said to make the background more patriotic, we can do so without affecting our transparent image.

What a catchy campaign slogan!

The Drop Shadow

I almost forgot the drop shadow! Well, I did forget it, I am editing this post just after I published it. Here is how a two color logo faired with a drop shadow.

Photoshop PNG-24

25232 bytes
Fireworks PNG-8

7150 bytes (72%)
Fireworks PNG-8 (dithered)

8615 bytes (66%)
ImageOptim

23255 bytes (8%)
obama logo with photoshop fireworks fireworks dithered fireworks dithered

In this one, my vote is for the Fireworks PNG-8 dithered with a whopping savings of 66% and a decent looking shadow.

Let’s add a gradient to the logo, and see how that looks.

Photoshop PNG-24

42264 bytes
Fireworks PNG-8

11049 bytes (74%)
Fireworks PNG-8 (dithered)

13909 bytes (67%)
obama logo with photoshop fireworks fireworks dithered

At first glance, the dithered version would be my choice. However, if you look close enough, you see some odd dark specks here that just don’t belong. I tried to get rid of them in Fireworks, but my skills there are lacking. In this situation I would probably modify the source image to get the result I wanted. 1/2 point for effort, Fireworks.

PNG8 Graceful Degradation in IE 6

The final thing I’d like to echo with Stoyan and Alex about PNG8, is how gracefully it degrades in IE6.

Ie 6 Vs Ie 7 Png8 Transparency

Notice that all pixels that had transparency applied (the drop shadow) disappear, allowing for a graceful degradation in IE6. For most cases, this will be entirely acceptable and allow us to avoid the performance penalty and CSS hack associated with AlphaImageLoader, the traditional way to enable alpha transparency support in IE 6.

Take a look at how wide your IE6 audience is, and make a call on if it’s worth the design/performance tradeoff to fully support it.

Findings and Conclusions

At the end of the day, the score was +1 for Photoshop PNG-24, +1 for ImageOptim, and +2.5 for Fireworks PNG-8 (dithered). Because of Fireworks’ poor performance on the first two scenarios, there is no clear winner.

With my late discovery of Fireworks PNG-8, I went into this article thinking I would have the end all answer for saving out PNGs. If you’ve been reading, you know that it’s not quite so simple. We simply need better tools; preferably, one tool.

My final thought on a designer-friendly transparent PNG workflow:

  1. Save out your transparent PNG out of Photoshop as PNG-24, and take note of the size.
  2. Open the PNG-24 in Fireworks, and export it as PNG-8 with Alpha Transparency (play with the dither option), and take note of the size(s).
  3. Run your Photoshop PNG-24 through ImageOptim, and see if you saved anything.
  4. Make a final decision based on quality, size and longevity (e.g. how long will the image be around, how important is it?).

There seems to be a big gap on the GUI PNG tool side for saving out high quality, low file size PNGs. While command line tools exist, they are not a realistic answer for designers who haven’t ever launched a terminal window, and for developers who don’t have the time or patience to compile source code.

I want to encourage Adobe to look at the available open source PNG tools and get them into Photoshop CS4′s Save For Web, where it belongs.

Until that happens, I am going to have to respectfully disagree with Stoyan and Alex that PNG-8 is the clear winner, as in 2 of the important use cases above, it wasn’t.

Tags: , , , , ,

Bookmark and Share

26 Responses to “PNG Alpha Transparency – No Clear Winner”

Leave a Reply »

  1. Cary howled... July 25th, 2008 at 3:36 pm

    Actually, in my tests, using dither with png-8 avoided banding and worked fine for the graduated, layered text effect you tried.

  2. Jens Wedin notified... July 25th, 2008 at 4:32 pm

    Thanks for the great article (and link). I also came to the same conslusion to use Fireworks to make transparent png files (http://jedisthlm.com/testarea/pnq-quant-vs-firefox/). They look better in my example and are even smaller.

    Cheers.

  3. ArtzStudio posted... July 25th, 2008 at 5:08 pm

    @Cary, I added in the dithered versions and you can still see the banding. The PNG-24 is still smaller in size and full quality, so I would still absolutely go with PNG-24 in this case.

    @Jens, Thanks for reading! I was able to get pngquant to work for Windows under parallels (though it was a headache) and results were similar to what I got with ImageOptim, good looking and smaller than Fireworks was able to produce. I saw your example and noticed Fireworks does look better which is different (as I found in my adventure today, it depends on the image). Also, I didn’t include pngquant and pngnq in the study because of reasons explained above (designers need simple tools, etc.)

    I updated the article to include a logo with drop shadows, and it pushed the scales a bit more in Fireworks favor, however I still can’t give it the nod for all images.

  4. Stoyan shouted... July 26th, 2008 at 2:39 pm

    Of course, when you mix politics and images, the results will most naturally be skewed :) Just kidding, thanks for the useful article.

    PNG8 is not a one-size-firs-all total replacement to truecolor PNG and you somehow managed to pick not so appropriate examples :) I think of PNG8 as an improved GIF. It can do anything that GIF does plus alpha in supporting browsers. In IE6, PNG8 is exactly like GIF. So the best use case is:
    1. create an image as if you’re creating a GIF
    2. progressively enhance it selectively adding alpha pixels
    This way images look beautiful in FF, Safari and in IE6 they degrade nicely as if step 2 was never performed.

    Rounded corners are a perfect example: do mountain tops and then add selected alpha pixels to make it absolutely fabulous. There’s a video here: http://developer.yahoo.net/blogs/theater/archives/2008/07/already_getting_a_yslow_a.html where my teammate Nicole explains this better than I could.

    Basically when you can live without the alpha, PNG8 is right for you. In your example #1 this is not the case, as all pixels have alpha, so the PNG8 version is simply not displayed at all in IE6. BTW, in your example you also need _background: none to zap the background, otherwise it shines through in IE6 and the effect is lost.

    Another example when PNG8 can’t work is if you check http://entertainment.yahoo.com, there are music videos and a “play” image on top of the thumbs. This image cannot be a PNG8 because pretty much all pixels have alpha, very much like your Obama example.

    The other point is that alphaimageloader is a serious perf penalty and PNG8 lets you avoid it. Often it’s even better to sacrifice quality in IE6 but avoid the AlphaImageLoader. For example yahoo search switched their truecolor PNG sprite to a PNG8 and saved 100ms for IE6 users!

    So in conclusion:
    - PNG8 is not the answer in all cases, but
    - PNG8 is smaller (not always, but most times) and allows you do ditch alphaimageloader this way having cleaner CSS and faster rendering
    - PNG8 is better than GIF because it has alpha (PNG8 is not always smaller filesize than GIF, but most of the times)

    For me, this is a winner and well worth trying. It may not work in 100% of the cases, but it works so well that sometimes it’s better to change the case :)

  5. phpied.com » Blog Archive » When PNG8 is not the right choice twisted... July 26th, 2008 at 2:56 pm

    [...] Artz has a nice post about PNG8 and alpha transparency, my extensive comments on his article are awaiting moderation right [...]

  6. ArtzStudio wrote... July 26th, 2008 at 4:10 pm

    Thanks for the nice reply and the links, Stoyan. I tried to pick examples that I think are good real-world uses of transparent PNG, the Yahoo! Entertainment link is another one, thanks again.

    I’d be happy to post other examples to keep running up the score for Fireworks but wouldn’t want Adobe to rest on their laurels. After this whole exercise, I just felt such a wonderful format still hasn’t been done justice by the current software toolset.

    Maybe you and I could collaborate on an online PNG optimizer, what say you? :)

    Oh, and you caught me, my attempts to support IE6 were half-assed at best. I didn’t want to eat up my memory by loading up Parallels again. I’ll fix that some day, but thanks.

    BTW – do you have data showing AlphaImageLoader is slow?

  7. Stoyan stated... July 27th, 2008 at 10:18 pm

    PNG Optimizer you say, I have already started an image optimizer tool based on my talk, I’ll keep you posted, will need help at least with the hosting, these image operations do eat up CPU. Another idea based on your post is a cross-OS PNG optimizer GUI, there are some or WIndows, but as you say nothing much for Mac. I see that designers are not really into the command-line, my wrong train of thoughts has always been designer = OSX, OSX = unix, unix = command line, therefore designer = command line.

    I also find that PNG8 is virtually unknown, so I’m happy you’d love my movement under the motto: “All we are saying is: Give PiNG a chance” :)

    I have some lab data about the badness of AlphaImageLoader and I’m working on a detailed article for the YUIblog, will keep you posted. But more interesting is the real life data: Yahoo Search results page (example) used to have a sprite that used alphaimageloader. When they switched to a PNG8 they saved on average 100ms for IE users. 100ms is not much (although it’s much for them since they are compared with you know who :D and aim at 1s loading) but it’s 1% of the sales according to amazon.com experiments. 1% more sales by just switching an image is a pretty good deal I think. The pain with alphaimageloader also is that it eats memory for every element it’s applied to. So if you use the same image as background for two divs, the alpha manipulation is done twice.

  8. Mark Priestap proclaimed... July 28th, 2008 at 7:30 am

    Thanks for the helpful article Dave! I am definitely wiser now on the subject having read it.

  9. Ephra stuttered... August 6th, 2008 at 1:18 am

    I tried all the tools availbale.
    I got the best result concerning png-24, running first (in mac) PNGcrusher or PING and then in parallels PNGoutwin.

  10. ArtzStudio blurted... August 7th, 2008 at 8:38 am

    ImageOptim (mentioned in the article) actually uses OptiPNG, the same program PNGCrusher uses. I chose ImageOptim because it also includes AdvPNG and PNGCrush and the UI was nicer (shows savings).

  11. Ephra twisted... August 8th, 2008 at 2:06 am

    hi, I dwnldd ImageOptim and tried it out. It gives exactly the same result as PNGcrusher/PngCrrush/Ping.
    But you will get a bit extra shrinking using PNGoutWin after you used ImageOptim/pngcrusher etc.
    By the way: mac’s preview-app. does also a better job in shrinking then PS. When I make an image and save it as png-24 in PS, I then open it in preview and save it again-> It reduses the size quite some bytes. From there I go using the pngcrusher en then finally the pngoutwin.
    cheers

  12. BrightLoudNoise proclaimed... August 26th, 2008 at 1:22 pm

    The ImageOptim site is in polish, google translate does an acceptable job of translating it though

    http://pornel.net/imageoptim (Translated)

  13. Ingo Chao barked... September 5th, 2008 at 12:54 pm

    From IE6′s perspective, an indexed-colour-PNG with transparency [1, 2] is not a clear winner. A clear winner would not need a special image (a bulb with a transparent glow) to get an acceptable result in IE6 (a bulb without a glow [3]).
    A little more use of alpha breaks in IE6, since any transparency becomes fully transparent. Not good if that semi-transparent part of the image carries something important. “Basically when you can live without the alpha, PNG8 is right for you” (from Stoyan’s comment #4). Right.
    I think the trick with PNG8 in Fireworks was published in 2004 [4] (and meanwhile, you could use PNGNQ, too), but it never got the status of an all-purpose solution. Agreed, it is a solution in some cases whenever a GIF would do for IE6. For complex alpha-PNG, only filters could do the job, but proprietary filters are per se disgraceful.
    Beginners ask for a winning solution (or at least a script that takes all what is need to insert a proprietary filter — that’s the reason why there are so many scripts out there that do all the same).

    We should start answering that there is no good, not even a graceful solution for IE6.

    [1] http://www.w3.org/TR/PNG/#6Colour-values
    [2] http://www.w3.org/TR/PNG/#11tRNS
    [3] http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
    [4] http://www.kevinfreitas.net/pro/articles/png-magic/

  14. kL reported... September 15th, 2008 at 11:52 am

    You can optimize 8-bit alpha images (from Fireworks) in ImageOptim – they should be shrinked even further.

    If you download PNGOUT for OS X, you can use ImageOptim for it. It should have results comparable with PngOutWin then.

  15. Westworld » Blog Archive » smaller images twisted... October 3rd, 2008 at 5:00 am

    [...] gif was for logos, use png-8 instead (sidenote) [...]

  16. westworld | smaller images stated... October 11th, 2008 at 5:49 am

    [...] gif was for logos, use png-8 instead (sidenote) [...]

  17. Mark Kawakami squawked... December 5th, 2008 at 1:48 pm

    Yeah, I’ve come to the same conclusion. Like it or not, there’s simply no great tool for optimizing PNGs on OS X. Photoshop, even the latest version, is way behind the times. I think Adobe no longer considers web developers creating production ready graphics to be one of PS’s target audiences. As such, I spend most of my time working with images in Fireworks, but the more I use it, the more I realize that it’s a buggy program that isn’t getting the love it needs (it came over from Macromedia). I’m using the CS3 version, and that has a whole lot of weird tricks and caveats you have to know in order to be able to use it, to the degree that I can’t actually explain to my co-workers exactly how to use it beyond the basics.

    Fireworks CS4, unfortunately, doesn’t appear to have gotten much love in this area. I haven’t tried it out yet, but no where on Adobe’s site do they talk about any improvements to the image optimization portion of FW. In fact, they seem to be positioning FW as a tool to help comp entire web pages or Flash interfaces, rather than a tool for creating production-ready graphics. Lame.

    I have no idea why Adobe thinks image optimization isn’t what their tools are supposed to do anymore, but they’re wrong. The amount of time I spend optimizing is huge and largely because the tools are lacking.

  18. Henry Ho shouted... January 2nd, 2009 at 8:15 pm

    Any tool other than Fireworks that does alpha transparency for PNG8?

  19. kkLL shouted... January 26th, 2009 at 10:38 am

    There’s an improved pngnq/pngquant, that could do much better job than Fireworks:
    http://pornel.net/pngnq

  20. brandon touted... April 30th, 2009 at 12:27 pm

    Stoyan mentioned the follow
    “Another example when PNG8 can’t work is if you check http://entertainment.yahoo.com, there are music videos and a “play” image on top of the thumbs.”
    This is not exactly true … there is a fairly decent workaround to this.
    Instead of creating a transparent image you can utilize css transparency.
    Example:
    yahoo movies indie film guide: (http://indiefilm.movies.yahoo.com/)
    mousing over the movie trailers displays a transparent play icon
    another example is in there photo page by mousing over the image a transparent arrow is displayed
    both of these images are in the png 8 sprite: (http://l.yimg.com/a/i/us/movies/ifg_sprite_4.png)

  21. Derek posted... June 26th, 2009 at 3:17 am

    The text for ImageOptim is in Polish.

    Roughly (my Polish is quite basic)

    ImageOptim is a graphics utility (GUI) for applying image optimisation
    to graphics in PNG and JPEG format.

    You get these tools : AdvPNG from AdvanceComp; etc, and optional PNGOUT

    The PNGOUT utility [unsure here] hasn’t been ported to OS X since the PNGOUT licence terms don’t allow this.

    You could easily obtain a better translation, but using the tool is probably easier.

  22. Dan Walker warned... August 15th, 2009 at 8:29 am

    The problem with banding in Fireworks PNG8 is due to the way FW renders colors with transparency. PNG8-exact will render up to 256 colors which eliminates banding in many images, but there is no alpha transparency. PNG8-Adaptive renders alpha transparency, but for some odd reason greatly reduces the number of colors in the image, generally producing banding. Here’s the undocumented technique to use up to 256 colors with alpha transparency in Fireworks CS4.
    1. Build your color table with PNG8-Exact
    2. Select all the colors in the table and lock them.
    3. Rebuild your color table with PNG8-Adaptive-Alpha transparency.
    4. The alpha transparency colors are added to the exact colors in the table and produce a high quality PNG8 with alpha transparency. Of course if you still get banding with 256 colors, you’ll have to go to a PNG32.

  23. buy nintendo dsi r4 proclaimed... January 23rd, 2010 at 9:21 am

    The fact that Fireworks can export PNGs in so smart a way is one of the reasons I enjoy this program so much in my daily design life. Sometimes I pick up another approach: I create a PNG32 alpha image for all browsers, and serve to IE6 a simple GIF+index transparency. This works, too. So it depends on the specific task at hand. There are a lot of ways to “trick” IE6 to support Alpha transparency in PNG files, but none of them is 100% bullet-proof. So I prefer to serve to IE6 normal PNGs or GIFs or JPGs. I think also that it’s time for IE6 users to make the switch.

  24. Aleksey Kirichenko tipped... February 9th, 2010 at 9:12 am

    The English version of ImageOptim: http://imageoptim.pornel.net/

  25. lastactionseo exacted... September 25th, 2010 at 5:31 am

    Wow, thank you for that awesome tutorial! Nice comparison of image types.

    Regards
    lastactionseo

  26. Marco77 posted... May 28th, 2011 at 4:22 am

    The appropriate GUI for the pngquant (NeuQuant) /pngnq (Median Cut) color reduction programs is ImageAplha: http://pornel.net/imagealpha

    As pointed out previously, ImageOptim is a crunch-type (lossless) tool to compress the IDAT section(s) of PNG further and strip out some non-mandatory bits, not a tool to convert to PNG8.

Leave a Reply

Please index me, experiment!

“I am the gatekeeper to my own destiny and I will have my glory day in the hot sun.” — Nacho