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
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
- 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,
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.
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
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
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.
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
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.
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."
See, if you use your imagination, you can use PNG for anything. It
can even walk your dog ;-). Thanks Scott!
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."
So, use PSP 7's PNG
optimizer only if you don't mind losing some image quality. Thanks Greg!
PNG can actually support many more colors. Peter J. Acklam wrote to
"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
Greg Roelofs, in a later email, verified this and added:
"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."
Thanks guys! back up
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 , 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."
It looks like MNG has become a serious choice for animators.
Thanks again Greg!