Staff Guide: Images

Images

Finding images and adding them to Canvas pages can be confusing. First, there is the actual process of adding the image, secondly, there is complying with copyright and accessibility standards. In this guide, we present a simple method that meets both of these.

There are essentially two types of images that you may be adding to canvas.

  • The first is a decorative image which is there simply to brighten up the page and make it more engaging. as this is not conveying important instructional information there is no need for you to provide alternative text. simply follow the guide below to identify this image as decorative.
  • The second is using an informational image. In this case you must add alternative text to help those with visual impairment to understand the information you are trying to convey through the image. Follow the guides below that will help you add alternative text.

This is the Canvas image editor

image editor showing the option ofr alt text and decorative image
The Alt text field [1], type a description of the image contents. To add the image as decorative, click the Decorative image checkbox [2]. If the Decorative Image checkbox is selected, the alternative text field is grayed out and is not required.

The following is the process for adding a images to Canvas. It uses wikimedia website which provides images that you can use as long as you follow the process below.

  1. Go to Commons Wikimedia
  2. Search for an image. 
  3. Click on the link for the image when you have found one.
  4. On the new page select ‘Use this file on the web’
    Sreenshot showing wikimedia image and the options for that image, including 'use this file on the web'.
  5. In the popup, select the Copy the ‘File URL’ not the ‘Page URL’

    Wikimedia Image 'use this file on the web' option. Copy the 'file url'.

  6. Go to the Canvas Page where you want the image
  7. Click ‘Edit’ to edit the page
  8. Select where you want the image to appear with the cursor
  9. Click on the ‘embed image’ icon. 

Text Editor in Canvas courses, select the upload image icon

  1. Paste the image url into the image source URL.

Accessibility and Copyright

  1. Select the image and then select 'image' to either mark the image as 'decorative' or add alternative text if the image conveys information.
  2. Add the image attribution by accessing the wikimedia page for this image and copy the attribution information in the text box.
  3. Paste this at the bottom of the canvas page. 
  4. Save the page.

This image is now attributed to its creator and any screen reading software will ignore the image because you have said it is a decorative image.

Images file size and associated problems

This section provides information if you want to upload your own image.

There are various reasons why images should be compressed: First of all uncompressed images take up more space wherever you choose to store them e.g. M: drive or ‘My Content’ within your e-Portfolio. Secondly, if uncompressed images are accessed from the web as in the case of the e-Portfolio, it will take the web page longer to load. Choose one of these methods to compress your images.

The guides in this section explain how to decrease the resolution and thus the size of your images (in Mb). When Images are scanned in, the digital versions of items are often scanned in using the highest resolution. This means that the size of the images in Mb/KB are also high. Images should ideally be no larger than 50KB and be in the .jpg format.

Make sure your alt text or select the decorative image button depending on the type of image it is (see process above).

Images Re-Sizing

You can re-size images by dragging the image inwards, but the image can become distorted. In the guides section, you will find help on how to effectively re-size your images.

PDF Guides

Also See

 

Skip to content