Using high-quality images can illuminate course content and create visual interest. Don't forget, our graphic designer is a great resource to help you identify or create good quality images. We would also encourage you to request the creation of a design board for your course to enhance the overall visual accessibility. Figure 1 is one example created for the newly designed Online Master of Business Administration (OMBA) program.

example of a course design board — Figure 1. Example of a Design Board

When selecting images, keep in mind that there are both good and bad ways to use an image on a page. In some instances, it would be better not to use an image at all. Let's explore each method.

Good Use of Images

Do use an image if the image is

informational: flow charts, maps, diagrams, and so on
affective: pictures used to set mood, like people, animals, comics
decorative: backgrounds, borders, dividers, and so on (Note: Make sure they do not distract from the content!)

Bad Use of Images

Don't use images of

tables: Use the HTML <table/> element instead.
lists: Use the HTML <ol/> , <ul/> , or <dl/> elements instead.
text: Use HTML instead (unless it's an infographic).
math: Use MathML <math/> instead.

Text Is Sometimes Better Than an Image

There are many reasons for not using images of content that could be text:

Text enlarges well.
Text is searchable.
Text can be copied and pasted.
Text loads faster and uses less data.
Text is readable by those using assistive technology.

Examples of When Text Is Better

Table Example

Figure 2 is an image of a table, which is not good because the accessible version of this content is an actual table. When you can, you want to provide one format that works for everyone.

Image of a Table — Figure 2. Table as Image

Table 1 is an HTML table that can be read by everyone, including screen reader users. This is a better choice.

Table 1. Organizational Planning
Level	Characteristic	Length of Plan
Corporate	Developed by top management and identifies the long-term direction of the entire organization	5+ years (look to future)
Business	Developed by mid-management and sets the long-term direction of a company division which meshes with the corporate plan	1–5 years
Functional	Developed by lower level management and shows how each function (production, accounting, and so forth) will operate to achieve the goals of the division	< 1 year

List Example

The image of a list (Figure 3) is better as an actual list.

Image of a List — Figure 3. List as Image

The list can be styled visually so that it looks better than the image.

A receptionist's job description may look something like this:
Answer the telephone, including screening and directing calls to the appropriate department or person.
Take messages for those employees who did not answer.
Greet all visitors to the building.
Make visitors comfortable by offering beverages while they wait.
Provide directions to visitors.
Maintain the reception areas by straightening chairs and putting magazines away.
Answer general questions from the public.
Provide clerical support to other business areas when necessary.
Receive and sort mail and other deliveries for distribution to the addressee.
Schedule appointments for staff members.
Organize meetings, including room scheduling and setup.

Image of Text Example

Images of quotes can add visual interest, but when those are used to emphasize key points, people who can't see the image will be at a disadvantage. To draw attention to text, it is better to use a color box with real page text.

Image of quoted text — Figure 4. Text as Image

"No amount of time can erase the memory of a good cat, and no amount of masking tape can ever totally remove his fur from your couch."
-Leo Dworken

Math Example

Figure 5 is an image of math, and it is much better to use MathML instead. See the Math module for more information on creating math code.

Image of quadratic formula — Figure 5. Math as Image

Math as code.

The Quadratic Formula

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

Updated February, 2020