Tips and Tricks for Formatting Assessment Images

Overview

The following recommendations offer tips and examples for how to properly size images and graphic elements for assessments.

Top four tips for formatting images:

• Limit the file size to 512 KB
• Limit dimensions to no more than 700 px (width or height)
• Crop white space and text surrounding the image (some exceptions apply)
• Use alt text and ARIA labels (as needed) to ensure your assessment is accessible

There are many free tools available to help you quickly and easily format your images such as Pixlr, GIMP,  and PicResize. This screencast (2:38) will walk you through how to crop and resize an image for use in your assessments.

Read on for further details on formatting images as well as best practices for using images in your assessments.

Resizing and Formatting Images

Recommended image size varies greatly depending on where the image will appear in the assessment and how the image will be used (i.e. will learners be labeling a diagram, is the image mainly decorative, does the image contain detailed information the learners will need to interpret, etc.). Additionally, the layout of your learning path and how the Skillways content displays in the LMS might influence how you size your images. For example, if your screen real estate is somewhat limited, you may size images slightly smaller.

File Size

The maximum file size that can be uploaded to an assessment question is 512 KB. You will want to make sure your images and graphics do not exceed this file size.

Dimensions and Image Size

Try to keep your images to 700 pixels or less in width. When an assessment is designed to scroll vertically, height is less of a problem but should still be considered. 

Editing software such as Adobe Photoshop, or free alternatives such as GIMP and online options like Pixlr can be used to decrease image size.

As previously mentioned, file sizes should be 512 KB or smaller, but taking a moment to reduce file size wherever possible can make a big difference all along the asset delivery chain. Smaller images require less storage, reduce the strain on bandwidth, and display faster to the end user.

Start by converting your images to screen resolution. Reducing the resolution to 72 dpi can decrease the file size dramatically. If you want to take advantage of higher-resolution screens in modern devices, try 150 dpi to see if that substantially improves image quality but, typically, for assessment use, 72 dpi is preferred.

Suggested Sizes and Examples

The following are some suggested sizes for assessment images. Your original images will not always have the same aspect ratios as the recommended sizes noted below, so slight variations are fine and to be expected (to achieve consistency in your image sizes, you can use the crop tool in your preferred photo editor and set the dimensions in advance). In general, we recommend keeping your images in the range of 200 px - 300 px for small images, 400 px - 600 px for medium images and up to 700 px for larger images. 

• 700 px x 500 px (medium, portrait-display images )
• 500 px x 700 pm (medium, landscape-display images )
• 500 px x 350 px (medium, portrait-display images )
• 500 px x 350 px (medium, landscape-display images )
• 500 px x 500 px (medium, square or circular images)
• 200 px x 300 px (small, portrait-display images)
• 300 px x 200 px (small, landscape-display images)

Hotspot question with map of the United States sized 700 px by 425 px.

Cloze image with drop down question type showing diagram of the heart sized 500 px by 525 px.

Draw on Image question type showing diagram of the ear sized 500 px by 350 px.

Cropping Images

Images used in assessment questions should generally be free of text or instructions. White space around the image should also be limited to only what is needed to create the interactive components surrounding the image (i.e. drop down boxes or drop targets). Image editing tools provide options for cropping out unnecessary text and white space. 

Alt Text and ARIA Labels

Providing appropriate alt text and ARIA labels with your assessment images is critical to ensuring your assessments can be accessed by everyone.

Alt text is used by screen readers and also displays when images fail to load. Alt text should convey the meaning of the image and include any details needed for a learner to successfully complete the assessment. For more information on alt text, visit the WebAIM website.

In some cases, for complex or detailed images, a long description may be required to properly convey the details in the image. A long description can be provided in the assessment question below the image or linked to. For more information, review the complex images section of the WebAIM website.

Text entered in an ARIA label will help assistive technology (e.g. a screen reader) attach a label to the image for accessibility purposes. ARIA labels can be used to provide descriptions for response choices in an image question in an assessment. For example, ARIA labels can be added for each of the response areas on this drag and drop question to cue a learner with visual impairments into what those response boxes are pointing to in the image.

Example Aria Labels

• Trunk positioned to the left of the heart's main artery. 
• The heart's main artery located on the top.