Display Images in Your Coursework

You can display images in your questions, assignments, or announcements.

Prerequisites: Upload Images, Media, or Documents to My Folders

Alternatively, see:

Note Always use the file ID to reference a file uploaded to WebAssign. Using the ID ensures that WebAssign can locate the file even if you rename or move it.

Best Practice

Use one of the following image formats to ensure compatibility with all Web browsers: PNG, GIF, or JPG.
Keep the image dimensions smaller than 800 by 600 pixels to ensure that the image is displayed in the question without scrolling.

Tip To display a chemical structure drawing, consider using Marvin JS. See Display Chemical Structures in Questions with Marvin JS.

Open the question, assignment, or announcement in which you want to display your image file.

Open the My Files window.

From this page:	Do this:
Question Editor	Click My Files in the Page Tools panel.
Assignment Editor	Click Include File for the Instructions.
Communication Home	Click My Files to the left of your announcement text.

Navigate to the file you want to use and select its check box.

You can select more than one file.
For Paste location of file (selected below) as, select Image.

Set the display text for the image.

To do this	Do this
Use the existing display attributes	In Attributes, select use saved attributes.
Override the existing display attributes	In Attributes, select enter new attributes. Type the alternative text you want to be read by screen readers in both the alt tag and title fields. Screen readers might read the contents of the alt or title attributes of an image. To ensure that your content is accessible, provide the same information in both fields. Optional: Provide a link to a longer description of the content in the longdesc field.

To do this

Do this

Use the existing display attributes

In Attributes, select use saved attributes.

Override the existing display attributes

In Attributes, select enter new attributes.
Type the alternative text you want to be read by screen readers in both the alt tag and title fields.
Screen readers might read the contents of the alt or title attributes of an image. To ensure that your content is accessible, provide the same information in both fields.
Optional: Provide a link to a longer description of the content in the longdesc field.

Select where you want your file to be included.

In a:	Do this:
Question	For Destination Field, select Question, Answer, or Solution. Note You can include files or images in Answer only for multiple-choice or multiple-select questions.
Assignment	For Destination Field, select Instructions.
Announcement	For Destination Field, select Announcement.

Click go.

For each image to be displayed, a <userimage> tag is added to your content referencing the image's file ID and specifying any overrides to the display attributes.
Examples:
```
<userimage(12345)>
```
```
<userimage(23456, alt => "gingko leaf", title => "gingko leaf")>
```
Optional: If needed, cut and paste the <userimage> tag to the location where your image should be displayed.
Optional: Specify other attributes that are valid for the <img> tag in HTML — for example, align, height, width, or style — in the same way that the alt, title, and longdesc attributes are specified.
For example, the following code displays the image with a 2-pixel solid gray border:
```
<userimage(103854, style => "border: 2px solid gray;")>
```
The following code resizes the image to a width of 150 pixels:
```
<userimage(137884, width => "150")>
```
Tip Specify either height or width to resize the image, as the other dimension will adjust proportionately.