Image Optimization Part 2: Selecting the Right File Format

November 4, 2008 at 9:16 am by Stoyan Stefanov | In Design, Development, Performance | 22 Comments

Stoyan Stefanov. About the Author: Stoyan Stefanov is a Yahoo! web developer working for the Exceptional Performance team and leading the development of the YSlow performance tool. He also an open-source contributor, conference speaker and technical writer: his latest book is called Object-Oriented JavaScript.

This is part 2 in an ongoing series. You can read the other parts here:

This second installment of the image optimization series talks about file formats and how to chose the right one for the job. We’ll briefly discuss the popular GIF and JPEG formats and then move on to highlighting the rock star, PNG, hopefully helping correct some misconceptions about it.

GIF

GIF is a palette (also called “indexed”) type of image. It contains a palette of indexed colors, up to 256, and for every pixel of the image there is a corresponding color index. The format is no longer subject to patent issues, so you can create GIFs without the risk of going to jail. (For more on the history of the GIF format, click here.)

GIF is a non-lossy format, which means that when you modify the image and save it, you don’t lose quality.

GIF also support animations, which, in the dark Web 1.0 ages, resulted in a plethora of blinking “new” images, rotating @ signs, birds dropping … an email, and other annoyances. In the much more civilized Web 2.0 era, we still have “loading…” animations while we wait for the results of the next Ajax request to update the page, but there are also things like the good old shiny sparkles that people like to put in their social network profiles. Nevertheless, animation support is here if you need it.

GIF also supports transparency, which is a sort of boolean type of transparency. A pixel in a GIF image is either fully transparent or it’s fully opaque.

JPEG

JPEG doesn’t have the 256 colors restriction associated with GIFs; it can contain millions of colors and it has great compression. This makes it suitable for photos and, in fact, most cameras store photos in JPEG format. It’s a lossy format, meaning you lose quality with every edit, so it’s best to store the intermediate results in a different format if you plan to have many edits. There are, however, some operations that can be performed losslessly, such as cropping a part of the image, rotating it or modifying meta information, such as comments stored in the image file.

JPEG doesn’t support transparency.

PNG

PNGs is a non-lossy format that comes in several kinds, but for practical purposes, we can think of PNGs as being of two kinds:

PNG8, and
truecolor PNGs.

PNG8 is a palette image format, just like GIF, and 8 stands for 8 bits, or 2⁸, or 256, the number of palette entries. The terms “PNG8″, “palette PNG” and “indexed PNG” are used interchangeably.

How does PNG8 compare to GIF?

Pros:
- it usually yields a smaller file size
- it supports alpha (variable) transparency
Cons:
- no animation support

The second type of PNGs, truecolor PNGs, can have millions of colors, like JPEG. You can also sometimes come across the names PNG24 or PNG32.

And how does truecolor PNG compare to JPEG? On the pros side, it’s non-lossy and supports alpha transparency, but on the cons side, the file size is bigger. This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn’t matter much, such as taking screeenshots for a help manual or some printed material.

Internet Explorer and PNG transparency

We said that both PNG types support alpha transparency, but there are some browser eccentricities that affect both types and about which you should be aware.

With PNG8, whenever you have semi-transparent pixels they appear as fully transparent in IE (version 6 and lower). This is not ideal but it’s still useful and is the same behavior that you get from a GIF. So by using a PNG8, in the worst case (IE < 7) you get the same user experience as with a GIF, while for other browsers (Firefox, Safari, Opera) you get a better experience. Below is an example that illustrates this, note how in IE6 the semi-transparent light around the bulb is missing (source: SitePoint):

For truecolor PNGs, the situation is a much less attractive compromise. All the semi transparent pixels appear grey in IE prior to version 7 (source: W3C).

IE7 introduces proper native support for alpha transparency in both PNG8 and truecolor PNGs. For earlier IE versions you need to fix the truecolor PNG transparency issue using CSS and an AlphaImageLoader filter, which we’ll discuss in more details in a follow-up article. (Spoiler alert: avoid AlphaImageLoader.)

“All we are saying is: Give PiNG a chance!”

Although PNG8 should be the preferred of the PNGs, because it’s smaller in filesize and degrades well in early IEs without special CSS filters, there are still some use cases for truecolor PNGs:

