First off, why use
PNG instead of GIF? Probably the most important reason is that GIF supports a
maximum of 256 colors. The second reason is Unisys has a lockdown on the rights
to LZW compression which the GIF format can, and usually does use. PNG overcomes
the color depth hurdle by providing up to 48Bpp (bits per pixel). Just as
importantly, the PNG format is patent-free and available for use by anyone.
PNG has other
advantages over GIF as well:
-
Alpha Channels: GIF
supports binary transparency, that is a pixel can either be opaque or
transparent. PNG allows full variable transparency with 254 levels of
partial transparency. I should also say that it is also possible to obtain
65,534 levels of transparency, but that is out scope for web graphics.
-
Gamma Correction: This
allows authors the ability to correct the differences in an image that
arrise from being viewed by different monitors. Most notibly is the
difference between PC and Macintosh.
Two Dimensional
Interlacing: Also known as Progressive Scan. While GIF does support this,
PNG allows a better representation of the image to displayed as the data is
transfered.
So we know PNG offers
us plenty of features and flexibility, but how do we use that? It just so
happens GDI+ supports PNG, but there are a few extra steps involved in using it.
Let's start by
creating a Bitmap and Graphics object, and filling it with red:
Bitmap myBitmap = new Bitmap(
100, 100 );
Graphics myGraphics = Graphics.FromImage( myBitmap );
myGraphics.Clear( Color.Red );
This gives us a simple 100x100
red Bitmap. Now lets focus on saving this as a PNG file. You might think, hey I
can just do
myBitmap.Save( "image.png",
ImageFormat.Png );
Obviously this is how you save
most other image types with GDI. However PNG is a special exception. It requires
a seekable stream, such as that offered by System.IO.FileStream. Let's take a
look:
FileStream myFileOut = new FileStream(
"image.png", FileMode.Create );
myBitmap.Save( myFileOut, ImageFormat.Png );
myFileOut.Close();
As you can see, we merely
needed to create a file stream and pass that to the Bitmap Save method.
Stay tuned for part 2 where I
discuss how to use those neat features I mentioned in the beginning of the
article.