If you’ve designed a website in the past decade (I know, there aren’t many decades to choose from), then you’ve probably run across a situation where you needed an image with transparency. Perhaps you need to see the background through the image, or the image has gaps that need to be transparent. Even more often, you’ll have a relatively solid image, but with complex edges that simply won’t work in a big rectangular JPEG. Logos and other design elements that might move when the browser window is resized, often need transparent edges to look right no matter where they are on the page. Fortunately all of these problems, as you may know, have already been solved with the development of the .PNG image format.
So we’re done! No tips, no tutorial, PNGs have saved the day! Not exactly.
The Pros of the PNG
- Full range of opacity (0%-100%)
- Full range of color (16.7 Million, anyway)
The Dirty Secrets (Cons) of the PNG
- Relatively large file size
- Doesn’t support blending modes
- Doesn’t work in IE6 (If you care about that ugly monster)
These points only apply to 24-bit PNGs, as 24-bit PNGs are the only common format to allow full alpha transparency. Its younger brother, the 8-bit PNG, doesn’t share the same problems (but only supports binary transparency).
Whoa, alpha binary what? Bit? Slow down Star Trek!
Alpha transparency, in short, is the kind of transparency you’re used to in Photoshop. There are varying degrees of opacity, that are all mapped in an alpha channel, those black and white images in your channels palette. PNGs include an alpha channel, so any given pixel in the image can be any given opacity (0%, 32%, 99%, etc.). This is great for shadows, glows, or anything translucent.
Binary transparency, is when robots are invisible. Actually, it’s what it sounds like. Binary means you have two options: 1 or 0, on or off. The same goes for the opacity in a binary transparent image. A pixel is either 100% visible, or totally off. 8-bit PNGs, and GIFs support this simple level of transparency.
Lastly, we won’t get into too much math here, but 24-bit ultimately means the image contains the full range of color data for all 3 color channels. 8 bits of red, 8 bits of blue, 8 bits of green. Add that up, and you can see why it’s 24-bit. 8-bit image formats only support 256 colors, while 24-bit image formats can support 16.7 million.
Problems with your 24-bit PNGs
Obviously full alpha-transparency has its benefits in web design. But with great awesomeness, comes great file sizes. Alpha transparent PNGs are often three or four times larger than their binary counterparts. If your logo, borders, backgrounds, and sprites are all huge 24-bit PNGs, loading times can get slow… fast. While internet speeds are increasing, and this may not seem like a problem, the speeds on mobile phones, netbooks, and 3G wireless networks aren’t quite there yet.
Additionally, it is rarely the case that alpha transparency on its own will solve our design problems. With all of the beautiful uses for the overlay, screen, or multiply blending modes (to name a few)… simply having an image at 50% opacity might seem a little boring.
Old School 8-bit to the rescue!
While alpha transparency is definitely helpful in some cases, let me show you my process for making 8-bit PNGs or GIFs look just as good, at smaller sizes.
Let’s say you wanted a logo to appear on top of a grungy background like the above image. We have a logo with blurred edges, that needs to show strong detail behind it. A 24-bit PNG would certainly do the trick, but we can show all of that detail in an 8-bit PNG or GIF with a few simple steps.
1. Turning off your background layer, your first assumption would be that this image couldn’t possibly work with binary, jagged edges. Let’s try…
2. Go to File > Save For Web & Devices. Under presets, choose 8-bit PNG. Make sure ‘Transparency” is checked. Then choose a matte color, in this case, black.
3. This is close, but pretty janky. Even if that black was a little lighter, you’d still not be able to see all the texture in between the letters. So let’s try something better.
4. Select the logo layer’s alpha by Ctrl+Click-ing on that layer (that’s Cmd+Click on a Mac obviously). Then copy the merged layers by hitting Shift+Ctrl+C (Shift+Cmd+C for Macs). Open a new file, and paste the merged logo there.
5. Now that the merged file is pasted here, you can see that some of that background data was pulled. But simply saving the image with no matte would still cause problems, so we first have to bring all of the opacity up to 100%. Do this by Alt+Click-ing on your logo layer and dragging up or down. This creates a duplicate of your layer. Now that you have two copies, select both of the layers by Shift+Click-ing on each of them, and then merge them by hitting Ctrl+E (or Cmd+E). You now have one slightly more opaque version of what you had before. Repeat this process four or five times. Duplicating, merging, duplicating, merging, duplicating, merging until you see that the image is 100% opaque.
6. Your image should now have a janky, but detail rich fringe matte (no pun intended). Go ahead and save it out as a transparent 8-bit PNG, or even a GIF if that floats your boat. Keep in mind 8-bit PNGs generally have smaller file sizes than GIFs.
7. Voila! You now have a relatively tiny, 8-bit PNG looking just as sexy as its 24-bit counterpart. Of course, this technique only works if your background stays stationary, but if your background was a horizontal or vertical gradient, then these steps would still work.
Go ahead and try this with your navigation menus, sprites, or borders. It can save countless kilobytes!
If you have any additional tips, ideas, or thoughts about image transparency, drop me a line in the comments.
You can be first to know about new art prints & limited edition poster releases on the Fringe Focus Newsletter! New art each month. You are also entered to win a poster giveaway (at random) each month! Join thousands of Fringe Focus subscribers.