When the 256 colors of the PNG8 are not enough, you may need a truecolor PNG. This is a case you should try to avoid. On one hand, if you have thousands and thousands of colors, this starts to look like a case where JPEG will be better suited and will give better compression. On the other hand, if the colors are around a thousand or so, you may try to convert this image to a PNG8 and see if it looks acceptable. Very often, the human eye is not sensitive enough to tell the difference between 200 and 1000 colors. That depends on the image, of course; often you can safely remove 1000 colors, but sometimes removing even 2 colors results in an unacceptable image. In any event, try your potential truecolor PNG candidate as PNG8 and as JPEG and see if you like the result in terms of quality and file size.
When most of the image is semi-transparent. If only a small part of the image is semi-transparent, like around rounded corners, the GIF-like degradation of PNG8 is often OK. But if most of the image is translucent (think a PLAY button over a video thumbnail), you might not have a choice but to use the AlphaImageLoader hack.

At the end, let’s summarize what was discussed in this article highlighting that:

JPEG is the format for photos.
GIF is the format for animations.
PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

22 Comments »

RSS feed for comments on this post.

Minor correction: I think you mean 8 BITS, not bytes, in the section describing PNG8.

Comment by Ben — November 4, 2008 #
I’ve found that .png’s gamma correction is one reason to choose .gif over .png if your image has to match a CSS color on the page.

Comment by Jeremy — November 4, 2008 #
I agree. PNG-8 is my preferred image type most of the time, nearly always smaller than a GIF. I wasn’t aware though that it was capable of alpha transparency.

One thing you have to watch out for is cross browser and platform inconsistencies when using PNGs of either variety: A PNG will sometimes look a little darker or lighter than an equivilant GIF or JPEG, for reasons relating to gamma ‘corrections’. My workaround for this is to never put PNGs on top of other image types. Or PNG-8 over PNG-24.

Comment by Pete B — November 4, 2008 #
This was a well-written article and very enlightening. I didn’t know there were two different types of PNG’s. I had always just used GIF files because of IE6’s transparency problems. I didn’t know that using PNG8 could produce the same result on IE6, while making it look better in newer browsers. Thanks!

Comment by Ross Peoples — November 4, 2008 #
hey Pete, yeah, PNG8 transparency is a “best kept secret” :)

The gamma correction problem is easily solved by just stripping the gamma chunk from pngs using pngcrush for example. More in the next article, basically the idea is to use pngcrush to strip most auxiliary chunks – gives you smaller size and no gamma problems.

Comment by Stoyan — November 4, 2008 #
One other thing to consider about PNG files is that some mobile devices, such as my Treo 700P don’t support PNG files in the browser. So, you cut off a group of mobile users.

Comment by Matthew J — November 4, 2008 #
Do note that the latest GIF spec allows you to define more than 256 colors.

Comment by zproxy — November 4, 2008 #
The things you have been writing lately have been really helpful for performing optimizations of my own. Sounds like a plug for smush.it is in the works for your next post perhaps:).

Keep up the great work.

Comment by Ethan Gardner — November 4, 2008 #
Sometimes it makes sense to set even lesser number of colors to reduce size of PNG file.

Real example: I had a 27KB JPEG file which really used like 4-6 colors.
Saved as true-color PNG: 90KB.
Converted to 256-color and saved as PNG8: 36KB.
Converted to 16-color and saved as PNG8: 17KB.

Comment by Nail — November 4, 2008 #
Thanks for the comments everyone!

@Ben – thanks! 8 bits, you’re right.

@Jeremy – yep, that’s why stripping the gamma chunk helps

@Matthew – good point.

@Ethan – ok, by popular demand, will plug smush.it in the next article :)

Comment by Stoyan — November 4, 2008 #
Thanks for the article! I’m totally with you. But in our firm we work with Photoshop CS2 and ImageReady. And Photoshop can’t save PNG-8 with alpha transparency! That really sucks! So i have to save my images in PNG-24, re-open them in Fireworks and save them as PNG-8 with alpha transparency…

Not a really good workflow…

Does anyone know, if PS CS3 supports PNG-8 and alpha transparency?

