PNG Tips for Cartoonists

The PNG (Portable Network Graphics) image format was originally designed to replace GIFs. Although it has been an official Internet image type since 1996, its adoption on the Web has been surprisingly slow. This is unfortunate, since PNG possesses a number of advantages over GIF, especially for Web cartoonists.

I wrote this article to encourage cartoonists to start using PNG, and to share some tips on exploiting PNG's strengths. Used correctly, PNG can drastically reduce the file size and download time of one's comics.

Why PNG is Cool

PNG's strengths are well suited for online cartoons:

• It can handle truecolor graphics (millions of different colors), while GIF can only display 256 different colors. Therefore PNG comics can look much more vivid than GIF comics.

• PNG compression is lossless, which means that unlike JPEGs, there is no degradation of image quality when you save a cartoon. You won't see the color "halos" or blotches that mar many JPEG cartoons.

• PNG is an Open Source image format, so you can use it however you want. GIF, on the other hand, uses a patented compression scheme which makes anyone using it subject to legal restrictions. Unisys, the company that owns this patent, can potentially force any GIF-using cartoonist to pay royalties. For a good rant on why cartoonists should use PNG instead of GIF, you can read an essay by Christopher B. Wright, creator of the Help Desk comic. An informative and political look at the issues can also be found at the Burn All GIFs website.

• PNG images compress more efficiently than GIFs. The smaller file size you can achieve with PNG may be the most important reason to switch to this format. Nothing will make you lose readers like having strips that take too long to download. There are several ways to maximize this efficiency, which we'll examine during most of this article.

In short, PNG combines (and improves upon) the best qualities of GIF and JPEG, and can effectively replace GIFs on the Web. So why don't people use it more often? Maybe because of the misconception that modern Web browsers don't support PNG. In fact, all major browsers can currently view PNG. If your readers use IE 4.0 or Netscape 4.04 or greater, they shouldn't have any problems. I've also tested PNG images with several lesser used browsers, such as Opera, Amaya, and Mosaic, and they all work fine.

But enough of why you should use PNG- Here are some tips on how to use it correctly.

Using PNG Effectively

One of the most compelling reasons to switch to PNG is its advanced image compression capability. What many people don't realize is that a PNG graphic can be compressed more or less efficiently depending on several factors. Jen and I accumulated some tips, from our readings and personal experience, for making your PNG file size as small as possible.

PNGs look the same, regardless of the compression level

If you've saved JPEGs using an image editor, you may have chosen a quality setting for your image. The higher the quality level, the better the picture looks, but the bigger the file size. It can be a harrowing decision, choosing the perfect balance between file size and image quality.

Fortunately with PNG, the choice is much easier. The image editor we use, the Gimp, gives you a choice of nine different compression levels. What's interesting is that a PNG will look the same no matter which level you choose. Therefore, you should always save it at maximum compression once you're done editing the image. During the editing process, however, you may want to save it at lower compression, since high compression images can take noticeably longer to save.

Some image editors are better than others

Just because your favorite image editor can save images in PNG, doesn't mean it will do a good job. In particular, Photoshop is notorious for its inefficient handling of PNG files. Jen & I use the Gimp, which does a pretty good job. Likewise, Macromedia Fireworks is reported to handle PNGs well 1. A reader, John from NYC, wrote in to mention that JASC Paint Shop Pro 7 works great with PNG- it even has a PNG optimizer 2. So keep in mind that different applications save PNGs with varying degrees of efficiency. Luckily, you can still get decent compression, regardless of which program you use, as long as you run the image through the utility I describe next...

pngcrush is your friend

A godsend for the PNG user, pngcrush is a command-line utility, written by Glenn Randers-Pehrson, which can greatly reduce a PNG's file size. We run each of our comics through this program before uploading it to the website. Before we started indexing our strips' color palettes, pngcrush typically reduced the file sizes up to 40% (although now that we use a reduced palette, the results are less dramatic).

pngcrush runs on UNIX/Linux, as well as in the DOS shell, for people using Windows. Unfortunately, it doesn't look as if there is a version for MacOS 9 and below (though one reader, Ian, wrote in to verify that pngcrush does compile under MacOS X, which is a Unix variant). Download it here.

Index the PNG to 256 or less colors, if you don't need more

Many people, when comparing PNGs to GIFs, compare a truecolor PNG to a GIF of the same image. In this case, the GIF often results in a smaller file. In order to make the comparison more fair, one should save the PNG as an indexed image, not as a truecolor RGB graphic. Your image editor should have the ability to save images in different color modes (i.e. RGB, indexed, and greyscale).

Since a GIF always uses an 8-bit indexed palette, it can only ever display 256 different colors. A 24-bit truecolor PNG can display up to 16.7 million colors 3, but this capability can be expensive. Using a 256 color palette for your PNG will generally make the image smaller than the equivalent GIF. We had been indexing our cartoons to 256 colors, until our helpful reader John mentioned that we could make them even smaller by indexing them to 128 colors. He was correct- in fact, you can reduce the palette size even more if your cartoon uses fewer colors (down to 2 colors, for B&W strips).

