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:
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.
4. In Photoshop, go to Image->Image Size, and a dialog box will come up.
5. 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.”
6. 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.
7. 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.
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.
10. 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.