GIF
PNG is better than GIF when working with gradient or anti-aliased images with transparent backgrounds
Thursday, September 18th, 2008 | Web Design | 5 Comments
I’ve discovered that the PNG image format is the way to go when you’ve got an image with surrounding gradients or anti-aliased pixels and a background that requires transparency. Say you want to add a drop-shadow to an image with a non-solid background color (i.e. a picture as a background with multiple colors). The usual step is to create a transparent GIF file with the matte color set to the background color. This doesn’t work too well with varying background colors, especially background colors with high contrast to the matte color that’s been set for the image.
Method 1
Background image:
I used my foreground color as my matte color:
Transparent logo image with matte color set to foreground color:
Overlaying the transparent logo image over the background image.
I set the matte color to the green grass color using the eyedropper tool, but as you can see the resulting overlay doesn’t look that great.
So, the solution is to use transparent PNG! The quality of the drop-shadow will still look relatively high (either equal to or better than GIF quality) and it doesn’t matter what the background is; the drop-shadow will always blend into the background.
Method 2
Background image:
Saving the transparent logo as in PNG format:
Overlay the logo over the background, and viola!
So, there’s no longer a need to define a matte color. Game, set, match…no more ugly glows around anti-aliased images.
People ask me, “so what is this good for”? This technique has many uses on web sites but one general purpose to be able to skin your sites with different backgrounds without ever affecting the main elements of the page such as your logo or your navigation images. This saves you a lot of time in not having to update other images on your site as a result of having changed to a different background or theme.