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