Mo’ Images = Mo’ Problems

My work folder currently has 32,000 files in it. An unbelievable amount of them are images or image related (JPEGS, GIFs, PNGs, PSDs, AIs, etc.). As an interactive designer, I can easily accrue hundreds of images throughout the design (and development) process. While I may let all my local files multiply like rabbits, it’s important not to bring this chaos onto the web. The number of images used in a website design can get wild pretty quickly, so it’s important for us as designers to have a weapon to reign them in, not unlike the Ghostbusters.

What’s a CSS Sprite, Daddy?

Well technically a sprite is just an image.  CSS is then used for separation and reorganization of that image. The sprite itself is generally used to combine many small images into one large image. This is done not only save precious loading time and bandwidth, but also to keep your site structure clean and manageable.

How Image Sprites Save Time

Suppose you have fancy navigation bar on your website, with 8 links. Suppose said links each had a fancy rollover, the kind with that ‘glow’ and ‘twinkle’ that makes your clients drool. In the past (or today if you aren’t yet using the CSS sprite technique) this would require 8 separate images, with another 8 images for the hover state. That’s a total of 16 images for the navigation alone.  That’s 16 files you’d have to create, optimize, name, and save. 16 files you’d have to call in your stylesheet, and upload through FTP. Worst of all, that’s 16 HTTP requests on your server from a visitor. While the images may be very small, each request takes time, and ultimately increases the loading time for your page.

Instead, one could create a sprite showing all of the links with each of their rollover states  as one image. This means one HTTP request. When dealing with dozens of small images, this technique can often cut loading time for images in half.

How the CSS Sprite Technique Keeps it Clean

Here’s some example CSS for 4 links with rollovers. 8 images are called because there is no use of the sprite technique. Each link has its own image, and each link has its own rollover image… these links are greedy.

.link_one {background-image:url(img/link_one.png);}
.link_two {background-image:url(img/link_two.png);}
.link_three {background-image:url(img/link_three.png);}
.link_four {background-image:url(img/link_four.png);}
.link_one:hover {background-image:url(img/link_one_hover.png);}
.link_two:hover {background-image:url(img/link_two_hover.png);}
.link_three:hover {background-image:url(img/link_three_hover.png);}
.link_four:hover {background-image:url(img/link_four_hover.png);}

While that may not seems like a huge problem, imagine if you wanted to change the color of ALL those image links one day.  That’s 8 separate times you’d have to open a file, change a color, and save it. Do this for larger menus, sidebar items, or footer areas, and you’ll quickly have a massive pile of images that you have to maintain. This almost always leads to designers abandoning beneficial changes on their websites because “It’ll take too long!”

Here’s what some of your CSS would look like were you to move all those images into a single sprite:

.link {background-image:url(img/link.png);}

.one {background-position:0px 0px;}
.two {background-position:20px 0px;}
.three {background-position:40px 0px;}
.four {background-position:60px 0px;}
.one:hover {background-position:0px -20px;}
.two:hover {background-position:-20px -20px;}
.three:hover {background-position:-40px -20px;}
.four:hover {background-position:-60px -20px;}

Obviously this is a bit cleaner, but the important takeaway is that if you wanted to edit the look of ALL of these links at once, you could. Simply drop that sprite into Photoshop, re-save, and you’ve fixed them all at once.

Alright, so you understand that it WOULD save you time and energy, but you don’t know how to make a sprite? Who could possibly teach you how to do this on your very own? Perhaps its…

TERRIFIC TUTORIAL TIME!

How to make a CSS sprite based navigation of your very own:

1. Let’s say you want to make a simple navigation with 4 links. We’ll go with the most basic essential links here: ‘Home’, ‘About’, ‘Pterodactyl’, and ‘Contact’. Go ahead and create a quick mockup in Photoshop of some navigation like this, or apply the following steps to your own current web projects.

2. Make sure you have one layer set as the default ‘normal’ state. This is how the links will generally appear in your design. Also create another layer that shows all of the links in their ‘hover’ state. In this case I’ve altered the styling, color, and added an underline. Ideally your link size shouldn’t change (If you’re smart you can technically get away with it, just make sure you give ample space for that growth in the sprite, we’ll touch on that later).

3. We need to single out the navigation now, and make it its own image. You can copy your navigation only, create a new image by hitting Ctrl+N (Cmd+N for Mac Folk), and paste it in. Please note in my example I’ve done a more complex selection around the links, preserving the transparency. You can learn how to do that in my Transparency in .PNGs article, but dragging a simple rectangular selection around your menu items is perfectly fine as well.

