Use graphics purposefully and not just because they look good.
You can use graphics to enhance other content or serve as standalone instructional elements. They can provide valuable information, such as charts, photos, diagrams, examples. They can assist in navigation with the use of banners or provide visual cues to help orient the student to the course with the use of icons.
Benefits of graphics
- Navigation. Users locate information more quickly through visual clues.
- Understanding. Increase retention and make difficult information easy to understand.
- Models. Depict a concept visually to save time and increase effectiveness.
- Relationships. Connections between ideas or concepts are more easily understood with images.
Tips for adding graphics to your course
- Use simple graphics. Clean and simple is often the most effective. You do not want design overtaking content, nor do you want to increase download time unnecessarily. Avoid lengthy text and lots of numbers within the graphic.
- Avoid background images. Use a white or pale solid background with dark text instead of adding background images. High contrast between text and background is easier to read.
- Watch the file size. Large and numerous images may look great on your page, but they will frustrate users who must wait for images to load.
- Use the right format. You must save your pictures in a web-ready format. In general, use the PNG format for simple graphics, such as logos, charts, and drawings. The JPG format is usually better for photos and images with subtle shadings or gradients. The JPG format also allows for better compression of a file—a 1500 KB file can reduce to 150 KB—but this may reduce some image quality. Select the best format for better image quality and smaller file size.
- Crop photos. Cut out nonessential areas of an image to maximize impact and decrease download time.
- Use animated images sparingly. They can cause the screen, or parts of it, to flicker and change rapidly. Animations can detract from the accessibility and usability of a page. Moving images also cause problems for students with cognitive impairments and may be hard to interpret by students who have low vision.
- Provide alternative text using the ALT attribute. For detailed images like graphs or maps, use the long description attribute to provide more information. Screen readers and other text-to-speech software read the image’s alternative text aloud to the user.