The Alpha JPG - Compression Magic

Suppose you want to post a photo with maximum detail and beauty, but at the same time you want to reduce its file size (for bandwidth reasons). Most people are satisfied to get the size reduction that comes from using Photoshop's Save for Web feature. This does an excellent job, but when properly used, it can do far more. The purpose of this article is to show you the "far more".

To complete this mini-tutorial, I will first show you the image I'm going to work with and make some comments about its size. The model is Holley Dorrough.


Image 1: Save for Web - JPG - Very High


Image 2: Save for Web - JPG - High


Image 2: Save for Web - JPG - Medium


Image 2: Save for Web - JPG - Low

As you examine these four images you will note that they are all the same pixel size. But check out the file sizes. Here is what you'll see:

• Image 1 = 120,493
• Image 2 = 72,221
• Image 3 = 37,732
• Image 4 = 24,660

I think most of you will agree that Image 4 is not really very usable. However the other three images are usable with #2 and #1 being the best. To really get a feel for the differences in the first three, take a look at the text at the bottom.

So each time you use Save for Web, you must examine the array of choices you have and try to choose the one that shows your image off in the best way. Having come this far, let's see how we can use a little magic that's hidden within the Save for Web option to reduce any one of the above Images to a smaller file size, but at the same time, the most important part of the image (Holley) will stay exactly the same.

Part 1: The Alpha Mask

We are going to create an Alpha layer mask by selecting the most important part of the image. This will be a very loose selection so it can be done in just a few seconds by anyone. I usually use the Magnetic Lasso Tool because its so fast.

Here is the photo at the point where I've drawn a rough selection around the critical Holley parts and have opened the Select Menu and am about to choose Save Selection:



So, again to make sure you're following so far, here are the steps for creating the selection:

1. Get the photo ready for saving by any workflow you choose.
2. Do a rough selection of the most important parts of the image
3. Open the Select Menu and choose Save Selection

As soon as we select Save Selection, we'll see the following:



You can give the selection any name you want. In this example, I called it holley.

Now click the Ok button. When you do this you will see a Alpha channel complete with the resulting mask. Here is what you'll see:



That was pretty easy wasn't it? But why did we do it? What have we gained?

Now for the magic!

Part 2: Save for Web

Choose File | Save for Web from your Photoshop menu.

The photo will load into the Save for Web dialog. At this point you can choose one of the JPG settings, or experiment with several to get the best preview. You can also resize the image (which you should do before making any final decisions).

Now look at this screen shot of the Save for Web interface:



As you can see I have clicked on the little icon next the quality dropdown. This is the magic "use a channel to modify a quality setting". This opens up the dialog that you see above.

From this dialog, choose "holley" since that's the name we gave our channel. When you make this choice, the dialog will change and look like this:



Adjust the slider at point B to choose the quality setting for the unmasked (or unimportant area). Adjust the slider at point A to choose the quality setting for the masked portion (the holley portion in this case).

After you make these choices, click Ok and then go ahead and save the image. Here is the image in our above example:


Image 5: Save for Web - High - Using alpha mask trick

The size of this file is 62,070 bytes. We saved over 10,000 bytes or about 16% on our file size.

Here are the before and after images:



The top image is the one using the Alpha channel Masking trick. The bottom image is the one without.

And here is a reduced size version of the two side by side for easier comparison:



Compare the image to #2 above and you'll find that the parts that are actually Holley look the same in both. But look at the background details and text and you see a marked change.

Okay, that's it. You now know the Alpha Mask Save for Web Magic trick for selective compression of a JPG image. Hope you enjoyed it.

Comments are welcome.