TWU ID wiki / Course Images

TWU Blogs

Enhancing Your Course with Images

Graphics can enhance content or serve as stand-alone instructional elements; they can provide valuable information (charts, photos, diagrams, examples), assist in navigation (banners), and/or provide visual cues (icons) to help orient the student to the course.

Well-designed presentation graphics can help students to:

Interpret difficult to understand information
Focus attention on the explainable information in the text
Form visual mental models of the materials explained by the text
Better understand the relationship between ideas and/or concepts

When creating course pages for the first few times, it is very easy to allow yourself to fall victim to the idea of using large fancy graphics to spruce up your web page. Subtle backgrounds and meaningful animations can effectively enhance your pages, but be careful! Backgrounds can overwhelm the text, while animations often overwhelm viewers. The following are some basic rules of thumb that should be followed whenever adding images to your pages.

Graphic Tips.

Use the Right Format. You must save your pictures in a web-ready format. Use the JPG or PNG format for photographs and the GIF format for charts, line drawings, logos, and most clip art. Selecting the best format will result in both better image quality and smaller file size.

Be Careful with Animations. Animations can be extremely effective in demonstrating concepts and principles, but are often over-used. Be sure the animations do not distract from the material.

Avoid Background Images. Stick with a white or very pale solid background with dark text, rather than adding background images. High contrast between text and background is easier to read.

File Formats.

You can choose between three file formats for graphics: Beginning web designers often ask which file format is best? The answer is ... it depends. Each format is best suited for different types of graphics. In general, use the .gif format for simple graphics, such as logos, charts, and drawings. The .jpg or .pgn format is usually better for photos and images with subtle shadings or gradients. The .jpg format also allows for better compression of file size (a 1500 kb file can reduce to 150 kb) but this may be at the cost of some image quality.

File Size.

Large and numerous images may look great on a high-end computer, but they will frustrate users who must wait for images to be sent over the network. A general rule of thumb is that the file size for all pictures on a single web page should add up to less than 30 Kb. This may be unrealistic for instructional content. If possible, add a thumbnail image to the main content page with a clickable link to the larger image on a separate page. An added consideration is to list the file size next to the link so views will be aware of the download time.

You can reduce file size by:

• Reducing the height and width of the image

• Cropping extraneous areas out of the picture

• Compressing images (JPG format only)

• Selecting the appropriate format

Image Dimensions.

In the example below, 24 is the width of the image and 36 is the height of the image in pixels. Normally, your web browser has to determine these dimensions as it reads in the image; the loading of your page may be faster if you specify these numbers in your HTML.

When making images smaller, be sure to resize your graphics in an imaging program. If you just resize them in your HTML authoring program, they will look smaller since the height and width attributes will be adjusted, but the file size will remain as large as ever. The maximum size of a graphic without needing to scroll within the main frame for Blackboard content is approximately 600 pixels across by 400 pixels down on a 600 by 800 resolution monitor.

The Alt Tag.

The alt tag provides alternative information to images that can be read by text-based browsers. Although the alt tag is particularly crucial for visually impaired learners, it also allows students on slower modems to see an image's description or label while they wait for it to load.

In the example above, the words in quotes after alt = are what appears while an image loads, when a user places their mouse over an image, and what a screen reader would use. Most HTML programs allow you to easily add the alt description; some even automatically use the image file name by default.

For more detailed information on the nuances of writing effective ALT descriptions, see http://www.arizona.edu/uaweb/accessible/alt-tags.php

Back to Designing Your Course