So your an avid web developer and incredibly excited to start using your newly acquired
professional icons
from VirtualLNK. You quickly learn of IE 6's lack of png support and that you're
going to need to use GIF icons to ensure compatibility on all browsers. Yikes! Ok,
so we don't 'endorse' GIF icons, although we do provide them. This is partly due
to the format's lack of support for alpha transparency, mostly because it requires
the use of a colored matte.
My first recommendation would be to use one of the PNG solutions we have listed
in our icon knowledgebase. They can and will work in IE 6 with a little extra effort
and a tid bit of javascript. If this is not an option for you, continue reading
because I am going to show you how to get the most out of GIF and ensure your web
applications are looking clean and professional.
If you happen to be in the majority and are using a light color background, you
may quickly conclude that you're able to use the GIFs we provide with no additional
work. If your using a dark background, the limitations of GIF quickly become apparent.
You may be noticing white pixels around the edges of the icons. This is due to the
contrast created between the light colored matte and the dark colored background.
This problem is
easily resolvable as we will soon discover.
These pixels are (indirectly) a result of GIF's lack of support for alpha transparency.
When converting the image from PNG to GIF, the transparent pixels must be combined
with a color (or matte) in order to convert them to a non-transparent pixel. White
is the standard color used, although this will only blend successfully with light
colored backgrounds. As the background becomes darker, the white pixels contrast
more, making them easily visible.
You may have already guessed the solution to this problem, which is to custom create
your own GIFs based on your website's target background color. You will notice in
the above image that when using a grey matte it blends perfectly with the background.
You can expect the inverse to be true when using a white background, etc. (as shown
below).
So how do I determine the best matte color if I'm using a solid colored background
for my website?
I recommend using the same exact color (i.e.: the hex value of your background)
for your matte.
I'm using a gradient background, so I don't have a specific single background
color. What do you recommend?
I recommend using a neutral color found within the gradient. This would typically
be located in the middle of the gradient.
My users are able to change the background color of our web application. How do
I handle this scenario?
There isn't any easy solutions to this problem. I would recommend one of the following:
- Using a neutral matte that blends well with the available color options.
- Using PNG format which will go with any background color (recommended).
- Toggling the images used based on the selected background color (pain in the keister).
Although GIF icons require a little extra work, they can still produce a professional
result with a little bit of customization.