Published
on
August 22, 2008
| 2,356 views
| 0 followers
members are following updates on this item.
|
The Return of the PNG!
PNG is an extensible file format for the lossless, portable, well-compressed storage of raster images.
Article by Gary Larocque
Article by Gary Larocque
Browser compatability is a huge issue with the masses who strivefor " WebStandards", especially when we you hear css and xhtml.
Something we tend to over look is the benefit of various graphicformats, expecially my favorite, PNG (PortableNetwork Graphics).
The w3c definesthe 1996 approved mime type as png and describeswhat it is as follows:
PNG is an extensible file format for the lossless, portable, andwell-compressed storage of raster images. PNG provides apatent-free replacement for GIF and can also replace many commonuses of TIFF. Indexed-color, grayscale, and truecolor images aresupported. Plus an optional alpha channel for transparency. Sampledepths range from 1 to 16 bits per component (up to 48bit imagesfor RGB, or 64bit for RGBA).
Due to the poor support for in IE6 (Internet Explorer 6), mostweb designers avoid "pngs" and try to get the risk takers to jointheir safety first band wagon (you know who you are). The sense ofsafety they feel is enough to convince them that the benefits ofthis wonderful file type are not worth investigating. However,since the release of IE7 we now see the impending demise of IE6.Hopefully soon we will see a huge comeback for png's.
For the png fans out there, take solace in " The Return of the PNG"
Thanks to plixid.com for the inspiration.
Viewed 2,355 times
Page Options
1 Comment
Comment by Ian Ring:
PNG is a really nice format to use while roughing in the designand CSS of a site. First, chop up your layout into 64-bit losslessPNG images, and build your CSS and HTML so everything lookspixel-perfect. The page size will be huge, but that's not animmediate concern. When all the design work is done, you'lloptimize all those sliced up PNGs - some will be converted to JPG,others may become a smaller 32-bit or 16-bit PNG, or GIF -depending on its palette, transparency needs, etc. Some may even bediscarded entirely, visually replaced by CSS techniques.
There are techniques using PNG that, if used intelligently, willsave bandwidth - potentially lots of it! For instance, you canreuse PNG opaque-to-transparent gradients layering them over solidcolors, to produce color gradients. If your design uses a lot ofgradients as backgrounds with complex foregrounds, using PNGlayering will prevent the use of images with large blocks ofgradated colors (which are normally can not be compressed verywell) behind foreground elements (which can be placed over thegradient as a separate layer, potentially with a much smallerpalette size and antialiased transparency).
Images that are going to be shown over different backgroundcolors are a perfect fit for PNG. If you employ antialiasing in thealpha channel, your icon will never have that "jagged whitehalo"
The only true advantage of PNG is its alpha channel. I'm all forusing PNG where it's appropriate, but alas designers who use PNGcompulsively can get lazy about optimization (speaking frompersonal experience) and end up with huge 64-bit images consumingbandwidth where 64-bit images aren't needed. Using PNG is likecooking with salt. Use it sparingly where it's needed to enhance aflavour, but don't put it on everything. Some people put salt oneverything. Yuck!
GIF has transparency too - selected pixels can be colored"see-through". In contrast, PNG can do has partial opacity - anypixel can be colored and semi-transparent. Adding an alpha(opacity) channel theoretically increases the file size by 1/3(increasing from 3 channels to 4 is an increase of 33%). Chooseyour compression format conservatively - do you need opacity, or doyou only need transparency?