Misconception about PNGs ?

What all this PNG all about?

Portable Network Graphics (ping), shortly known as PNG is an image type like every other image types. Mainly it was found and developed as a replacement for GIF format, which had some designing issue and for some other legal stuff, which is kind of complicated.

With this great tool designers can almost able to create new unique designs for their website, other that sitting inside the boring looking layout, with a big banner and a menu underneath and so on. Its like breaking the ground rules of the web designing industry with by introducing the PNG file, until getting into misconception because the old technology.

What’s the different between other images types?

This PNG tool gives us a wide range of features than the old formats.

• Color depth
  The new image breed has some awesome good quality comparing to the other images.
• File size
  As I mentioned above, it gives some good quality image for a normal size JPG file size.
• Alpha-channel transparency
  PNG supports ultimate transparency and fully opaque like you have seen in your favorite image editing software.

It is also Ideal file to create logos, vectors with PNG so it be more quality and clear.

If we look closely the transparent compatibility of a PNG is more effective than the old GIF formats. For an example, if we take a box with a shadow, slice it and preview in Mozilla Firefox, GIF formats wont show them the way it was. But in PNG every detail you saw in the scratch can be seen in your site.

Misconceptions about PNG?

Everything went well, but not quiet. There are limitations in these PNG working with older browsers like IE 6 and Netscape because they are not up to date as the web industry get more complex. So is there any special superpower in these PNGs ?

PNG file type contains a filter called Alpha-channel transparency which contains all the unique details like transparency and opaque. Since the older browsers haven’t updated recently, they don’t recognize what all this PNGs and it features all about. Even though some browsers like IE6 has a filter that overcome with this problem, called AlphaImageLoader, but it wont support the PNGs images at all. So the browsers just show them as normal image and convert the transparency area with a blueish looking green color.

And this is where all starts. Since most of the developing countries people still uses Windows XP , where the default browser will be IE6. And developers has no time to go through this problem or they will end up with nothing at the end and they still stick with their old way, using GIF images, even if they gets more heavier as they get more quality. And that’s why the GIFs are still keeping running on.

But thanks to some of the brave developers, they have came with some solutions, which can solve this headache. Some of them developed JavaScript’s and attached to the file which includes the PNG files. Or add some special styles and put them between conditional comments so they will be only detect by the IE6.

Bad solution

As a result, Microsoft came up with a solution. By defining AlphaImageLoader filter from CSS to solve the problem.

Example

But things didn’t go very well, as they came up with some list of pitfalls of it.

• Links become unclickable
  After applying this link to PNGs, it will become unclickable in IE6. So u wont be able put any anchor tags to the images.
• Consumes more resources
  The filter may take some times to render the PNG file and consumes a load for resources, which will end up crashing the browser in most of low performance PCs.
• Background CSS style may not work
  CSS rules like background-repeat, background-position may not work with this.

50:50 Solutions

But the good news is some of the other developers also came with some great way to dodge this bullet, with some minor pitfalls of it.

Faux Transparency on the Web
In this way, the developer hasn’t involved the transparency option in this. The main thing that they have done is, to use a solid, normal JPG image and place it where you wanted. For a example, if a nice logo overflow on top the navigation bar, the developer slice it with the navigation part and place where u wanted.

As a disadvantage, the same images take the same time to load and it will take a lot of time to load the whole website if you have used it along the page. And if u want to change the navigation bar position or remove the navigation bar, you have to go all the way back to scratch so slice the images again.

The example you going to see is a menu on a css background image. And move a little and see what will happen

Example

Using SuperSleight JavaScript
This also a great way to overcome this crisis. The only thing u have to do is to attach the javascript within conditional comments, to the page you are working on, , only to effect on IE6 browser. The script will detect and re-lay the PNG transparency with the existing 1 by 1 GIF file by using AlphaImageLoaded.
The only pitfall this has is that if the user who doesn’t have javascript or javascript disabled, he has to face into some ugly design errors.

The above example done by PNG before adding the script.It may display with errors in IE6

Example | Download

IE PNG Alpha Fix
The Twinhelix developers came up with a solution, by using a file type called .htc , replacing the transparency with the 1 x1 pixel GIF image.

But as you know the behavior is not a valid CSS declaration. Even though its commented inside conditional comments so it will be only read by IE6.

Example | Download

Conclusion

PNG is break through for the web design industry. It has just given the chance to designers and developers to create more creative and unique design than before. Sadly some old browsers are not compatible of supporting this tool. But still ,it’s a great challenge for the developer to find solution for this headache that will be helpful in the future development.