Weighted Optimization

HOW TO USE AN ALPHA CHANNEL TO GET THE SMALLEST FILE SIZE, WHILE KEEPING YOUR KEY AREAS SHARP

In most photos, there's a part of the photo that's important (like the subject), and then there are parts of the photo that just aren't that important (like an out-of-focus background, or an ocean or forest background, behind your subject). Well, by using an Alpha channel, you can tell Photoshop to keep the areas that are the most important sharp, while blurring or adding noise to less important areas, which makes your file size smaller.

This technique is referred to as Weighted Optimization because it gives more emphasis (or weight) in the overall optimization to the important parts of the photo. This is an advanced Web optimization technique. So before you even consider tackling this, you need to already be familiar with using Save for Web, and basic optimization of Web GIF and JPEG images, because we're not going into any of that basic stuff here. These techniques are for "the next level" of Web optimization.

Step 1.	THIS PHOTO WOULD NORMALLY BE SAVED AS A JPEG, BUT FOR THIS PROJECT, WE'RE MAKING IT A GIF Two things before we begin: (1) A photo this large, and with this much detail, would in most cases be saved as a JPEG, rather than a GIF. But I'm using it here because we need a large-sized image, so it's easier to see here in the book. And (2) I'm going to have you build a precise mask for this image, because after all, this is a channels book and it's great practice. But in real life, you can get almost as good a result by just drawing a very loose Lasso selection around the subject, rather than the finely tuned mask we're about to build. So, think of the "building a mask" part as just practice and part of your channels training. ©ISTOCKPHOTO/PHOTO INC.
Step 2.	WE DON'T NEED A PRECISE MASK, BUT FOR PRACTICE WE'RE GOING TO DUPLICATE THE BLUE CHANNEL Okay, it's pretty obvious in this photo which parts of the photo are importantwe want our optimization to be weighted toward the woman. Again, in your regular work you'd just grab the Lasso tool and draw a loose selection around her. But this isn't your regular work, is it Bunky? Nope. It's masking practice time, so check for the Contrast channel (I won't make you go through all three channelsit's the Blue channel, but by now, you probably knew that just by looking at the full-color photo when you opened it). So, from within the Channels palette's flyout menu, duplicate the Blue channel, so we can (you guessed it) mess with it.
Step 3.	OPEN LEVELS AND USE THE SHADOW SLIDER TO DARKEN THE BLACK EDGE AREAS ON OUR DUPLICATE Press Command-L (PC: Control-L) to open Levels and drag the top-left Shadow slider to the right to darken in her hair (as shown here), then click OK.
Step 4.	NOW THAT THE EDGES ARE BLACK ENOUGH, PAINT IN THE FACE WITH THE BRUSH TOOL This mask is too easy. I should've used it as the first example in the Masking chapter, but heyeasy's good, right? Well, once you make that Levels move, the rest is just painting her in black, right? Because the edges of her hair are already black enough. So…get to work. Press X to set your Foreground color to black and with the Brush tool (B), paint the rest of her head and shoulder in (I know, great place for a dandruff joke, but I'm not going to do it).
Step 5.	PUT A SELECTION AROUND HER SWEATER, THEN FILL IT WITH BLACK (USE THE PEN TOOL OR LASSO) Filling the rest of her sweater in is a no-brainer, too. I used the Pen tool to trace around her sweater, then turned it into a selection, and then filled it with black. However, as usual, you can fill in her sweater any way you'd likethe Magnetic Lasso tool would probably do it, or just trace carefully with the Lasso tool, then fill your selection with black until she's fully covered in black, as shown here.
Step 6.	ERASE THE WHITE AREAS OF THE BACKGROUND. USE THE BRUSH SET TO OVERLAY NEAR THE EDGES Now, we want the background to be white, so just erase all the white areas to the left (I just drew a big rectangular selection over the whole left side and filled it with white). Also, there will be some gray areas on the right side of her, so grab the Brush tool, press X to make white your Foreground color, set the tool's blend mode to Overlay (up in the Options Bar), and paint those gray areas away. Try to be somewhat careful around the flyaway edges of her hair, but if you lose a few here or there, it's okay because we're not making a mask for a compositewe're just using this for Web optimization, so every strand of hair isn't as precious as usual.
Step 7.	INVERT THE CHANNEL Once you get the background filled with white, press Command-I (PC: Control-I) to Invert the selection so she's a white silhouette on black (as shown here). If you see any stray black areas inside the white silhouette, you can just paint them away in white. Now, your mask is built and we can start our optimization. Note: I just want to emphasize once again, that building a somewhat precise mask like this for every photographic image you put on the Web just isn't practical timewise (and it is not even necessarya loose selection works fine), so I wouldn't advise it. But you have to admit, it wasn't bad masking practice, eh?
Step 8.	OPEN SAVE FOR WEB. CHOOSE GIF AS YOUR CONVERSION METHOD Go under the File menu and choose Save for Web. This brings up the rather giant Save for Web dialog. In the settings (on the top-right side of the dialog), make sure GIF is chosen as your Optimized File Format (as shown here). Then, Save for Web will try to render your image using all 256 colors because of the nature of this continuous tone image. Now, with the default settings, this file would be approximately 231k in size, and at standard dial-up speeds, this image would take 43 seconds to load. We've got to make it load faster, while maintaining as much detail as possible in our subject. (File size and download time can be found in the bottom left of the dialog.)
Step 9.	INCREASE THE LOSSY AMOUNT UNTIL THERE'S A NOISE PATTERN OVER THE ENTIRE IMAGE If we simply lower the number of colors in this photo, she's going to start looking blocky and unnatural. So instead, we might try increasing the Lossy amount (as shown here), which will shrink the file size (and make it load significantly faster) by discarding some of the image data. The good news is, with some lossy added, now the file is only 67k and loads in a mere 13 seconds. The bad news is, increasing the Lossy amount puts a pattern of noise over your image (as shown here). We could maybe handle some noise on the background, but not on herit ruins the photo. That's where your Alpha channel comes in.
Step 10.	CLICK THE CHANNEL ICON TO THE RIGHT OF THE LOSSY SLIDER (AS SHOWN) Here's a close-up of the Save for Web settings on the top-right side of the dialog. See the Lossy field on the top right? Well, right beside it is something that looks like the Quick Mask icon. Click on this Channel icon to bring up another set of Lossy options.
Step 11.	WHEN THE DIALOG APPEARS, CHOOSE YOUR SAVED ALPHA CHANNEL (BLUE COPY) The dialog that comes up is the Modify Lossiness Setting dialog and it lets you (are you ready for this?) modify the Lossiness settings! (Sorry, that was lame.) Anyway, what's important here is that this is where you choose your Alpha channelthat Blue copy channel you made earlier, so choose it from the pop-up menu (as shown here), but don't click OK quite yet.
Step 12.	DRAG THE WHITE SLIDER TO THE FAR LEFT TO REMOVE NOISE FROM YOUR SUBJECT (THE WHITE AREAS) Once you choose your Blue copy channel, a Lossiness slider will appear (shown here). The white slider controls the amount of lossy noise that appears in the white areas of your channel. So, drag it over to Minimum: 0 because we don't want any noise on her. When you do that, you'll see that the woman is now perfectly clean, and just the background is trashed. That's actually what we're looking forto protect our important parts (the woman) and let the Lossiness affect the least important parts (the background). This gives us good quality where we need it, and less quality where we don't. However, we can tweak this a bit more to get the best of both worlds.
Step 13.	DRAG THE BLACK SLIDER TO THE LEFT TO REDUCE THE NOISE IN THE BACKGROUND This time, grab the black slider on the right and drag it to the left (the black slider controls the amount of noise in everything but the woman). As you drag to the left (as shown here), you're decreasing the noise in the background. Keep dragging until the background looks somewhat acceptable. When you click OK, look at the file size now; it's down to 131k (you dropped it 100k) and it loads in just 24 seconds. You nearly cut the file size and load time in half, but your subject still looks great! You can use this exact same technique to control dithering, but it works in reverse: the white areas will get the dithering, the black areas will not.
Step 14.	NOW A TRICK FOR JPEGS: KEEPING DETAIL IN CRITICAL AREAS, AND USING MORE COMPRESSION ELSEWHERE Okay, so that's the lossy trick, how 'bout another? Great. This one's for JPEG images (which is the file format we recommend for photographic images on the Web). When you save a file as a JPEG, the quality setting you choose is applied to the entire image, right? Well, with channels you can set things up so the most important areas have the highest quality, and the less important areas are compressed more. This gives you a smaller overall file size. Let's do a test and you'll see what I mean. Open the photo shown here (or use one of your own) and draw a rectangular selection over half of his face (like the one shown here). ©ISTOCKPHOTO/JESSE KOSKA
Step 15.	JUST FOR EXAMPLE PURPOSES, SAVE YOUR RECTANGULAR SELECTION AS A CHANNEL Once your rectangular selection is made, go to the Channels palette and click on the Save Selection as Channel button (as shown here) to turn your rectangular selection into an Alpha channel. Now, here's how this worksthe white area (the area inside the rectangle) will be the area that maintains the highest quality. The black area of the Alpha channel will be the area where the quality will be much lower.
Step 16.	GO TO SAVE FOR WEB. CHOOSE JPEG. CLICK ON THE CHANNEL ICON TO THE RIGHT OF THE QUALITY SLIDER Go under the File menu and choose Save for Web. When the dialog appears, in the settings on the top-right side of the dialog (they're shown enlarged here), change the Optimized File Format setting from GIF to JPEG, set the Quality for your JPEG to 60, and then click on the Channel icon to the immediate right of the Quality field (as shown here).
Step 17.	CHOOSE YOUR CHANNEL. THE WHITE SLIDER CONTROLS QUALITY IN THE WHITE RECTANGLE AREA Clicking that icon brings up the Modify Quality Setting dialog (similar to the one we saw before). For Channel choose Alpha 1, and you'll see your Alpha channel appear in the preview within the dialog. See how the left half of his face is totally pixelated with large JPEG blocks? Then look at the area just to right of thatthe area that falls inside the white area of the channel. It looks much better because that's the area (the white area) you've chosen to have better quality. Now, see the white slider in the dialog? That controls the quality setting inside the white area. The black slider (on the left) controls the quality for the area outside the white rectangle. Ahhh, now it makes sense, eh?
Step 18.	THE BLACK SLIDER CONTROLS THE QUALITY OF THE REST OF THE IMAGE. THIS EXAMPLE IS COMPLETE Now, just so we can further see how this works, drag the black slider to the right and you'll see the black area now look much less blocky, because you're increasing the quality in the black area. So, your goal is to keep as much quality in the white area as possible. If you have to increase the quality in the black area, do so but try to get away with as little increase as possible, because this black area is where you're getting all your file size savings. For example, without the Alpha channel trick, the JPEG (at a quality setting of 60) has the file size at 46k (a 9-second download). However, with the channel trick, it's down to 25k (a 6-second download).
Step 19.	CLICK OK, THEN CANCEL. MAKE A LOOSE LASSO SELECTION, SAVE AS A CHANNEL, AND REPEAT THE STEPS Click OK and then click Cancel in the Save for Web dialog (since this was just a test). Now try the real thing, but this time no rectanglesinstead get the Lasso tool (L) and draw a very loose selection around the detail areas (his face, the detail parts of his hair, etc.), like the one shown here. It's important not to make a detailed mask for this techniqueit needs to be loose, so there's area where a smooth blend between the low-quality area and the high-quality area can take place. Now you can repeat the previous steps (without the rectangle) to create your weighted JPEG optimization.