Image sizes

Image sizes for CMS components
Component name Image size DPI Approximate file size
after compression
Banner 1200 x 500 72 175 kb
Callout 1200 x 500 72 175 kb
CTA with Image 800 x 450 72 120 kb
Content Block 586 x 440 72 100 kb
Form Panel 1200 x 400 72 150 kb
Hero 1920 x 1080 72 485 kb
Photo Gallery (standard) 1200 x 900 72 315 kb
Photo Gallery (full-width) 1920 x 1440 72 630 kb
Profile 640 x 640 72 160 kb
Profile Background Image 1920 x 1080 72 485 kb
Quote 640 x 640 72 160 kb
Image Tiles 640 x 640 72 160 kb
Overlay Tiles 640 x 640 72 160 kb
Video Gallery 328 x 214 72 40 kb

Asset best practices

Have a reason for your image. Do not select any image from Flickr and place it at the top of your page because you think the page needs a visual element. Images should enhance and complement the content. Are you using an image to break-up text or tell a story? Are you using the image just because the page feels empty without one?

Avoid stock images. As related the tip above, don’t use stock images on the University website. Instead, grab an image from our vast image library of Flickr.

Use .png formats for logos.

Use .jpeg for all images.

Include appropriate alt-text. Alt-text is required on all images on our website. They should be relevant and describe the image accurately and succinctly.

Naming assets

Use approved characters in file names. Use hyphens to separate words and do not add underscores or any other punctuation in your asset names. 

Approved characters: Alphanumerics [0-9 and lowercase a-z], as well as hyphens, are approved for use in URL strings.

Non-approved characters: The following are non-approved characters including the following (including blank spaces, which are replaced with percent (%) symbols by the CMS):

$ & + , / : ; = ? @ < > # “ % ( ) | [ ] { } \ ^ ~ ^

User lowercase formatting. Whether saving an image in Adobe Photoshop or a data table in Excel, use lowercase styling to save your file. 

Use descriptive file names for images. Like the name of a web page, the name of your asset is just as important. For images, avoid using non-descriptive file names such as "IMG_3422ab.jpg." Instead, use a short, descriptive name that accurately identifies your image subject matter.

Better examples would be "knowledge-center-hero.jpg" or "student-union-evening.jpg."

Consider how you name documents. Whether the document is regularly updated or not, its name should be descriptive and easy for users to understand. Because the CMS offers version updates, there is no reason to upload multiple versions of the same document year-after-year. Doing so leads to the CMS being cluttered with thousands of unused documents. 

For example, if a department has an annual report, the file name could be as follows:

"english department annual report.pdf" -- which becomes "english-department-annual-report.pdf" in the CMS. 

When publishing, using the year or date of the file in the body copy, anchor link, or header are ways to ensure users know which version of the document they are downloading.