I posted this over at RocketTheme so I could just as well add it here. 

PNG and transparency and Internet Exporer.

The PNG file format is the "new" web format introduced some years ago and is ment to battle with the "good" old GIF format. Some of the new and better features with the PNG format is better looking compressed files and true alpha transparancy. The PNG format also have a "normal" 8bit transparent function muck like the gif format, but it is the alpha transparency that is casuing some people problems.

Most modern browsers support alpha transparency, but one browser is having problems.... Internet Explorer. The result is a grey/blue'ish border around the image where it normal should be transparent.

There are some workaround for this. For Joomla you can look at the extensions over at www.joomla.org and find something regarding png fix. My favorite is called "Correct PNG" and you can find it here. With this plug-in installed Joomla will search for alpha transparent png files and change 'em on the fly.

The above problem is only present in IE 6+ and below. The new version 7 should have taken care of the problem (about time if you ask me).

PNG and odd colours and Photoshop.

Eventhough PNG is nice, the gamma of the file format is controlled in another way compared to other file formats. This can cause problems if the program is not handling the gamma in the right way (Photoshop for instance). The problem is that the standard hex colours are not presented the right way and if you want to have an image alligned with a CSS styled background, you will clearly see a change in gamma/colour and not get a perfect blend.

You can read a lot more about this on the following links:

http://hsivonen.iki.fi/png-gamma/

http://www.evolt.org/article/To_PNG_or_not_to_PNG/22/60134/index.html

And for general PNG info have a look at Wikipedia.

I found a plug-in for Photoshop that gives you the option of saving files as "Super PNG" instead of normal PNG and it did help on the files I tested. The plug-in is free and can be found here:

http://www.fnordware.com/superpng/

It's important to use the normal "save as" instead of "save for web" when using this plug-in as it is the only way to save as "super-png" - but it seems to work.

Did you enjoy this article? Please bookmark it onto:

Comments (0)

Subscribe to this comment's feed

Show/Hide comments

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment