How To Prepare A Photo For The Web In Photoshop CS5

Photo of a photographer's darkroom titled "Set up," by poppet, to show how photographers functioned before digital photography and Photoshop

Photo by poppet

If you have a blog or website on the Internet, you appreciate the importance of inserting photographs and images into your articles and web pages. Many people who surf the Internet want entertainment and visual stimulation, and if too many of your articles are pure text, you risk losing readers to other bloggers whose writings are all dressed up with someplace to go.

Since you’re reading this article, you’re probably already convinced of the necessity of placing photos and images in strategic places in the header, side bars, and content area of your site. In a future article, I shall discuss the steps for uploading a photo or image to a WordPress blog or website, but for now, I’ll focus on the preparation of a photo for the Web.

Once you have downloaded a photo from the Internet or have transferred one from your camera to your computer, here are the steps for preparing it in Photoshop CS5 for uploading to the Web:

An image of a Windows Explorer window to show image file organization.1. In Windows Explorer, save a copy of the photograph you intend to prepare for the Web, and label the original and the copy clearly. I create a separate folder for each article and title the photos “imagetitle-original” and “imagetitle-copy.” If I’ve obtained the photo from a source that requires crediting the author, I include a reference to the author in the filename as well.

2. In Photoshop CS5, go to File->Open, and browse for the copy of the photograph you saved. Once the photo is open, you can crop it to the proportions you desire for your site. The crop tool and other tools available in Photoshop offer nearly endless possibilities for manipulating photos.

3. When you’re satisfied with the photo, you’re ready to prepare it for the Web. Take a look at your blog or website and decide how large in pixels you would like the photo to be. You’ll want to examine factors like whether the text should wrap around one side of the image.

Image of Photoshop menu bar with "Image" dropdown menu to show how to size a photograph or image4. In Photoshop, go to Image->Image Size, and a dialog box will come up.
 
 
 
 
 
 
 
 
 
 
 
Image of Photoshop Image-Size dialog box with "Resample" unchecked5. In the dialog box, you’ll see areas for “Pixel Dimensions” and “Document Size,” and at the bottom, three check boxes: “Scale Styles,” “Constrain Proportions,” and “Resample Image.” Uncheck the “Resample Image” box. (The “Pixel Dimensions” area will become unavailable.) With the “Resample Image” box unchecked, enter “72” and select “pixels/inch” in the Resolution blanks under “Document Size.”

Image of Photoshop Image Size dialog box with "Resample" checked6. Once you’ve entered 72 pixels/inch, recheck the “Resample Image” box. (The “Pixel Dimensions” area will become available again.) In the “Pixel Dimensions” area, enter the desired size of your image either in pixels or percentage. Alternatively, you can enter the size in the “Document-Size” area in inches, centimeters, etc. These dimensions determine the size of the image as it will appear on your computer screen. Click OK.

Image of "File -> Save for Web & Devices" with highlighting to show how to prepare an image or photo for the Internet7. Still in Photoshop, go to File->Save for Web & Devices, and a dialog box will come up.
 
 
 
 
 
 
 
 
 
 
8. In the upper-left corner of the dialog box (see image below), click on “2-up.” This will give a side-by-side presentation of your original and a copy that Photoshop creates for you. This means that in your folder, you’ll find “imagetitle-original,” “imagetitle-copy,” and once you save and name it, a copy that Photoshop automatically creates for you. Making your own copy of the original is still a sound practice. When you’re finished, you can delete your copy and make adjustments to the titles, which, when you’re finished, will result in “imagetitle-original” and “imagetitle-web ready,” or some equivalent.

Image of Save for Web & Devices dialog box with quality highlighted

9. In the top-right corner of the dialog box, set the file type to JPEG and the Quality to “Medium,” which will register in the box to the right as a Quality of 30. For most purposes, this quality level is fine for Internet presentation and will result in a file size that will allow your web page to load quickly. Also, check the boxes beside “Optimized” and “Convert to sRGB.” At the bottom left of each photo, you’ll see the file type (JPEG) and the file size in kilobytes. Click on “Save,” which will bring up a dialog box that will prompt you to rename the file, and then save it to the folder you created earlier.

Image of photo file organization in Windows Explorer10. As I mentioned above, I title the new file “imagetitle -web ready” and save the photo to the folder created for the article that will contain it. The screen shot to the right shows how I organize my the files within each folder. The article is first, and the images appear in pairs, labeled “original” and “web ready.” Once Photoshop creates its own copy, I delete the copy I made at first. I number the files to force the order I desire.

Now your photo is saved on your computer in a format and size that is appropriate for uploading to your site. In a future tutorial, I’ll present detailed steps for uploading a photo to a WordPress blog.

 
How To Upload A Photo To A WordPress Blog

2 comments… add one

  • Elke Hinze February 20, 2012 at 11:00 am

    Thanks for posting this. I have been working on optimizing my own site as well as the ones that I work on. In a world where everyone wants to be entertained we have to include beautiful media, but of course that comes at a speed cost. Will try out these tips for jpgs. I often save them at high, but maybe medium will be just fine.

    Do you have any tips for png optimization?
    Elke Hinze recently posted..The Web Developer Toolbox – Part 1My Profile

    Reply edit
  • Doug Eikermann February 20, 2012 at 12:09 pm

    I appreciate your comment, Elke, but I know you’re already way ahead of me on all the web-design issues. Your site’s design is clean and quite attractive. I don’t yet have any tips on png optimization. I’ve just finished a second tutorial on website/blog backups that will come out in a couple of weeks. Thanks for stopping by!

    Reply edit

Leave a Comment

CommentLuv badge