Using iPhoto to Prepare Photos for Web Sites

Learning to update the content in your web site is one thing, including adding photos is another step, but one that makes your web site more vibrant and interesting with all those words that a picture paints.

Most of us have digital cameras and mobile phones that take pretty good photos that we can use, or we've been given batches of photos from photographers, friends or customers that we can use on our web sites. The main thing to realize is that the file size of most photos that come right off a digital camera is so large that loading them directly to our sites would create problems. One problem could be that your content management system would reject the photo because there is a file size limit for uploading to the site. Another problem would be that even if your system lets you use the photo, using on a page would cause the page to load extremely slowly because of the massive file size. The solution: resize your photos before you attempt to insert them into your web pages.

There are a multitude of ways to do this, but the focus of this tutorial is using iPhoto, which comes installed on most modern Mac OS systems, to resize your photos. Mac users have a very easy time of importing photos from iPhones or cameras into iPhoto and having them organized in iPhoto. iPhoto also has photo cropping and resizing capabilities! And much more! Let's learn to use them and avoid the circumstance of buying an expensive photo manipulation program and learning how to use yet another tool.

If you use Windows or Linux operating systems, I recommend learning how to use the GNU Image Manipulation Program to work with your photos with this tutorial.

These are general directions. Every version of iPhoto varies a little in what's available and where the buttons are.

  1. First, create a folder somewhere on your computer where you are going to put all of the photos that you prepare for web use. For example, in the area where you store other files for your web site, create a new folder and name it "web_ready_photos" (without the quotes). Its a good idea to avoid using spaces in both file names and in folder names when you're getting into loading them onto servers. For a photo file name, we would want "2012_holiday_celebration_01.jpg" rather than "Jen and Barney whooping it UP at the CHristmas Party in 2012!.jpg". There's no harm in keeping the file name that your camera assigns, like "DSCN00123.jpg" but I find that renaming the files helps in telling you what the photo is about at a glance and alerting you to the fact that you have changed the photo from the original that came from the camera or phone.
  2. Open iPhoto and browse to the photo you want to use. Highlight it by clicking on it. Look for a small, blue, round icon with an "i" inside the circle, somewhere on the edges of the iPhoto workspace. This is the information button. Clicking on it will toggle hiding and showing information about this photo somewhere in the sidebar of the workspace. The information includes things like title (file name), date (photo was taken), time (photo was taken), rating, keyword, kind (file extension, like jpg) and size (file size, which shows the pixel dimensions and size of the file, like 3264 x 2448 and 2.4 MB.) Its handy to have this information available as you're working.
  3. Before you start manipulating your photo, with the highlighting around the photo, go to the "Photos" menu across the top of the iPhoto application and scroll down to "Duplicate." This way, you'll have a new version of your photo that you can mess around with, retaining the original version in case of any type of dire photo manipulation accident.
  4. Once you have your information showing and your photo highlighted and duplicated, click on the duplicate version. You'll be able to tell its the duplicate because the information pane will show the word "copy" next to the "title." Then, look for a series of buttons like: Split, Name, Edit, Rotate, Flag, Hide. If your photo needs to be rotated, click the "Rotate" button until it ends up in the corrrect orientation. Then click "Edit."
  5. You'll see a new series of buttons that include things like: Rotate, Crop, Straighten, Enhance, Red-Eye, Retouch, Effects, Adjust. I'm going to keep the scope of this tutorial to cropping and re-sizing photos, but I strongly encourage you to PLAY with all of the other buttons so that you can see how awesome and creative you can be with preparing your photos for the web. For example, with "Effects" you can do things like make your photo black & white, sepia toned, color boosted, antique, blurred edges, etc. Neato! If at any time in your work or play on your photo you want to erase your changes and get back to the original version, go back to that "Photos" menu along the top and choose "Revert to Previous" or "Revert to Original," depending on how deep you are in your changes.
  6. Decide if you want to use the entire content of the photo or if you need to crop. There are various reasons for cropping, including removing unwanted parts of the photos or making the photo into a certain shape because of how your web site is set up. For our example, let's pretend that we need a square photo to fit in the sidebar column of our site. You will need to get some direction from your web developer about the sizes needed for certain areas of your site. Click the "Crop" button. You'll see the edges of the photo dim and a frame appear atop the photo. At the bottom of the photo, you'll see things like "Constrain" with a checkbox next to it, a dropdown menu with size choices, a "cancel" button and an "apply" button.
  7. Check out the choices on the dropdown menu. For our example, we are going to choose "square." Once you select square, the frame in the light part of the photo will adjust to a square shape. You can then click and drag that square around the photo to make sure it is centered on the desired content. Check the box next to "Constrain." Then, click and hold on one of the corners of the area. With this action you can make the area of the square smaller and larger. Once you have the shape selected correctly, click the "apply" button to save your changes. You now have your duplicated image in the shape of a square. Click the "Done" button.
  8. But wait! Look at the information for the photo, specifically the "size." It is still way too big for your site. Let's say your web developer told you that photos in the sidebar need to be 400px square at 72 dpi. The information on this photo says its 2214 x 2214 and 1.5 MB. Let's resize the photo to the correct specifications. With the photo highlighted, go to the "File" menu at the top of the iPhoto workspace and select "Export."
  9. An "Export Photos" dialogue will appear. Along the top, choose "File Export" if not already showing.
  10. Kind: JPEG or PNG

    JPEG Quality: Medium or High

    Include: leave boxes unchecked next to "Title and keywords" and "Location Information"

    Size: Custom

    Since we are using a square, you will choose "dimension" next to "Max" and fill in 400 in the box next to "px."

    Filename: "use filename" for now.

    Then click "Export"

    Now you will get to save your file and rename it if you wish. A "Save As" dialogue will appear. You can browse to the web_ready_photos folder that you created and choose a new, more descriptive file name to go before the .jpg or .png file extension, and then click "OK."

  11. Now, just to make sure all went as expected, go to your Finder and navigate to the folder that you created. Look inside and behold your perfectly sized and shaped photo!
  12. Now let's practice with a non-square photo. Let's pretend that you have a banner photo across the top of your pages that your developer has made it easy for you to change. She has told you that those photos need to be 760px x 260px at 72 dpi (all photos for the web should be at this resolution.)
  13. Go back to iPhoto. Navigate to the photo you want to work with. Highlight it, duplicate it, and then highlight the copied version. Click Edit. Click Crop. Select Custom. Check the box next to "Constrain." In the two boxes that appear, fill in 760 and 260. This will create the correct shape for your banner. Slide the selected area around to capture the desired portion of the photo. Remember you can slide the frame around or make it smaller or larger by clicking and holding in the corner of the frame and then dragging. Because your "Constrain" button is checked, your size ratio will remain correct. When you have it right, click "Apply" and then "Done." Your information panel will show its still not the right pixel size.
  14. With the cropped photo highlighted, go to the "File" menu at the top of the iPhoto workspace and select "Export." Following the steps in Instruction 9 above, you'll choose "Custom" and then "Max" width and then fill in 760. Then click "Export" and save your new photo in your web_ready_photos folder and rename it if desired. In your Finder, navigate to that folder and look for your new banner. If all went as expected, you will see your photo as 760 x 260. Amazing!!

Now you have photos that are just right for your web site. Your pages will load fast with these slim little file sizes and you will feel powerful in being able to use your tools on hand to keep your web site content pretty, interesting and fresh.

More Tutorials

Kerry Shamblin Photography