Image sizes
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 .
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.