/CSS/ Working with PNG
15/04/2009 | Filed under Develop > CSS
Craig Grannell delves into the underused but useful Portable Network Graphics format, showing you how it can bring flexibility and visual impact to your websites
PNG comes in two flavours, 8-bit and 24-bit. In a broad sense, these mirror the capabilities of GIF and JPEG, although a typical 24-bit PNG is weightier than the equivalent JPEG. However, PNG does offer something for design purposes that the other two formats don’t: alpha transparency.
The closest traditional web image formats come to transparency is in making specific colours within GIFs transparent. But unless your images are heavily pixellated or have very straight edges, such transparency usually results in a severe case of the jaggies. Also, it’s an all or nothing proposition – you can’t make your transparent colour 50 per cent transparent, for example.
With PNG, these problems vanish. Therefore, you can create elaborate gradients and transparencies in the likes of Illustrator and Photoshop, and export them to the web intact, adding visual clout to your designs.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Favourite reggae song No idea, music began in 1976 for me
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Alex Peterson / 28/04/2009 / 11:49 / http://www.pixel-air.co.uk
I noticed recently on Smashing magazine that transparent PNGs are an upcoming trend of 2009, even though they've been around for a while. I implemented a transparent background on the menu of my own site quite a while back but am definately looking to do more with them on future projects. As with most of these techniques it's entirely open to your own creativeness making the potential huge.
(Remeber to implement the IE javascript fix.)
dave perry / 29/04/2009 / 14:57
Have not managed to find a way to do png backgrounds that work in IE6.
PNG's are great for shadowed boxes.
Dave C / 01/05/2009 / 09:13
I have used PNG's a fair bit an really like the transparent effects. ie6 is (as ever) the problem though. I developed a nice site using png's only to discover that the client ran win2000 and was stuck on ie6 D'oh
wish i'd known about the javascript fix I'lll try it......
Switcher / 04/05/2009 / 09:51 / http://soswitcher.blogspot.com
I've been working with Inkscape 0.46 for about a year now, I love the transparency of the .png
Darron Barnes / 05/05/2009 / 18:26
I have a small little project I'm working on and will implement a bit of PNG transparency into it now after reading this, thanks .net and Craig. Keep up the great work. ;-)
Joe Turner / 13/05/2009 / 11:56 / http://www.waa.co.uk
If you need to use PNGs for backgrounds, I recommend a jquery pngfix for IE6
http://jquery.andreaseberhard.de/pngFix/
James Godwin / 08/06/2009 / 06:31 / http://www.creativresponse.com
I would much prefer to use png's but I still hold reservations until ie6 goes away, I know that there are work around hacks but if javascript is disabled then it renders useless.
Pete Campbell / 29/06/2009 / 09:01 / http://www.crearedesign.co.uk
There's no denial that using .PNG's that support transparency makes life easier for a Web Designer, but the point here about old browsers dieing hard is certainly correct. I wouldn't deny using javascript workarounds though due to fear of incompatibility, not everybody has flash and most websites seem to survive!
Regardless, I think they're are some fantastic fips on forcing .PNG transparency within IE6 here.
Oliver Web Design / 08/07/2010 / 17:29 / http://www.webdesign-gm.co.uk
I try not to use PNGs in my websites if I can avoid them but if I need to I make sure that I find a valid PNG fix so that they display correctly in all browsers. So far I have only found one valid PNG fix and that is Unit PNG Fix.
