How to Resize a Photo for your Website

article written by Nora McDougall

Yes, it is entirely possible to take a photo directly from your digital camera and put it on your website, but it is not advisable to do so. Your digital camera probably saves images in the jpg format, which web browsers can read, but whether your photo can appear on your website, and whether your photo SHOULD appear on your website in that form are two entirely different matters.

Photos from your digital camera probably have much too large a file size to be good for your website. If the files are larger than 25 or 30 K, you will need to resize them. You can lower the size by chosing a lower quality on your camera, but that just gives you a lower quality photo. What we are going to try to so is keep as much quality as possible, and still lower the file size.

Photos from your digital camera may need lighting adjusted and parts cropped out. Take the best photo you can and then do the rest in Photoshop. However, always keep in mind that you can make a bad photo better, but you can never make a bad photo good. So, if your photos are less than wonderful, take a digital photography class before you take photos for your website.

There are many different programs available for manipulating photos. You may find one that has a tool do most of these steps by clicking one icon. If you have high quality photos, these may work fine. However, that program is not checking the results of the steps it takes. You will need to check each photo it manipulates to be sure that it hasn't oversharpened the photo or made it unusable in some other way, especially if the photos aren't professional quality. The following exercise will help you understand what that software is doing and help you make the decision of whether you want to go through the steps on your photos or use an automated system.

Instructions for Resizing your Image

The following instructions and screenshots are from Photoshop 7 and assume that you have basic Photoshop skills.

1. Open your image file in Photoshop.
2. Look in the Title Bar and see what % the photo opened.
   If the photo is too big to fit in the screen, it may have opened at a smaller size than it really is in pixel. It is very easy to miss that and think the photo is a different size that it actually is. The photo below opened at 50%.
   
3. To see the photo in the size it will be on a web page, go to View -> Actual Pixels and the photo display will resize to 100%. You can also view the image online. Some browsers will resize the image to make it fit in the screen and others won't
   
   The fact that the image shows at 50% does not actually change anything on the image. It is only changing how Photoshop is showing you the image. If you are used to working in print, some of these steps may seem odd, but the web is a different environment.
4. When the photo above is shown at 100%, it doesn't all fit on the screen. If you put it on your website, it will push everything out of its way. That is because the file size was 277K and the DPI started at 300. How big the photo is on anyone else's computer screen will depend on their monitor settings. For your website, you should consider that not all your viewers will have the latest and greatest computer equipment; so, use 72 dpi as your rule. That is for every 72 pixels, the image will be one inch.
5. Go to Image -> Image Size, and you will see the size of your photo in pixels. It could be that your DPI is higher than 72. Or, it could be that the DPI came out as 72, but the pixel size of the image is very large. The photo in this example is 1280 pixels or about 18 inches wide. Your image may be too large in the Resolution and in the Pixel Dimensions. For the web, we won't worry about the Document Size because the photo is interpreted in pixels.
   
   
6. You could resize the image to the size you want in one step. A 300 px image is a little over 4 inches, which is a great size for a web photo. So, you could enter 300 in the width textbox. Because Constrain Proportions is checked, the high would automatically adjust to the correct number. Here is the photo resized in one step.
   
   The problem with resizing the image in one step is that Photoshop had to dump a lot of information out of the file to reduce the size. One of the effects is that the photo isn't as crisp and clear as the original. If you reduce the size in steps, you can retain some of the crispness of the original image. Again, the better the photo you start with, the less manipulation you will have to do.
7. Back to the image at full size, let's take it down in three steps: 900px, 600px and 300px.
   - Change the width to 900 px.
   - Look at the image tiles on the roof very carefully
   - Go to Filter -> Sharpen -> Unsharp Mask
   - Look at the tiles again. Are they crisper than before? If you can't tell, undo the step and redo it until your eyes can pick up the difference.
   - Change the width to 600 px.
   - Now Unsharp Mask should show up at the top of the Filter menu, as shown on the right.
   - Take a look at the image again. Is it better after you Unsharp Mask? If not, then undo it and go on to the next step. You never want to sharpen too much.
   - Change the width to 300 px.
   - Do another Unsharp Mask.
8. Compare the photos below. Notice that the photo done in steps is crisper.

9. Resized to 300 directly	Resized in Steps and Unsharp Mask

   
   

Where to go from here

Besides the photo being crisper, some of the color contrast has been lost. Besides resizing your images, you will want to get some instruction on controlling the contrast and color of your photos. The file size of your photo may still be larger than optimum. Photoshop comes with a program called ImageReady, which can reduce your file size even more, after you have done the work you want in Photoshop. You may also like to learn how to create dropshadows and backgrounds.

Syllabus