What you’ll need: A reasonably current copy of Photoshop or Photoshop Elements. Please note that there may be cosmetic differences in the process for different versions. I’m using Photoshop CS4. And you’ll need a digital photo.
If you aren’t sure why you should pay special attention to how you prepare photos for the Web or are confused by the whole dpi thing, read my Resizing Your Photos for the Web tutorial until you get to the Picasa instructions. Then come back here. If you’ve got Photoshop or Photoshop Elements, you’ll get more control from those programs than you would with Picasa.
I’ll be paying attention to resizing photographs in this tutorial. Look for my tutorial on resizing graphical images coming soon. If you’re unsure of when you’d want to use a JPEG and when you’d want to use another format, check out my What Image Format Should I Use? tutorial.
Getting Started
I’ll start by opening up Photoshop and loading a photo taken with a standard, point-and-shoot digital camera. This one is already a JPEG file, as that’s the format this camera stores pictures in. But it doesn’t matter what format the photo is, so long as you can open it in Photoshop. We’ll be converting the picture to an optimized Web image.
This photo is 2816 pixels wide by 2112 pixels high. This is way too big for the Web. Most Web pages are under 1000 pixels wide, so this picture would overflow your audience’s browsers by a significant amount. Also, the photo is 2.33 megabytes. It would load slowly, even on a broadband connection.
With Web graphics, the smaller the file size you can create, the better. Every added kilobyte on your Web page slows down loading a tiny bit. Try and keep your Web graphics under 100k, and then only if it’s a really important image. Under 70k is better, under 50k even better, and under 30k really better. There is always a trade-off of quality versus quick loading times on the Web: try and find the happy medium. Fortunately, Photoshop allows you to preview different options before you settle on a final Web graphic.
Note: You can resize your photos in Photoshop by choosing Image>Image Size and reducing the photo size. But if you do this don’t forget to save the reduced image with a different name. Otherwise, you run a risk over overwriting your original high-quality image file. If you ever want to print the file, and you’ve shrunk it and overwritten it, you’ll be out of luck. So if you worry about doing that, you can do it from the Save for Web window.
Open an image in Photoshop and choose File>Save for Web (or Save for Web & Devices).
Here’s the Save for Web window. You’ll see something like the image above. If you don’t see two image windows, locate the 2-Up tab at the top of the window and click it. Depending on the image, these windows may be top and bottom or side-to-side.
One window has the word Original beneath it, and shows you the uncompressed image. This is great for seeing if the Web version you’re creating looks “right.” The second window shows a preview of the Web graphic you’re creating.
I decided not to resize the image before entering this window. You can see that the image is way too big: you can only see the top corner of it. So we’re going to reduce the photo size first. On the right-hand side of the window, you’ll see the Image Size section.
Make sure that the chain icon is set as above, as this makes sure your image resizes proportionally. Now type a new number into the width or height. I would recommend not making your photos bigger than 500px wide unless it’s really important. But make sure the image isn’t too big for the area you want to put it. Go smaller when you can. So, for instance, type 500 into the width field. Then click in another field (or hit the Tab key). The image will resize proportionally based on the number you entered.
Above, you’ll see the image reduced to a much better Web size. In my version, setting width to 500px automatically set the height to 375px. See, no math to worry about. It’ll also tell you the percentage of the original size your new size is. In this case, it’s a patriotic 17.76%.
That’s the real work done. Now it’s just a matter of looking at the different options that will give you a good balance of file size and image quality. This is a photo, so I want to use JPEG.
At the top right of the Save for Web window, you’ll find the format selector. This is where you’ll make adjustments to find that balance of size and quality. There’s a preset drop-down, so I’ll choose JPEG High to see how it looks. Compare the preview with the original. Then look at the text beneath the preview, you’ll see the file size you’d create with the current settings. Change to JPEG Medium and make a judgment call: is the savings in size worth any degradation of image quality? I can’t help you here, use your judgment. You can fine tune by typing different numbers into the Quality box. Is the default 60 for High too big, but default 30 for Medium looks crummy? Try typing in 40 and see what happens. Or 50. It’s worth taking a bit of time to get the best results.
What to Look For
JPEG makes file-sizes smaller by compressing the quality of the image. If you go too low, you get visible JPEG “artifacts”. Look a the photo below. See all the blocky, blurry areas? Those are artifacts created by overcompressing your image. If you see this, turn the quality up.
For my photo, I ended up going with the default JPEG High quality of 60. It looked terrible smaller, and though there are a few artifacts, I think they’re acceptable to keep the file size lower (you can see them around my head and in the top corners). Final file size: 43k. Final dimensions: 500px x 375px. Judge for yourself below.
