"If you can get along with everyone and everyone loves you, then you don't stand for much. A person who stands his ground for his principles and won't compromise his integrity is not loved by everyone."
- Larry Winget

The Power of Transparent PNG Logos

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:

1

<!--[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.

Tagged As: , , , ,

Posted by Vincent on 27 October 2008 3:23 AM in Web Development You can leave a comment, or trackback from your own site. |

Similar Posts

Did You Enjoy This Post?

Subscribe to our blog through our RSS feed or email to receive updates on more posts like this. post on your favourite social networking or media site to let others know about this post. Help us generate more buzz by submitting/voting for this post with the following buttons.

1 Trackback On “The Power of Transparent PNG Logos”

Post a Comment


(Required)


(Required)