Images

Banner Images

Each webpage can have a single, distinct image that is displayed as the main banner image across the top of the page. These images scale appropriately depending on device size, so small-screened phones only load a smaller, lower-resolution photo, whereas large monitors can load a full-size, high-resolution image.

Guidelines for Banner Images

  • landscape photos are preferred (at least 16:9, preferably 3:1)
  • photos where the main focus is near the center
  • photos of action or interest are more engaging

The only requirement is that these images must be placed in a folder with the path "img/hi-res". For example:

  • /admissions/img/hi-res/bigphoto1.jpg
  • /ccpa/graduate/img/hi-res/programs/bigphoto3.jpg

Example:

example of banner image property

Random Banner

Instead of having a single, distinct image on your webpage, you may select a random image from a folder. To do this, call the file “random.jpg” and place it within the “img/hi-res” folder. This will deliver a random image from the same directory the “random.jpg” is called from. For example:

  • /admissions/img/hi-res/random.jpg - displays a random photo from the “/admissions/img/hi-res” folder
  • /grad-school/img/hi-res/programs/random.jpg - displays a random photo from the “/grad-school/img/hi-res/programs” folder

This is an excellent way to replace the old slideshows that were often found on landing pages. This webpage uses this technique; simply refresh the page and the banner image will change.

Inline Images

When uploading images, create the image to be no larger than 800 pixels wide, and no larger than 100 KB in size. Refer to our image optimization guidelines for assistance. 

inline image

On smaller devices, these images will shrink to fit the width of the screen.

Slideshows

Slideshows have proven themselves to be a poor vehicle for promoting content. Evidence has repeatedly shown that users rarely click past the first slide or wait for the slide to advance. Slideshows also present accessibility concerns as they make it very difficult for non-sighted users to gain use. 

Due to these usability and accessibility concerns, the University's Web Team no longer supports slideshows on the website. Marketing of events or services on landing pages can be accomplished with hero images, please contact us for more details.

Photo Galleries

Many of the galleries posted throughout the years have quickly become out-dated and the images have been poorly managed. In recent years, a host of online image providers have allowed users to create, upload and maintain photos, most notably Facebook, Instagram and Flickr. Another distinct advantage is that these galleries are designed to be shared, increasing exposure and shareability.

Given the ease of access and level of service these providers offer, the University's Web Team no longer supports uploading of image galleries to the website.