This tutorial describes one of many methods for saving photographs in compressed format for the highest quality browser display within the file-size limits requested by webmasters. Simply put, we’re going to take a 100-pound photograph and place it into a 20-pound bag. Or, maybe you could consider this “freeze-drying” a photograph, with only small quality loss.
The Stuff:

SUMMARY: This tutorial describes one of many methods for saving photographs in compressed format for the highest quality browser display within the file-size limits requested by webmasters. Simply put, we’re going to take a 100-pound photograph and place it into a 20-pound bag. Or, maybe you could consider this “freeze-drying” a photograph, with only small quality loss.

The screenshots in this tutorial are of Adobe Photoshop CS2, although almost every photo-editor has similar features. If you don’t yet own a photo editor, I strongly recommend you look into Adobe Photoshop Elements 3.0; it contains most of the photographic features found in the full-blown CS2 version (including “Save for Web” which we'll use here). Photoshop CS2 costs as much as a pretty good camera, and can take a long, long time to master. "Elements 3.0" costs a fifth as much and offers the great advantage of being able to look down your nose with incredible superiority at your friends who stole their full version; you can ask them if they use stolen software to write the copyright protections on their photographs…

Why yes, actually I DO get carried away a lot, why do you ask? Let’s get started, un-huh, un-huh….

After one completes the editing of his photograph, and gets it *just* right (or omits the stupid editing because it came out of the camera soooo good), you want to save it with the optimal quality allowed by the website-guy, so you can beat-the-hell out your opponents and impress the chicks (but maybe that's just me). So, here’s one method.

FILE > Save for Web (Not too hard so far, huh?) the SAVE for WEB Dialog Box

This is the Save for Web dialog box. It looks scary, but it’s a pussycat.
We’re going to go around this photo, counter-clockwise (just because I’m just that kind of guy) and put these five circles to work for us.

#1) This is where we’ll set the size of our image, so let’s talk about that for a second.

I’m only going to remind you of something you already know, size matters. In photo contests, your image must be large enough to be seen clearly or you don’t have a snowball’s chance. Ever bring up a contestant’s image to discover it’s about three inches wide and two inches tall? Enough said. On the other hand, have you ever seen an image you have to scroll around on the screen to view? Sucks as well. If you make your photographs too large or too small, people will laugh at you behind your back, you will bring shame on your entire family tree, and your dry cleaning will always be late.

So, let’s assume almost everyone has a screen of at least 1024 pixels high and 768 pixels wide. If we subtract a fudge-factor for the scroll bars (at the side) and the menu bars (at the top); then 900 by 600 seems to be a pretty good guess at the minimum DISPLAYABLE screen size for our photographs.

To keep our entire photograph on the screen, we scale the LARGEST side of our photograph to the dimension above (either 900 OR 600); if a portrait format (taller than it is wide) scale the height to 900 *OR* we’ll scale the width to 900 in the case of a landscape format (wider than it is tall). We can let the computer figure out the rest (after all, it IS a computer).

We do that by clicking on the IMAGE SIZE tab on the right (#1) and entering either 900, or 600, in the appropriate box. Make sure “constrain proportions” box is checked and click “APPLY”.
There. I knew you could do it.
Continued
#2) Inside the red circle marked #2 is the zoom factor. I recommend you set this to 200%, which doubles the viewing size (it does not change the actual size, we’re only zooming), so at the end of step #5, we can scroll around and verify the quality is acceptable. If we scroll MORE than 200% we’re going to see things that are just not visible in normal viewing mode and therefore irrelevant.

On around the counter-clockwise circle….

#3) Click the 2-UP tab. 2-up is not a soft drink or ghetto talk (I just could NOT think of anything funnier to put there. Sorry), it just allows us to do a side-by-side comparison between our newly optimized version and our original photograph. See, step 3 was duck soup, a piece of cake, a walk in the park; getting carried away again...

#4) Set the #4 box to “JPEG”. JPEG was made for photographs, actually that’s what the “P” in JPEG stands for, photographic. If you are doing line drawings or illustrations, JPEG is not the best choice. We photographers have a compression format that’s our very own. Awww….


Continuation of "Continued"
#5) Click the little arrow marked #5 (from the previous picture) and you’ll get this:
(I’m hell on those little red circles, huh?)

Click on “Optimize to File Size” (marked #2), and you’ll get this box:
It’s a good idea to reduce the file size you want by 2% and enter that value in the box. We reduce the size by two percent so we don’t have to concern ourselves with all that propeller-hat-computereeze stuff. Our file will be under the desired size no matter what the computer-geeks throw at us. We’re artists; we’re above that…..

So in this case, I wished to make the best possible image in fewer than 200 KB, so I entered 196.

All right, compare the two images on the left and the right in the 2-UP (still, no better joke) view, and look for “show-stopper” errors. You won’t have to scroll very long; if they are there you’ll see them right off. The chances are very high that you’ll not be able to see much difference in quality between the images at all. If you do see “swirleys” (that’s a technical term I just made up), then reduce the physical size of your image about ten percent and try it again. But don’t be too picky here either; when it comes to looking for JPEG compression errors, you ARE your own worst critic. Remember, no one else will be zooming in on your image at 200% looking for JPEG artifacts. Well, maybe there’s a few that would; but I meant NORMAL people.

Now, just press “SAVE”. BUT DON’T SAVE IT TO THE ORIGINAL LOCATION, give it a new name, it’s useless for anything other than kickin’ butt in web-photo contests. Giving it a new name prevents us from writing over our original image. I recommend you start a folder called “Saved for Web” and put these images there, so they don’t get mixed in with your real photographs. Also, end the filename (not the file extension,Einstein) with WEB, so they can easily be spotted (i.e. thisphotoWEB.jpg). Remember, we’re creating images not much larger than your cell phone produces, so keep them separate, OK? I know where you live.


That’s it. Now, you know everything I know (well, plus what you knew before). I hope this works well for you; it is the way photographs are professionally sized for web sites. Think of me sometime while you’re polishing your trophies.

If you have problems, ..rather if you have "Save for WEB" problems, write me. I'd sure be glad to help.