4. Double the canvas size of your navigation image by choosing Image > Canvas Size… (Alt+Ctrl+C or Alt+Cmd+C). You can double the height without doing any math by simply checking off ‘Relative’ and increasing the height by 100% (or don’t click it, and increase by 200%, I won’t stop you). Your resulting canvas should now have enough room to paste in your ‘hover’ version below your ‘normal’ version.

5. Uh oh! Remember I said the link size shouldn’t change, and this is why. Adding an underline technically makes the ‘hover’ links a bit taller than the ‘normal’ links. Simply giving room for the bottom underline will cause a huge headache later on in the CSS. We’ll need to add space on the bottom of each row.

6. In this case, adding 3 pixels to the bottom of each row did the trick. If your links have added hover effects, just be sure to include extra space in the sprite so that the corresponding normal link is the same size. That’s true for both horizontal and vertical space.

7. Now you can eliminate the negative space in your image. This slightly decreases your file size, but more importantly it makes the bit of math we’ll do in the CSS much easier. You won’t have to count the pixels in between the margins of your sprite if you simply line everything up next to each other. The amount of background-position shifting will simply equal the width of the previous link! That was the most boring statement to ever warrant an exclamation point.

.______ {
display:block;
height:__px;
background-image:url(______);
margin__:__px;
float:____;
}

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

8. The first CSS class you need to write is your parent class. This is the main class that holds all of the similar properties for your navigation. In my case, all of my links are 24 pixels high with a margin of 24px between them. The margin might not be necessary depending on how you styled your links, but in this scenario a quick ‘margin-left’ will work. The background image will obviously be the same for all of our links (that’s the whole point), and the ‘display’ block is simply used because we will be defining a height and width to each of our links.

.______ {
width:__px;
background-position:__px __px;
}

.home {
width:68px;
background-position:0px 0px;
}

9. The second class you need to write applies to the individual link itself. You’ll need to write one for each link in your navigation, as well as another for each hover state (which we’ll get to in a moment). In this case the ‘home’ link has a width of 68 pixels. The ‘background-position’ refers to the point that the background-image will begin to display from. Since ‘home’ is in the upper-left, both the x-axis (horizontal) and y-axis (vertical) will start at 0 pixels.

.home {
width:68px;
background-position:0px 0px;
}
.about {
width:81px;
background-position:-68px 0px;
}
.pterodactyl {
width:165px;
background-position:-149px 0px;
}
.contact {
width:109px;
background-position:-314px 0px;
}

10. As you can see, all 4 links now have their own widths. You can measure the width of each link with your ruler tool. The key here is that each subsequent link is being shifted by a negative number on the x-axis. On the ‘about’ link, it’s essentially telling the background to start 68 pixels deep into the image (where the ‘about’ link just happens to start in the sprite).

Note: Remember that the background-position is cumulative. You must add the measurement of each previous link each time you enter in the position for the next. In this case 68 pixels and 81 pixels is 149 pixels.  Then the ‘pterodactyl’ link is quite wide, another 165 pixels, meaning our ‘contact’ link’s x-axis position starts at -314 pixels. It’s only addition (or subtraction), but a mistake in one early link will mess up the math for all your subsequent links. So double-check frequently!

.home:hover {
background-position:0px -24px;
}
.about:hover  {
background-position:-68px -24px;
}
.pterodactyl:hover  {
background-position:-149px -24px;
}
.contact:hover  {
background-position:-314px -24px;
}

12. To create a ‘hover’ state for your link, simply copy the class and add ‘:hover’ after the class name. It’s unnecessary to repeat the ‘width’ property. Because all of the hover links are directly under the normal links, the y-axis shift is the same as the link height: 24 pixels. It’s a lot simpler here, as you can just paste that in over and over again.

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

.home {width:68px;background-position:0px 0px;}
.about {width:81px;background-position:-68px 0px;}
.pterodactyl {width:165px;background-position:-149px 0px;}
.contact {width:109px;background-position:-314px 0px;}

.home:hover {background-position:0px -24px;}
.about:hover {background-position:-68px -24px;}
.pterodactyl:hover  {background-position:-149px -24px;}
.contact:hover  {background-position:-314px -24px;}

13. Here’s the completed CSS for the example. All that’s left is to add the links themselves into the HTML.

<a class="nav home"></a>
<a class="nav about"></a>
<a class="nav pterodactyl"></a>
<a class="nav contact"></a>

14. Simply apply both the parent and child classes to each link. In this case ‘nav’ and ‘home’, or ‘nav’ and ‘pterodactyl’ etc.

You just learned something! Specifically, how the CSS sprite technique works, why it is used, and how to create a slick, efficient navigation out of it. Go get yourself a drink. Or get me one, this baby was looonnng.

Give me your thoughts on this technique in the comments!

