PNG, A Rising Star?

 

 

One of the lesser used image formats in the past, PNG – Portable Network Graphics is starting to emerge as a leading player in Web design and Internet usage. PNG is a bitmapped image format that employs lossless data compression similar to a GIF file in that file size may be reduced without degrading visual quality. PNG was created to improve upon and replace the GIF format, as an image file format, not requiring a patent license. Because of the absence of patent and licensing issues, PNG is becoming the preferred format for software developers and web designers who prefer open standards.

• PNG offers true color (up to 48 bits), which is a big advantage over GIF which only allows 256 color palettes. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK). PNG works very well for geometric or line drawings, lettering, cartoons, and other images with flat color and sharp borders, such as computer screenshots.
• PNG is mostly superior to GIF, as it is newer, supports more colors, and is free of patent restrictions. Unfortunately, PNG cannot be used for animation (yet). However, it does offer highly sophisticated transparency and color support, among other features. By enabling an alpha channel, PNG allows for almost unlimited transparency.
• When PNG files are properly optimized and compressed, PNG files are generally 10-50% smaller than GIF files for the same image.

The transparency ability of PNG is by far its most exploited and popular feature at the moment. Because of PNG’s superiority in color, it is fast becoming the file format of choice for many web designers. Digital-Web.com has a great article that goes more in-depth about the creative use of PNG for transparency.

While the initial reason for PNG’s creation was to offer an open source alternative to GIF, it is also competitive with other image file formats too. In comparing PNG to JPEG, strengths and weaknesses will be revealed for both file formats. 

• JPEG produces a smaller file than PNG for photographs and photo-type images. In many cases, the PNG file may be 5-10 times larger than the PNG.
• PNG is a better format for storing images that may require future editing though due to its lossless format. JPEG files suffer from generation loss. However, PNG does not allow for embedding Exif image data from sources such as digital cameras. This makes it difficult to use for amateur and professional photographers. Unfortunately for PNG, TIFF does support it as a lossless format (and creates smaller files than PNG) and is probably a better choice for this role. The general routine is to save it as a TIFF, edit the file and then save it again as a JPEG when the file is ready to be distributed again.
• PNG does win out over JPEG when the user needs to store images containing text, line art, or other designs with sharp transitions. A dilemma arises though when an image contains both sharp transitions and photographic parts ¬— deal with a large, but sharp PNG file or JPEG file that will create a less than stellar visual impact.
• JPEG is not able to support transparency. PNG excels in transparency.
• Traditionally, JPEG was the file format of choice for images such as gradients because it could handle depth of color much better than GIF. The down side of JPEG for gradients though has always been its inability to handle compression, which causes gradients to appear blurry. PNG has again excelled in this particular niche due to its larger color palette. A 24-bit PNG gradient file generally comes out identical to the source image and results in a smaller file size too. PNG has become the optimal choice for exporting gradients, particularly for usage on the Internet.

The largest hurdle that PNG has to overcome at the moment is the overall lack of browser support for Internet Explorer in particular. Anything below IE6 will not support the use of PNG. Unfortunately for web designers, Internet Explorer is the most widely used browser on the planet.

• PNG is fully usable in all versions of Safari and Firefox.
• PNG works great on Opera and Netscape, versions 6 and higher.

But, the good news is that IE7 comes with full support for PNG. As we continue to get further away from older versions of Internet Explorer, PNG will become much more prevalent in web usage everywhere. For now, there are several creative ways around older versions of IE’s inability to deal with PNG files. A quick search of the web will yield several creative techniques created by some talented designers.

So, as the world of web design continues to evolve, pay attention to the benefits of using PNG over older, traditional image file formats. PNG is just starting to find its niche in many different areas of the digital realm and the web.

Please share with us if you’ve used the PNG format and why you chose to use it instead of the more main stream formats like JPEG and GIF.

Sources used:
http://www.informit.com/articles/article.aspx?p=23959&seqNum=4
http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/

You Might Also Like:

• GIF, JPG or PNG, Do You Know the Difference?
• Optimizing You JPEG Formats
• Thumb Image Styling
• Awesome Dark, Red & Black Design
• Using a mascot to build a brand