Transparent, raster images do not need to be a detriment to a web site or application's performance. Yes, they are typically massive in file size and/or ugly due to over-compression. But that doesn't need to be the case.

The old guard

When it comes to raster images and transparency, the two most commonly recognized formats are the PNG & GIF.

PNG

The PNG is used more often than you probably realize — particularly with icons. Not only does the PNG have RGB (Red, Green, Blue) channels, it also has an alpha channel. This allows for semi-transparent pixels at a graphic's edges. Some call it anti-aliasing. While beautiful and versatile, PNG's are terribly expensive. The more colors included in the graphic and the larger it is (in terms of width × height), the larger the file becomes.

GIF

Admittedly, the GIF is rarely used for its transparent properties — and rightfully so. While a GIF is fully capable of rendering transparent pixels, each pixel itself must either be fully opaque or fully transparent. Most image editors provide the ability to add a "matte", which fades the image's soft edges into a specific color, as needed. But drop that image on another colored background and you're left with an awful-looking, ragged edge.

And now the good ol' SVG

SVG

Enter the SVG. It's such an interesting image format, having picked up in popularity in recent years. This is in spite of being a valid image format recognized by browsers since the late 1990's.

But you knew that. You're probably thinking: Wait! SVG means Scalable VECTOR Graphic! You can't use them for raster images.

Well, partially. A SVG can only generate vector shapes, but you can also embed a raster image into it. With some neat features of the SVG, like the long built-in <mask>, you can bring in inexpensive image formats for the dirty, raster pixel rendering and — per our discussion — excluding work.

Some Assembly Required

Yes, this technique takes more effort. It is not a single file reference like the other two formats. But it takes very basic Photoshop handiwork. Just generate a basic black and white mask — in which the white is the subject and the black is the portion you want transparent — from your original graphic. Then, you reference a <mask> on your <image> in the SVG. You can learn the finer details on how to do this in these reference docs.

When to Use

The answer, as per the usual with programming, designing, or anything really, is that it depends.

If this graphic needs to be rendered immediately — say if it is above-the-fold where critical rendering is paramount — or with the least data transferred possible — say a mobile user on a limited data plan or crappy network — then, yes. You should use the hell out of this technique. But will you be using it with every transparent, raster graphic you need? Probably not.

———

Follow me on Twitter (@tellaho_) for not-as-often-but-occasionally-dev-related banter.

Oh, and thanks to Jessica Parsons (@verythorough) for her very thorough talk about image formats at this month's WaffleJS meet-up. It undoubtedly inspired me to want to speak on this. Performance and image geeks unite! ;)