Office of Web Services
How can I easily create many sizes of the same image?

If you have images that you would like to incorporate in your site, use these instructions to follow the recommendations of OWS.

  1. First, gather all of the images you’d like placed on the Web into a single folder on your computer.

  2. Rename your images to have Web-friendly file names. This includes having only lowercase letters and numbers and removing any spaces or dashes. It is also recommended that you use file names that are short but descriptive, so that you can easily identify your images. An example would be “2007_holiday_party.”

  3. Create three additional folders: “570,” “340” and “240.” These are the standard widths (in pixels) of the images you will create and use throughout your site.

  4. To begin, you will crop the images to cut out any unwanted parts or excessive background. You want your subject to be the most prominent part of the image. If it’s not, your subject may become illegible once you’ve shrunk the photo down to size.

  5. Next, you will sort your images manually based on how you think you’d like to use them. Open each image using Adobe Photoshop or an alternative image viewer and determine:
    1. if the subject has a portrait orientation or would be better used inline with the text wrapping around it (240).
    2. if the subject is landscape and will be used on a three column template, such as for your index page (340).
    3. if the subject is landscape and will be used on a two column template (570).
  6. Download the OWS Images Photoshop Actions file, and then double click it to load the actions set in Adobe Photoshop. If you cannot see the Actions menu, go to Window>Actions.

  7. In Adobe Photoshop, go to File>Automate>Batch. Under the “Play” options, specify the set as “OWS Images” and the action as “240.” Under the “Source” options, specify “Folder” and then click “Choose …” and navigate to the 240 folder you made in Step 2. Under the “Destination” menu, specify “Save and Close.”

    Batch

  8. Repeat step 6 for your 570 and 340 image folders as well, using the 570 and 340 actions, respectively.

  9. You’re all done! Upload the images to Cascade and begin using them throughout your site!

Note: These steps will replace your images completely. If you would like to keep copies of your original photos, begin step 1 by copying or duplicating the originals into the Web images folder instead of simply moving them there from their source.