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, were 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 dont 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? Lets 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, heres one method.FILE > Save for Web (Not too hard so far, huh?)
This is the Save for Web dialog box. It looks scary, but its a pussycat.Were going to go around this photo, counter-clockwise (just because Im just that kind of guy) and put these five circles to work for us. #1) This is where well set the size of our image, so lets talk about that for a second. Im 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 dont have a snowballs chance. Ever bring up a contestants image to discover its 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, lets 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* well 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.
#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, were 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% were 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 thats 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 thats our very own. Awww.
#5) Click the little arrow marked #5 (from the previous picture) and youll get this:(Im hell on those little red circles, huh?)Click on Optimize to File Size (marked #2), and youll get this box:Its 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 dont 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. Were artists; were 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 wont have to scroll very long; if they are there youll see them right off. The chances are very high that youll not be able to see much difference in quality between the images at all. If you do see swirleys (thats a technical term I just made up), then reduce the physical size of your image about ten percent and try it again. But dont 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 theres a few that would; but I meant NORMAL people.Now, just press SAVE. BUT DONT SAVE IT TO THE ORIGINAL LOCATION, give it a new name, its 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 dont 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, were creating images not much larger than your cell phone produces, so keep them separate, OK? I know where you live.Thats 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 youre polishing your trophies. If you have problems, ..rather if you have "Save for WEB" problems, write me. I'd sure be glad to help.
Moderator note: this tutorial was written back in the old days when there was a 200KB cap on entries. These days we aren't as picky about the entry size as long as it's reasonable, but the "optimize to file size" trick is still a very useful one to know :)