Banding is one of the universal annoyances that every designer has to deal with.  Although it’s certainly more common among web designers, banding has also given plenty of headaches to print designers and photographers. Banding is a newer problem; unique to the digital realm, as old-school methods of photography and publishing weren’t limited to the digital color space. As the problem and its causes have only been recently defined, many designers may lack the techniques necessary to combat this subtle and tricky problem. If you’re not familiar with the term or are sick of reading this sentence, let’s cut to an image.

Some Banding in Action due to Compression:

This is an overly exaggerated example of banding effects on a photo I took.  In the compressed version on the right, the sky doesn’t contain enough blues to portray a smooth transition. This is because the compressed version is trying to save space by limiting the number of colors used.  This actually works really well in the building section of the photograph because our eyes don’t pick up on subtle brightness changes when looking at busy or high-contrast areas. It’s only when the color jumps from “Slightly Light Blue” to “Slightly Less Light Blue” that we really notice.

It’s as if the compression algorithm thought “Hey man, that looks like solid blue. Six colors ought to cover it–done!” Idiot.

While compression is a common cause of banding, it’s important to remember that all digital images share this property of stepping harshly from one color to the next.  Indeed, each pixel is its own little square, not blending with any pixels around it. Fortunately pixels are much too small for our eyes to detect that stepping.  It’s only when compressors force similar areas of color into much larger groups that we pick up on the changes.

Banding with the Gradient Tool:

The gradient on the left side was created by picking two colors and fading them together with Photoshop’s gradient tool. The gradient on the right side only used one color, and simply faded itself from 100% to 0% opacity.  Obviously they both achieve very similar results, and perhaps that’s why most designers may use the techniques interchangeably. If you look very closely, however, the gradient on the right actually shows some harsh stepping from one shade to the next.

Add some levels adjustments, and you can really see the difference:

The good news is that Photoshop’s gradient tool handles gradients pretty well with multiple colors.  Photoshop does the math and immediately rasterizes the outcome.  Through a combination of dithering and subtle noise the fade is rendered pretty smoothly.  You can even hit the levels or curves adjustments later and it looks decent.  The gradient on the right, however, didn’t have two colors that Photoshop could do the math for, so no dithering or noise could be applied.  Without knowing what color it would be fading to, it simply renders the gradient in bands ranging from 100% opacity to 0% opacity.

Noise is the Solution! Sometimes…

The solution that is often thrown about is “Add a bunch of noise dude!”. While it’s true that adding noise to break up the bands is effective, you have to be careful that you aren’t bringing a bazooka to a knife fight. Adding too much noise unnecessarily will degrade your image and take clarity out of your highlights and shadows.

Fix #1 – Use Two Color Gradients

To prevent banding while using Photoshop’s gradient tool, always use at least two colors. Fading a single color to transparency will not yield pretty results.  If you absolutely must fade a color to transparency, make sure the gradient is small, or that the range of color difference in the gradient is high.  It’s the long and subtle gradients that cause problems.

Fix #2 – Use Noise in One Channel

If you’re experiencing banding when compressing or saving your images, you may want to add noise to prevent noticeable stepping.  If you want to do this without harming ALL of your color data try applying noise to only one channel–ideally, the channel where the most banding is occurring.

1. Select the ‘Channels’ tab next to your layers palette.

2. Click on a color channel.  Perhaps red if you have banding in a sunset photo, or blue if there’s banding in a bright blue sky.  Choose whichever channel works best in your situation.

3. Choose Filter > Noise > Add Noise. Check ‘Gaussian’ as the distribution format. Choose 1-2% as the amount, as you can always add more noise later if necessary.

Save your image out as you did before, and ideally this method should have decreased your level of banding.

Fix #3 – Use Noise in Another Layer

If you absolutely need to maintain a lot of integrity in your photo, but still need to remove banding in some area, try adding the noise to its own layer.

1. Create a new layer and fill it with 50% gray.  That’s about #808080 if you’re working in RGB.

2. Place this layer above the image you’re adding noise to. In the layers palette, choose ‘Overlay’ as the blending mode.

3. Add noise to this gray layer, 2-3% should suffice.

You’ll notice that the noise does not affect any very bright or dark areas of your image.  Because the noise is in ‘Overlay’ mode, you’re free to crank up the noise as high as needed, without destroying the quality of your highlights or shadows.

Another benefit to having the noise in its own layer is that you can use your eraser tool to remove noise from areas where it is not needed.  You could even take one step further, creating a complex mask and applying it to the noise layer, giving you full control over which areas are affected.

No More Banding!

Hopefully some of these ideas got rid of your nasty banding issues.  If you have any other tips or tricks to solve this problem, drop me a line in the comments.

Other Resources to Regarding Banding:

Wikipedia – Posterization

Greyscale Gorilla – How to Remove Banding Artifacts in After Effects

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.