Editing Images

All images used on A&S web pages should be internal images: they should be images that are in Cascade. For copyright reasons, before you upload a new image into Cascade, be sure that you have permission to use the image. All images taken for W&M by the university photographer are free for us to use. You can find the images on Flickr, or contact the photographer to ask for photos they may have in their database. Advancement's Canto image database is also available to us. You can also take your own, or ask others in your unit for pictures they have taken.

Please do not use images you download from websites peddling "free" stock images. You cannot be sure of the copyright status of any of these.

After you've resized your images, you can then upload them into Cascade. Make sure that you keep them organized so you or others can find them easily.

Why Resize

Always edit and resize images before uploading them to Cascade. The content area of a standard content page is just over 800 pixels wide. It is rare to need an image larger than that. Original images tend to be very large - way bigger than is useful on a web page. While you can upload these large images and place them on web pages, this is not a good practice. When you resize an image on a page, a user has to download the full-sized image that their browser then shrinks to fit. Large images have large file sizes: they can take longer to download, and if a person has limited data, they'll have to pay for every extra pixel.

Also - some types of images like thumbnail pictures, widget images, etc have required dimensions. If you don't stick to those sizes, the image will be skewed on the page. Web & Design has a handy chart showing the recommended sizes of different images.

What Software to Use

You can do some basic image resizing using Cascade, but please don't. Cascade keeps a record of every version of an image. This takes up a lot of storage space on our servers. There are several options for editing images. Two that are recommended by Web & Design are Photoshop and Pixlr. Photoshop is considered to be a gold standard for working with images. Contact IT if you want access to Photoshop. Pixlr is a free web app.

Editing Directory Photos (making an image square)

Photos are an important part of directory pages. We recommend that Arts & Sciences directory pages use photos that are 200-300 pixels square. When you use a square photo of this size for the primary photo, you can use the same image as the thumbnail. This makes the creation and maintenance of directory pages a lot easier.

There are two basic methods for making a square image

Crop if the subject you want is only a small portion of the original image.
Resize or change the Canvas size if the subject you want takes up the entire image, but the original image is rectangular.

{{youtube:medium:center|7Ee2rO4eH8Y, Using Pixlr to make a square Directory Photo using the crop tool.}}

{{youtube:medium:center|w2o-u4QAdmc, Using Pixlr to make a square Directory Photo using the resize tool.}}

{{youtube:medium:center|HfXpmEp0dCw, Using Photoshop to make a square Directory Photo}}

Other types of Images

Web & Design has created pages describing the requirements for specialized images that are used on the W&M site.

{{youtube:medium:center|c1nwH42Tk4Y, Using Photoshop's crop, resize and canvas tools to size an image for a widget.}}