Adding & Resizing Images

Images in RCE

The Canvas Rich Content Editor allows you to add images to your Pages, Assignments, Quizzes, or Discussions. These are the image file types you can use:

• JPEG - Joint Photographic Experts Group.
• PNG - Portable Network Graphics.
• SVG - Scalable Vector Graphics.
• BMP - Windows Bitmap.
• GIF - Graphics Interchange Format.

To add an image:

1. Click Edit on a Page, Assignment, etc.
   The Rich Content Editor will appear.
2. Click the Images icon to upload a new image. Click the small down arrow next to the Images icon and select Course or User to add images previously uploaded to the course or your personal image files.
   
   
   
   
3. Click in the Upload Image box to navigate to a file on your computer, or drag and drop an image onto it.
   
   
   
   
4. Scroll down and enter the Alt Text description.
   Make sure Embed Image is checked. If the image does not require an Alt Text description check the Decorative Image box.
   
   
   
   
5. Click Submit.
   The image will be displayed on your page.
   

** The RCE now includes the option to drag and drop images into it as well (GIF below) as well as the option to copy and paste from the anywhere.

While you can easily download any image from the Internet and add it to your course, we do need to be mindful of violating the artist's copyrights. See Copyright and Fair Use for more details.

Alternative Text on Images

Alternative text is a textual substitute for non-text content in web pages. Usually we add it to images, but its principles also apply to multimedia and other non-text content. Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.

Alternative text can be presented in two ways:

• within the alt attribute of the image element
• within visible body text near the image

The alt text should not be the name of the image file or begin with “image of” or “picture of” as it’s not considered descriptive.

Additional Resources

Canvas Guide - How do I manage alt text and display options for images?

Alternative Text Introduction - WebAIM

Resizing Images

You can change the size of embedded images. Canvas also provides a way to make your images automatically grow and shrink as you resize the browser window. This is called responsive formatting, as the page responds to the size of the window. This especially helps images look good on mobile platforms.

1. Add an image to a page, assignment, or quiz question using the Rich Text Editor.
2. Click once on the image.
   The Image Options button appears.
   
3. Click Image Options.
   The Image Options panel appears.
   
   
   
   
4. Set the Size to Custom.
5. For a fixed size select Pixels and enter a number in the first field (width). The second field (height) will be adjusted automatically so the image does not look stretched in either dimension.
   
6. Select Percentage for responsive formatting and enter a percentage.
   100% will make the image display at full size by default, but it will still adjust as the browser window is re-sized. Smaller percentages will make the image take up that much of the screen width. Experiment to see what works best for your layout.
   

Here is an image set to 100 %. Make your browser window bigger and smaller to see how the picture adjusts.