PNG Tips for Cartoonists
by Drake Emko, 
May 12, 2001 (last modified: September 25, 2002)
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 img 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 img 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
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 img can take noticeably longer to save.
Some image editors are better than others
Just because your favorite image editor can save img 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 well1. A reader, John from NYC, wrote in to mention that JASC Paint Shop Pro 7 works great with PNG — it even has a PNG optimizer2. 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 img 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 colors3, 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 img 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.
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 img 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 img 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 support4, 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:
- PNG: The Definitive Guide by Greg Roelofs
- The PNG Home Site
- An Open Letter To All Web Cartoonists by Christopher B. Wright
- Burn All GIFs
Software:
Footnotes:
1 Macromedia Fireworks uses PNG as its native format.
2 JASC Paint Shop Pro 7's PNG optimizer uses lossy compression. Use with care.
3 PNG supports up to 281 trillion colors in theory (48-bit color), but it's overkill for web graphics.
4 MNG is becoming more supported, though still niche compared to GIF or PNG.
Comics that use PNG:
See this list of webcomics that use PNG. You can email Christopher Wright to have yours added.