For this tutorial, you’ll need: Picasa software and some photos. Picasa is free, download it here. By the end of this tutorial, you should be comfortable resizing your photos for Web use.
Isn’t a 72 dpi Image a Web Image?
Many people have trouble with the concept of photo resolution. They’ve heard about dpi and think “300 dpi is for print and 72 dpi is for the Web.” Those numbers are actually meaningless. When I hand over a web site design to a client, this issue is often the most difficult one to explain. I’ll try and make this simple.
What matters is the number of pixels in an image. DPI (dots per inch) is an arbitrary number, and it tells an image how many dots (pixels) to print per inch. Here’s why the simple number of pixels in an image matters more. Say you to print a picture at the sharp 300 dpi resolution. To find out what size that image will print at 300 dpi, you divide the number of pixels wide by 300 and the number of pixels high by 300. I hope I haven’t lost you, because it gets easier below.
Let’s take a hypothetical picture, called Picture A. Picture A is 1500 pixels wide and 1800 pixels high. 1500 divided by 300 = 5. 1800 divided by 300 = 6. So if you print Picture A at 300 dpi, it will print at 5″ x 6″.
If you want to print Picture A at the lower resolution of 200 dpi, the picture would print larger. 1500 divided by 200 = 7.5. 1800 divided by 200 = 9. So if you chose to print Picture A at 200 dpi, it would be 7.5″ by 9″.
As you see, then, the important number is not the image’s dpi, it is the image’s number of pixels. If you wanted to put Picture A on the Web, it would be huge. The average person has their browser open at around 1000 pixels wide. With some simple math, we know that Picture A is 1500 pixels wide, and 1500 is more than 1000, and therefore Picture A is too big to fit into the average Web user’s browser.
And you don’t want that.
I hope the math hasn’t been too much. It’s about as good as my math gets, though, so don’t worry. We’re done with math.
Resize that Good-Looking Guy for the Web
Here’s Picture B. This is such a handsome guy, you just can’t help sticking his picture up on your blog. This picture was taken with a digital camera, which is almost definitely what you use to take your photos with (unless you are still using a film camera while wearing your bowler hat and spats and complaining about “kids these days”).
The thing is, that digital camera image is probably way way too big to fit onto a Web page. It is at least as big as Picture A was, and very likely much bigger (the original Picture B file is actually about twice as big as Picture A). To put this picture on the Web, you need to resize it.
You don’t need expensive fancy software. You can do this with Picasa, a free piece of software from Google. Download it and install it now if you don’t have it already. It will index the photos on your hard drive for you.
I’ll open up my Picasa and locate Picture B. Here it is.
Double-click on the image you want to edit, and it will put you into edit mode for that photo.
From here, you can do all sorts of little edits, if you want to. When you’re ready, locate the icon of a folder labeled Export at the bottom of the screen and click it. You can also go to the File menu and choose Export Picture to Folder.
From here, you’ll export a new, Web-friendly version of the photo. It will not overwrite your original, print-quality image (and this is a good thing). Click the Browse button and choose an Export location. In the next line, choose a name for the folder into which the new image will be saved.
For Image Size, choose the Resize To option. Enter a number in the Pixels box. This is pixel width for the image, Picasa does not allow you to resize by height. You can use the slider to choose common sizes, or you can enter a number by hand. You need to decide how big you want your picture to be, but it should be small enough to fit into the spot you want to put it. I’d recommend 480 as a good size for images, or 240 if you want something smaller. As a rule of thumb, I wouldn’t go over 600 pixels unless you’re sure your site is wide enough for it.
For Image quality, choose Normal. The other settings will create bigger or lower-quality files, and you want to keep your file size small so that your page doesn’t load slowly. When I export Picture B at 480 pixels using Normal, the picture is 41 k. The Automatic quality setting creates a 150 k file, and that’s way too big. The Minimum setting will give you the smallest file size, but quality will suffer.
Ignore the movies bit, this isn’t a movie. Ignore Watermark, unless you really want to put some text on the photo that identifies it and makes it unappealing for people wanting to steal it. It doesn’t look very good.
Now you can click the Export button. The new file will be saved to the folder on your computer you chose on the Export screen. And you’re done. You have a properly sized photo to use on the Web. Here’s the resulting image for Picture B.
This free and relatively simple procedure will help you keep your site loading quickly and ensure that your photos fit well with your site. Now you have no excuse for slow, badly done Web images.