.PNG vs .GIF w/ matte color

Working with Transparent Images – .PNG vs .GIF

Advertisement

This post discusses the use of transparent images on the web. The 3 most common image file types — .png, .gif, .jpg — have their pros and cons. But some are definitely more effective for achieving transparency with cross-browser support.

Thanks to Jeffrey Zeldman for teaching me some of the following techniques in his book, Designing with Web Standards. You should buy it. It’s fantastic.

Never use .jpg

For most of us, it’s obvious, but for the sake of being thorough, .jpgs do not support transparency. They will fill your transparent area with a white background.

JPG images are best used with photographs that contain millions of colors. JPGs also get compressed each time they are saved. And with each compression usually comes a loss in quality. For most lines, shapes & gradients containing a limited number of colors (essentially, everything except photographs), JPGs get saved at a larger file size than both .pngs & .gifs.

To check the file size of your image before saving it, Photoshop has a helpful tool.

  • Go to “File” > “Save for web & devices”
  • Click the tab in the top-left corner that says “4-up”
  • Now you can select each of the 4 boxes individually, and change your file type on the right
  • In the bottom-left corner of each box, the file type & file size is displayed
  • Compare file sizes & evaluate the visual end result. Then choose the appropriate file type.
Photoshop Save for Web 4up View
Photoshop “Save for web” using 4-up

 

.png is best for transparent images

PNGs are the way to go. In all modern browsers (Firefox, Safari, Chrome, Opera, IE7 & IE8), .pngs share excellent support. The transparency of the image is retained, and the desired look is achieved. PNGs also come with a smaller file size.

IE6 does not support transparent .pngs

If a user views your transparent .png using IE6, they will see a blueish/gray fill where the transparency is supposed to be. There are a few ways around this.

Microsoft’s proprietary css filter, AlphaImageLoader

Basically, you apply a css rule to the element that you want the transparent .png background image to show up for.

#content div { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="imagename.png", sizingMethod="image"); }

Official link from Microsoft about AlphaImageLoader »

The problems with using this method:

  • It is invalid css
  • It bulks up your code
  • You have to apply it to each element you want IE6 to support .png transparency for
  • Since we set background: none;, other background properties like background-position and background-repeat no longer work

JavaScript library, DD_belatedPNG

This JavaScript library converts the .png images into VML objects, displays them correctly in IE6, and allows for all background css properties to be used. It’s setup is a little more involved than the AlphaImageLoader, but much more efficient. To learn how to implement this method, please reference the DD_belatedPNG site.

Using .gifs with a matte color

Another alternative is to use the .gif file format to serve up your transparent images in IE6. (This can be accomplished thanks to conditional comments.) However, the Photoshop default for saving a .gif with transparency will create an image with a jagged edge.

In most cases, we can improve the look of transparent .gifs in IE6 by saving them with a matte color. The following image contains a screenshot of a transparent image saved in different file formats, with different matte colors. I used both a white background and a multi-color background to provide two real world examples.

.PNG vs .GIF w/ matte color
Showing all the different ways to save out .PNGs & .GIFs on colored background vs. white background

When you use a matte color that is exactly the same, or very close to, the color of the background behind the image, the image looks crisp, and the jagged edges are gone.

How to save a .gif with matte color in Photoshop

  • Go to “File” > “Save for web & devices…”
    Photoshop Save for Web as .GIF image
  • Choose “GIF” from the dropdown menu
  • Click the “Matte:” dropdown, and select a color
    Photoshop Save for Web with matte color
  • Then click “Save”

Advertisement

Dave Warfel

Bio coming soon...

3 thoughts on “Working with Transparent Images – .PNG vs .GIF

Leave a Reply

Your email address will not be published. Required fields are marked *