The PNG image file format is not new to the web. It originally
developed in the mid-90s as a solution to the shortcomings of the
traditional GIF image file format. However, because early browser
applications offered only spotty support for the PNG's advanced
features, web designers, developers were limited in its use.
One
large hurdle in particular faced by PNG's was Microsoft Internet
Explorer (IE). Far and away the most popular browser, IE offered
particularly poor support for the file format. However, with
the release of IE 7 as well as several JavaScript hacks, this has all
changed, and PNGs are more popular than ever.
But who cares!? And besides being one letter short of my favorite 1972 video game, what makes a PNG so great? Below, are three reasons why PNGs are the best image format since the Polaroid.
They’re See-Through! (Alpha Transparency):
As
compared to the GIF, PNG offers a far less basic form of transparency.
With GIFs, a particular color (or colors) is able to be saved as
transparent, leaving colors either entirely opaque or transparent.
There is no in-between.
PNGs have a distinct advantage in this
area. The PNG file format supports "semi-transparent pixels," meaning a
PNG can be saved with a soft drop shadow and floated over any background. It can be used as a watermark on a textured
or gradiented background. It can even be smoothly faded from fully
opaque to transparent, revealing the web page contents beneath.
Summerour.net
features a logo which demonstrates this function. The homepage layout
called for a logo with a soft drop shadow over a textured background of
architectural sketches that regularly change. Using a GIF or JPG would
be highly impractical, because every time the image changed, the logo’s
background would need to be edited. A PNG, however, is floated over the image with a faded drop shadow, making the task quick, simple and dynamic. PNGs make the look and feel of your page flexible.
They Look Great! (Lossless Compression ):
Every
time a JPEG is saved and compressed, it loses some of the original
file's information and the image quality degrades. The GIF file format
offers lossless compression (so the file can be saved and resaved without losing image quality),
but it only supports a limited 256 color palette, making it useless for
full-color photography and other such complex images.
PNG
offers the best of both worlds. It displays full color photographic
images, like the JPEG, but it also supports a managed color palette,
like the GIF format. While the PNG will typically have a larger file
size than the JPEG for photographic images, it does have a distinct
advantage: its compression is lossless, meaning images never degrade in quality or suffer from "compression artifacting" which affects many JPEG images.
The results are crisper, brighter images that will “pop” on your pages unlike ever before.
They’re Self Optimizing! (Gamma Correction ):
Adjusting
the brightness and contrast of images to look correct on a wide variety
of monitors and operating systems is a common problem facing web
designers. This problem is primarily related to different monitor Gamma settings.
Gamma
is a method monitors use to distribute their luminance evenly across
the display. Unfortunately, different operating systems (in particular
the Mac and Windows) use different Gamma settings. So an image
that is color-corrected for the Macintosh operating system may look too
dark on the Windows operating system and vice-versa.
The PNG
file format offers a solution for this problem. The image can be saved
with built-in Gamma correction, enabling it to anticipate the operating
system's Gamma settings and automatically adjust its brightness and contrast. By using a PNG, designers can simply color-correct the image for their personal operating systems and let the PNG do the rest.This article was co-authored by Mike Bradbury and Mike Harvey. Both are employees of Objectware, Inc, an Atlanta web development and Atlanta web design company with an active branch in Washington DC. Mike Harvey is a graphic designer, with expert knowledge of web design and usability.