Working with images
Images can add visual interest to a web page, help communicate or clarify an idea or concept or break up long sections of text.
Learn how to choose strong images and optimize them for the web.
Find step-by-step instructions on preparing and uploading images to Cascade (BrightSpace)
Choosing strong images
Persuasive pages (those with a storytelling or marketing purpose) need high-quality photography and/or video.
- strong images are visually interesting, engaging photos 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.
Also remember that your image will be viewed on screens of all different sizes, from large digital displays to small smartphone screens, so details around the outer edges of the image may be cut-off.
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.
Other images
Photos of real people and places are always the best option for your website. Try to avoid the use of generic stock photography where possible.
Custom graphics and illustrations work in specific contexts. Email the Senior Web Officer to discuss using custom graphics on your website.
Image 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.
- JPG files are allowed, but 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
- WebP files should also be optimized before uploading to Cascade
PNG files are generally too large for the web; we recommend avoiding them where possible.
Compressing image files
Compressing your image file helps it load faster. Photo editing software often adds hidden information to the file (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.
Image accessibility
Remember to follow accessibility best practices for images:
- avoid adding text directly to the image
- include alt text to describe the image for users who can't see it
- for complex images (graphs, maps, diagrams, etc) include a link to a longer text-based description that explains the essential information in the image