Website Images

Telling Our Story Through Images

Photography plays a large role in our web content. Our web platforms increasingly rely on large, compelling, high quality imagery to tell our story online. We've put together this guide that includes placement, sizing and cropping recommendations to help you in the development, creation and formatting of your web content.

 

Image
College / Division Template
College and Division Template (Click to enlarge)

Dimensions

A site homepage layout typically contains a main static banner which can be part of a rotating slideshow, it also contains a "Featured News" component that inherits the banner graphic of the content it showcases, a video thumbnail (when video is used) and accordion header images.

Banners

All banners use 1920 x 530 size.

Featured News

The "Featured News" component inherits the article banner, the image is slightly cropped on the left and right side edges to fit in the content area. (No  need to create a new image for this component.)

Video Thumbnail

Located on the right sidebar, it uses 360 x 220 size.

Accordion

The accordion header image uses a 760 x 280 size.

Image
Interior Page Image Dimensions
Template used for all interior pages. (Click to enlarge)

An interior page may contain a left navigation and a right side column of content. Images can extend the full width of the content area or be left/right justified.  The content area (main column of content in the middle of the page uses 760 wide images that extend the full width of that content area. If smaller images are used, they should be half the width (380) of the content area and justified left or right.

Image
Article Template
Article page layout. (One column) (Click on enlarge)

An article page may only contain one column. Images can extend the full width of the content area at 840px. If images need to be smaller, they can use half that size at 420px and be left or right justified.