Comment by Ole — November 5, 2008 #
Hi. Here I post (in spanish) about the png8 alpha and the useful tool PNGOUT

Solución sencilla para utilizar PNG con transparencias en Internet Explorer 6

Comment by Daniel G. Blázquez — November 5, 2008 #
very cool article thanks!

Comment by Robert — November 5, 2008 #
In order to create the degrading png-8’s, you need to use fireworks. However, I found that if you create a png-8 with photoshop and then crush the image with optipng, the degrading alpha layer effect is achieved. You can find optipng on sourceforge.

Comment by Guerric — November 5, 2008 #
When I was working on Photoshop CS1 I had this gamma correction problem. I used PngOptimizer which is a drag&drop window. I think it’s equivalent to PngCrush.

I reckon CS3 produces clean png doesn’t it ?

Great series of articles !

Comment by LC — November 7, 2008 #
Hi Stoyan,
Great time to get this series out as this is a problem im trying to tackle.
I obsereved a thing in firefox 2&3 when you do a about:cache for images being downloaded it shows 2 entries for the same image one in memory and the other in Desk.
For eg. this is the details while you try to access the default homepage in FF2
Disk Details:
Key: http://www.google.co.in/images/firefox/sprite.png
Data size: 9664 bytes
Fetch count: 5
Last modified: 2008-11-08 14:58:24
Expires: 2038-01-18 00:37:43

Memory:
Key: http://www.google.co.in/images/firefox/sprite.png
Data size: 266304 bytes
Fetch count: 6
Last modified: 2008-11-08 14:58:24
Expires: 2038-01-18 00:37:43

If you notice the same image has different footprint.

I started noticing this problem on my site then when i investigated it on other sites it has the same problem. Bcoz of this problem when a sprite which use (size 163kb) is downloaded the memory space shoots upto 72mb as in the above case and this stops other things from being cached.

Any pointers to solve this problem will be very helpful.

Comment by Yogesh — November 8, 2008 #
When a web browser implements PNG gamma is it a bug? This is a serious question. Web pages are documents with no mechanism or vocabulary for gamma, so why would the PNG images within those documents be treated any differently??

Great article!! I think that a web page should still be interesting and attractive if you somehow disable all the images. However I was surprised to learn that the top ten sites have less than 50% image weight. It feels like a lot more! (Maybe 80%?)
I think it is a testament to their having chosen appropriate image optimization techniques. Google for example utilizes CSS sprites for many images. I don’t know how that affects filesize, but I think it does show an awareness of download optimization.

Comment by SneakyWho_am_i — November 9, 2008 #
Thank you! Will there be part three?

Comment by kovshenin — November 10, 2008 #
Stefan, if you’re going to write a followup (as you said) explaining why not to use AlphaImageLoader, I have another reason for you to include. I’ve tried to use it on a large government website, and had to take it out, because it crashes some versions of IE using Citrix terminal server. We got more than one complaint about it. Apparently some versions of the terminal server have a DirectX bug that blows up IE6 when you put the transparency filter in the CSS. But we haven’t tried PNG8–thanks for the tip.

Comment by Mark Johnson — November 20, 2008 #
Great series of articles!

On this one few remarks: PNG supports animation (with the unofficial aPNG http://en.wikipedia.org/wiki/APNG) which works in FF3 and Opera 9.6

I’ve noticed that small images (ie webbugs) are smaller as gif than png
1×1 transparent pixel:
43 bytes as gif 2 colors adaptive
100 bytes as png8 2 colors crunched
73 bytes as png24 crunched

Anyway for those bugs I tend to use base64 inline images (so it spares me an http_request)

Comment by Marin — December 9, 2008 #
Nice article ! i use png-8 from last year, but i know that it support semi-transparent after read this, thank you!

Comment by dexbol — December 24, 2008 #
Guerric’s comment about optipng is great. I have Photoshop and Fireworks, but it is much easier for me to drop to the commandline after generating the 24bit PNGs in Photoshop Save for Web.

Here’s an example using the default settings:

http://www.burney.ws/example/png8/test.htm

Check it out in IE6.

It’s a great solution for simple edges. Doesn’t work with drop shadow types though.

Comment by Paul Burney — April 15, 2009 #

Yahoo! User Interface Blog (YUIBlog)