PNG
PNG at a glance
- Stands for
- Portable Network Graphics (or "PNG's Not GIF")
- Pronounced
- Ping
- File extension
-
.png - Inventors
- Tom Boutell, Tom Lane, Greg Roelofs, others (see RFC 2083)
- Created
- Version 1.0, 1996; Version 1.1, 1998
- Standards
- World Wide Web Consortium recommendation 1996, RFC 2083 1997
- Colors
- 2-256 (palette mode) or 16,777,215
- Transparency
- Single color 100% transparent (like GIF), variable transparency (256 levels of transparency per pixel)
- Optional Goodies
- 281,474,976,710,655 colors
- Gamma
- Compression
- Lossless - "deflation"
- How it works
- "For each image line, a filter method is chosen which predicts the colour of each pixel based on the colours of previous pixels and subtracts the predicted colour of the pixel from the actual color. An image line filtered in this way is often more compressible than the raw image line would be. On most images, PNG can achieve greater compression than GIF, but some implementations make poor choices of filter methods and therefore produce unnecessarily large PNG files." - Wikipedia
- Links
-
- Wikipedia article on PNG
- PNG home site - Lots of history, demos (how well does your web browser support PNGs?), utilities
- PNG spec - Actually pretty readable.
PNG Is Good For
Wherever you'd use GIF
Just about all the images on this site that aren't JPEGs are PNGs. Even if you don't care about standards, PNGs are usually smaller.
Allows really tiny (e.g., 2-color) pallette
Granted, a 2-color image isn't all that useful, unless you don't have any diagonal lines or curves. But 8-color palettes are very useful, and smaller palettes mean smaller files. GIFs can't even come close to the size reduction you'll get.
Images with variable transparency
Below, you'll see the exact same image on two different backgrounds. "View source" if you don't believe us. The image, a raytraced rendering of Rune S. Johansen's POVRay demo file "No More Chrome Spheres Please!", has variable (sometimes called alpha channel) transparency.
You may have seen people referring to "32-bit color" when they really mean 24-bit color (8 bits for red, 8 for green, and 8 for blue). Well, images with variable transparency really have 32-bit color. Every pixel has 8 bits of red, 8 of green, 8 of blue, and 8 of alpha (transparency).
The image above is that kind of image. The sky is mostly transparent near the top, so more of the background shows through, and it gets less transparent near the horizon, so less of the background shows through.
If you're looking at the images above and scratching your head because the sky looks the same in both pictures, you're probably using Microsoft Internet Explorer for Windows. MSIE for Windows doesn't support variable transparency (though it does support one-color transparency in both PNGs and GIFs). In fact, because of a well known optical illusion, the sky on the image on the light background may even look a little darker than the sky on the other image. Trust us, they're the same.
Modern web browsers like Opera, Mozilla, and Firefox all support variable PNG transparency, so they let the background through.
One of these days, Microsoft will fix MSIE for Windows so that variable transparency works. The reason we're sure of that is that they already did it in Internet Explorer for Mac! They just never bothered to copy it over to MSIE for Windows. Until they catch up with the rest of the world, go ahead and use PNGs with variable transparency, but check them out in Internet Explorer for Windows to make sure they don't look too awful.
Thanks to Curtis Magyar for the layout suggestion. The way we had it before wasn't nearly as clear.
Second best way to archive images
As we explain in our section on "JPEG rot"
the very best way to save an image between work sessions in your
graphics program is in the graphics program's own format. But if
you're using a graphics program that doesn't have a format of its
own, PNG is a fine choice, and it wastes a lot less disk space than
formats like .bmp or TIFF.
PNG Is Bad For
Won't substitute for GIF animation
But that's kind of like saying Opera doesn't support the
<blink> tag. Still, there's no equivalent
to GIF animation in PNG. However (well, you knew we were going
to say that), look at
MNGs. Still
experimental at this writing, but an open standard.
Full color images will probably be bigger than equivalent JPEGs
Not much can be done about that. PNGs weren't designed to be a substitute for JPEGs, and they're not. You're going to get better compression with lossy compression than you will with lossless compression, and that's that. Still, if you've got a photograph that really, truly only has a few colors, try saving it as a PNG and compare file sizes with your JPEG file. You never know.
Tricks with transparency
This applies to GIFs, too, but since people are using PNGs more and more, we're putting it here.
Ring around the image
Has this ever happened to you? You make a lovely transparent PNG or GIF image for your website, and you go along happy as a clam, then one day you change the color of your page and now your little image has a ring around it?
Oops. The problem is, the "in-between" colors are fine for a white background, but not for a black background. If you've got an image like this and you didn't make it yourself, you're pretty much stuck unless you want to go through pixel by pixel. But if you're making the image yourself, you can make it work on any background.
If your graphics program supports layers, here's what you do.
Set your background transparent. Promote your image to a layer of
its own. Save it like that in your graphics program's native file
format. Now flood fill your background layer with a color that's
pretty close to the color your image is going to appear on (e.g.,
the background-color for the
<div> where you're going to put it). Save it
as a transparent PNG (one color transparency) and set the
transparent color to your background color.
If you want to use that image on a different background, just flood fill the background layer with your new color, save it as a transparent PNG just as before and you're done. No more "ring around the image".
Of course, if Microsoft Internet Explorer for Windows supported variable transparency PNG, this would be a perfect application for it. You could use the same PNG image on any background color you wanted, and it would just work. But nooooooo! Anyhow, this is a decent workaround. And save your version with the transparent background layer, because eventually MSIE will catch up with the rest of the world.