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