Template 4 image types

Image files

Brightspace: how to prepare your image files for the web

File types/formats

The most important consideration for images on the web is how they will affect the performance of a web page, particularly page speed. The more images on a page, the longer it takes for that page to load and more data the page consumes for mobile users.

PNG files are often too large for the web; we recommend avoiding them where possible
JPG and GIF files are better, but still must be optimized (cropped to sized and compressed) before uploading to your site
WebP is a newer image file format that uses a smaller file size without sacrificing the quality of the image

Compressing image files

Compressing your image file helps it load faster. Often photo software adds hidden information to the file--like metadata--which can bloat the size of the file.

After cropping, please compress your images before uploading to Cascade. We recommend using TinyJPG, a free web-based tool that reduces the overall size of your image files without sacrificing image quality.

Choosing strong images

Persuasive pages need high-quality photography and/or video.

Strong photos are visually interesting, engaging pictures that show UVic people and places in a positive light.

High-quality photographs are well composed, properly lit and sharp. They should also be in landscape orientation (wider than they are tall).

Keep in mind that certain image components have specific dimensions. Shoot a little wider than you might usually, and crop to size later.

Sourcing photos and video

avoid stock images if possible; choose real UVic people and places instead
organize a photo shoot through Photo Services, or browse the UVic image gallery
do not take images from the web. Unless you have permission from the creator or owner of the photo, it is illegal in most cases, for you to reuse it on your own site.

Card image

Required size: 1064x599 pixels
Usage: landing, campaign and persuasive pages
Text field character limits:
- Card header: 64 characters
- Card title: 64 characters
- Card body: limit to 1-2 sentences for optimal readability.
- CTA button label: 24 characters

Card header

Spaghetti noodles, fresh tomatoes and basil on a wooden table.

Card title

Card body text goes here.

Card header 2

Card title 2

A sample card with no feature image.

Dashboard cards

Can support an SVG, PNG graphic or a Lottie animation vector file. Can be stacked to mimic an info graphic style layout, with the graphics appearing to the right or left of the text on desktop. Or can stack graphic above text on mobile.

30+ years dedicated to climate action

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.

Equity Action Plan

Ut asperiores esse in eius voluptates et iure aliquam qui recusandae corrupti id tempore doloribus in soluta unde. Aperiam, eaque ipsa quae ab illo inventore qui recusandae corrupti id.

New research chair

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.

Required size: 1440x810 pixels
Usage: landing, campaign and persuasive pages
Text field character limits:
- Card title: 64 characters
- Card body: limit to 1-2 sentences for optimal readability
- CTA button label: 24 characters

Content main image

Required size: 1440x810 pixels
Usage: content pages

Ingredients for making spaghetti on a wooden table — Optional caption field for content and persuasive hero images.

Landing page hero (jumbotron)

Required size: 3600x2025 pixels
Usage: landing pages (including site homepage)

Optional text overlay

Headline: max. 24 characters
Short description: max. 80 characters
Button label: max. 24 characters
- Can link to internal or external page
- Can include URL parameters or anchors