Using Images in Canvas

IMAGES, GRAPHICS & PICTURES

Pictures will be your central option for implementing creative and contrasting use of color and type, and it will be an integral part of your page and site layout. Images can be added to break up large section of text or to emphasis a point. Or, like on the home page of this class, added for course navigation. Images can be aligned to the left, to the right, or in the middle.

The four main visuals your will be adding to Canvas along with text content:

  • Images (photographs)

  • Pictures (illustrations)

  • Graphics (anything from info graphics to graphic design)

  • Tiles (square logos, headers, and title cards)

Pictures

Design Tip #1

Choose images from same family (illustrations, images, graphics), or apply the same effect to make your images feel cohesive (such as a background, color, and shape).

Design Tip #2

PNG - Yes / JPG - No

It is natural to have images and graphics respond dynamically to changes in screen or monitor size. For this reason, use .PNG file formats as much as possible.

JPEG file types compress your image data by reducing sections of the image to blocks of pixels.This compression is permanent and results in that pixelated appearance when scaling an image up to a larger size

PNG stands for Portable Network Graphics and is a good option for transparency and scaling. All images in this site are of the PNG file type. This file size can be a bit larger in size and is by no means scale proof, but ultimately, it is an excellent choice for internet graphics.

Design Tip #3

Always design for Universal Design. Make sure to mark your images as decorative. If it is not decorative, then make sure your Alt Text is completed with information for visually-impaired students. This step is completed when you upload an image into Canvas.

Banners

Banner images really tie the "room" together. To make your banner fit the entirety of the display area no matter the screen size, you will once again apply some nifty little HTML tricks.

  1. Add the banner image to the top of your page.

  2. Then click on the image and slightly adjust the size (smaller is probably better).

  3. Click on the HTML Editor in the rich content editor toolbar.

  4. In the very top line of HTML code, you will see values in the dimensions for width="xxx" height="xxx"

  5. Change width to 100% (width="100%" height="219")

  6. Save your changes

Tile Images

Images such as icons, profile pictures, header icons, and those used in titles should be square in size. It is recommended that you start with a 170 x 170 px, and adjust the sizing in the Canvas platform. You can use a platform like squoosh.app to compress large files and resize the scale of images.

CSLC Media Team Assistance with Images

The CSLC Media Team can provide assistance with image creation, selection, open source image searching, copyright information, and design guidance for all language faculty and teaching assistants. Contact Maureen Hogan (mhogan22@nd.edu) for assistance.