Editing Images for Web

If you have access to Photoshop (or a similar program like Fireworks), it is the ideal program to use to edit and publish images for web. Open the original image, change the image size and/or use the crop tool to adjust your image to a size and dimension appropriate for the web. Click "Save for Web & Devices", select the JPG High preset, and adjust the Quality if the image is too blurry and/or if the estimated size is too big for Cascade to accept. Save the file as a new file, possibly with a "-web" in the name to differentiate your new image from the original image.

Here are our directions for editing a large image into a 1000x500 image under 130K:

• Open Photoshop
• Open large image
• Click the crop button and set the width and height to 1000 px and 500 px.
  
• Create crop area on your image. Hit "return" or "enter" to complete crop.
• Export by going to File -> Save for Web & Devices.
• Select the present "JPEG High" which should have the quality of 60. Make sure the image looks undistorted and unpixelated.
• On the bottom left of the window, you should see a file size listed, eg: 122.52K. Make sure the size is below 130K. If it isn't, reduce the quality until it is.
• Click "Save" and name your new cropped image.
• Upload photo to Cascade.

For those without Photoshop, we suggest using Pixlr Express to edit your images for web. Pixlr Express is a web application that can be accessed on most modern browsers (not IE 6). The gist of Pixlr Express is: you upload an image, you edit that image, then you save it back to your desktop.

Here are our directions for editing a large image into a 1000x500 image under 130K:

• Visit Pixlr Express at pixlr.com/express
• Click "Browse" and open the image you want to add to a webpage.
• Click "Adjustment" and then "Resize"
  a. Change the width to 1000. If the height is shown to be below 500, change the height to 500 instead.
  b. Click "Apply"
• Under "Adjustment" click "Crop"
  a. Change the width to 1000 and the height to 500.
  b. Drag the box on the photo to adjust what the new image will look like.
  c. Click "Apply"
• Click "Save"
  a. Change name so not to overwrite your original image. Suggestion: append "-web" to differentiate from your original image.
  b. Move the Quality bar until the image is below 130 KB.
  c. Click "Save" again.
  d. Save to a location on your desktop.
• Upload photo to Cascade.

For those who have trouble with getting images to the right dimensions, size, and quality, we have created an additional tool: The Image Maker.

Visit the maker and upload the image you want edited. It then produces 4 potential results. If one looks good, click on it, and it will request it be downloaded back to your computer.

Benefits: it's quick and you can get results with as-little-as one click. Detriments: the image has to be less than 8MB, so if your images are huge, you may have to do some image editing anyways. Also, although it gives 4 images, those suggestions may not give you an ideal image (this is especially true when uploading a vertical image and expecting a high-quality horizontal image).

When you upload a new photo into Cascade, it also opens and editor that allows you to do simple changes to a photo. You can resize, crop, flip, and rotate your image. Ideally, this is all you would need to edit but we've run into a few issues with the editor, so we currently recommend Photoshop and Pixlr Express over their editor. An notable issue is how the image quality changes to 100% when you submit a change from the image editor. This will often maxing-out the file size limit. We have set image file size limits for our Cascade sites to keep the site running quickly.  Eg. we uploaded 9 KB jpg at 50% quality, cropped it smaller, and it submitted to Cascade as a 24 KB jpg.

If all else fails, we can edit your image.

Sometimes a 2:1 ratio image doesn't look great for all images. You can contact us and ask for help, or search your archives (or ask Marketing) for better images to use. Or try these solutions:

For faculty staff photos:

Upload via our 135x177 asset factory. Just remember to crop the image to 135x177 and maintain proportions before uploading.

For logos:

Some logos are not 2:1. If the logo is on a white background, use this either the 1000x500 blank image, or 400x200 blank image as a base template.

For those using Pixlr Express:

• Visit Pixlr Express at pixlr.com/express
• Click "Open URL" and type in the URL of the blank image you are using as your base template.
• Click "Adjustment" and select "Add image"
• Click "Browse" and select the logo from your computer.
• Drag your image so that it is centered
• Click and drag the bottom or right circles to increase/decrease the logo size.
• Click "Apply"
• Click "Save"
  a. Change name so not to overwrite your original image. Suggestion: append "-web" to differentiate from your original image.
  b. Move the Quality bar until the image size is small enough to be accepted by the upload asset factory.
  c. Click "Save" again.
  d. Save to a location on your desktop.
• Upload photo to Cascade.

For those using Photoshop:
(The following is to upload a logo at 1000x500. If you want to upload a 400x200 instead, just replace all "1000" mentioned with "400" and all "500" mentioned with "200.")

• Open logo in Photoshop
• Use the dropdown "Image -> Image Size..."
• Change either the width to "1000." If the Height is changed to above "500" change the Height to "500" instead. Click "OK"
• Use the dropdown "Image -> Canvas Size"
• Change the pixel size of the canvas to "1000" width by "500" height.
• Under extension color, make sure the color is "white".  If the background of the logo is not white, you can click the color box and use the eye dropper to select the correct background color.
• Export by going to File -> Save for Web & Devices.
• Select the present "JPEG High" which should have the quality of 60. Make sure the image looks undistorted and unpixelated.
• On the bottom left of the window, you should see a file size listed, eg: 122.52K. Make sure the size is below 130K. If it isn't, reduce the quality until it is.
• Click "Save" and name your new cropped image.
• Upload photo to Cascade.