If you remember only one tip on this page, remember this one. Using an indexed palette will probably reduce your cartoon's file size more than any other measure you can take. We've found that size reductions of over 50% are quite common. Do it!

Avoid using interlacing

PNG images have the potential for interlacing, which makes for a pretty cool effect. While your browser downloads the PNG, it shows the image coming into focus before your eyes. You've probably seen GIFs achieve the same effect on the Web. This gives the illusion of a faster load time, since the person has something to look at even before the download is complete.

Unfortunately, interlacing has its price- it will bloat up your PNG file. This is due to the way interlacing saves an image's pixel information- the nice, predictable image data is mixed together in chaotic patterns, which makes the compression algorithm less efficient.

We used to save our comic strips as interlaced PNGs, but when we discovered how much smaller we could make them by unchecking the interlace option (up to 20% size reduction), we decided that a smaller file was more important than a progressive display.

Avoid converting JPEGs to PNG

Converting your GIFs to PNGs is almost always a good idea. You get smaller files in virtually every case, while the image looks the same. Converting a JPEG to PNG is a different matter, though. Due to the way JPEGs do compression, JPEG images often contain PNG-unfriendly color patterns. Instead of continuous colors and sharp edges, a JPEG will contain many patches of subtly varying colors, which PNG's compression algorithm doesn't handle very well. Try to find a non-JPEG version of the image to convert, or just use the JPEG as it is.

Clean up your art

If your cartoon has a lot of eraser marks or pencil smudges, these blemishes can really bloat your PNG file. PNG compression works best with continous blocks of color, and smudges can ruin this consistency. Even thoroughly erasing over your strip may not be enough- the scanner can pick up the faint imperfections that our eyes can't easily see. For our cartoons, Jen makes sure to bucket fill all the areas white before she starts coloring the strip.

Know when not to use PNG

As handy as PNG is, it isn't always the correct image format to use. Photo-realistic images are usually best saved as JPEGs. Conceivably, a cartoon with complex gradients, blurriness, or shading, or one that must use more than 256 colors, may also save better as a JPEG. A good example of this is a sketched comic (like some online mangas I have seen), where the drawing and shading is done in pencil. However, most cartoons tend to have sharp edges, large areas of contiguous color, and nowhere near 256 different colors, making PNG a perfect choice. Experiment to find the best image format for your particular cartoons.

A limitation of PNG (compared to GIF) is that it doesn't handle animation, and it never will. So, if your cartoon involves an animated GIF, it won't work as a PNG file. There is a format called MNG which aims to handle animation in a more advanced manner than GIF. It is a relative newcomer, and does not enjoy nearly the popularity of animated GIFs (yet). However, MNG has been rapidly gaining application support 4, and is definitely worth checking out.

Finally, you might want to be careful if your graphic makes use of image transparency. PNG's transparency is actually more flexible and powerful than GIF's, but unfortunately, this is not yet handled consistently in all browsers and platforms.

References:

1. PNG: The Definitive Guide by Greg Roelofs
2. The PNG Home Site
3. An Open Letter To All Web Cartoonists by Christopher B. Wright
4. Burn All GIFs

Software:

1. The Gimp Homepage
2. The Gimp for Windows
3. pngcrush
4. pngcheck
5. JASC Paint Shop Pro 7
6. Macromedia Fireworks

Footnotes:

1. Scott Thompson of the Macromedia Freehand team wrote me with this interesting bit of trivia:

"You may be interested to know (but probably not) that Macromedia Fireworks actually uses PNG as its native file format. When you save a Fireworks file, you're actually saving a PNG with extensions that Fireworks can read back in to recreate the editing environment."

2. Later, PNG guru Greg Roelofs wrote and informed me that JASC Paint Shop Pro 7's PNG optimizer uses lossy compression.

"It allows you to reduce colors and perhaps adjust other parameters in order to make a smaller file. But even if you do that, it may be worthwhile to run pngcrush on the result for a still smaller file."

3. PNG can actually support many more colors. Peter J. Acklam wrote to me:

"The PNG format allows up to 16 pixels per color component. The PNG format thus allows up to (2^16)^3 = 281,474,976,710,656 or 281 trillion colors."

"It's wildly inappropriate for a cartoon (or almost anything else) to use 48-bit color-- it's massive overkill, and only one consumer graphics card has even 10-bit (x3) DACs."

4. Originally in this article, I had written that MNG was supported by relatively few applications. Upon reading this, Greg Roelofs sent me an email with an update on MNG's status. Apparently MNG has gained more acceptance and stability than I realized:

"MNG is complete as of January [2001], and libmng is quite stable. The list of applications (http://www.libpng.org/pub/mng/mngapps.html) is surprisingly long compared to a year ago, although nowhere near as impressive as PNG's list. Most categories of apps are represented, and in addition to native Mozilla/Netscape6 support, there are a few nice Java applets that do a good job in older browsers."

Comics that use PNG: