Maverick Web Creations » Portable Network Graphics http://www.maverickwebcreations.com Fri, 03 Feb 2012 05:37:11 +0000 en hourly 1 The Power of Transparent PNG Logos http://www.maverickwebcreations.com/2008/10/27/the-power-of-transparent-png-logos.html http://www.maverickwebcreations.com/2008/10/27/the-power-of-transparent-png-logos.html#comments Mon, 27 Oct 2008 03:23:27 +0000 admin_mwc http://www.maverickwebcreations.com/?p=289 PNG logos are great for backgrounds with more than 1 colour or if your logo is displayed on different backgrounds. They blend in perfectly no matter what you put it over. Here’s an example of transparent PNG logos in action on my web site Oasis Fanatic.

Notice how my … Read more...

]]> PNG logos are great for backgrounds with more than 1 colour or if your logo is displayed on different backgrounds. They blend in perfectly no matter what you put it over. Here’s an example of transparent PNG logos in action on my web site Oasis Fanatic.

Notice how my logo blends in with all the different backgrounds. Before I used this PNG logo technique, I had to create a JPG background image with my logo included in it for all the different sections of my site. Now, I have a PNG logo graphic image over a multiple background images without a logo integrated into it. This saves me a little bit of disk space even though the PNG logo file size is slightly bigger.

Won’t GIF Transparent Logos Work?

JPG and GIF logos just don’t look great if you’re trying to make it look good on all types of backgrounds. There might be a way to make GIF logos look good with transparency but I don’t think it would be worth the trouble when most modern browsers support PNG transparency.

As you can see from the pictures above, the one with the ugly grainy logo text is a GIF logo while the smooth and perfect one is a PNG logo. I could not achieve this look for my internet marketing blog with a GIF logo unless I saved the logo with the background image in 1 file.

Advantages of Transparent PNG Logos

  • Looks great on different backgrounds
  • Most modern browsers like Internet Explorer 7, Safari, Opera 9 and Firefox 2/3 support it
  • PNG colours are nicer

Disadvantages of Transparent PNG Logos

  • File size is larger than GIF and JPG logos of the same quality
  • Does not work on older browsers like Internet Explorer unless you install a fix

How to Display Transparent PNG Logos in Internet Explorer 6

The easiest way I have found to force IE6 to display PNG images correctly is to install this IE 6 PNG Javascript. Just add the following code in between your head tags like this:

<!--[if lte IE 6]><script type="text/javascript" src="pngfix.js"></script><![endif]-->

Non-internet explorer browsers will ignore the code above. Only IE6 and below will read the file above. This fix isn’t perfect though. You will see a silver background on the transparent areas of your PNG image for a few seconds before it disappears. Furthermore, if you include PNG image files as a background image, this Javascript won’t display the PNG images correctly.

]]> http://www.maverickwebcreations.com/2008/10/27/the-power-of-transparent-png-logos.html/feed 3