Images can be used in most our course interactives, but image orientation and size play a big part in determining how many and what size. In general, we want to keep the interactive element on the screen, with little to no scrolling, so the student can focus on the requested task and not lose their place while scrolling.

Below is a basic reference guide for using images within our most commonly requested interactives. It outlines the ideal image orientation for each interactive type, the typical display size range, and the minimum image size range, as well as any additional tips or notes on image use for the requested interactive. Additionally, each interactive type is linked to its respective page in the Guidelines for Using Interactives resource in case you would like to see examples of each interactive type.

Interactive	Orientation	Display Size	Image Size
Accordion Tab Set	B, H, S	B:700-1200px H: 350-700px S: 150-500px	B:1400-2400px H: 700-1400px S: 300-1000px
Use the grid system to maximize layout of image with text. Students should not have to scroll to see the content on each tab. Larger or more detailed images can utilize a lightbox.
Flashcards	Any	300-700px	600-1400px
If larger or more detailed images are needed, consider an alternate interactive.
Flip-Boxes	Any	200-600px	400-1200px
Flip boxes are often displayed side by side so images should all be the same size and orientation for unity.
Hidden Answer Buttons	Any	250-700px	500-1400px
Use the grid system to maximize layout of image with text.
Horizontal Tab Set	Any	250-900px	500-1800px
Use the grid system to maximize layout of image with text.
Interactive Table	H, S	H: 250-500px S: 150-300px	H: 500-1000px S: 300-600px
Images will display at smaller sizes to minimize page scrolling. If larger or more detailed images are needed, consider an alternate interactive.
Lightboxes	Any	300-1000px	600-2000px
Lightboxes are often displayed side by side so images should all be the same size and orientation for unity. The display image and the revealed image can be different.
Matching	B, H, S	B: 200-400px H: 150-300px S: 100-200px	B: 400-800px H: 300-600px S: 200-400px
Images will display at smaller sizes to minimize page scrolling. If larger or more detailed images are needed, consider an alternate interactive. All images should be the same size and orientation.
Mismatch	Q: Any A: H, V, S	Question 250-650px Answers H: 150-300px V: 100-200px S: 100-300px	Question 500-1300px Answers H: 300-600px V: 200-400px S: 200-600px
Question Portion Images in this section can be any orientation, but B, H & S are best for maximizing horizontal space. Questions are center aligned. Answer Selections Images used as answer selections will display side-by-side and should be the same orientation and size. Images will display at smaller sizes to minimize page scrolling. If larger or more detailed images are needed, consider an alternate interactive.
Multiple Choice	B, H, S	B: 300-700px H: 250-600px S: 150-400px	B: 600-1400px H: 500-1200px S: 300-800px
Question and Answers are displayed left-aligned. Images should be aligned to the left for readability. Groups of items in answer selections should be visible contained with a border, so students can easily distinguish each individual group of items.
Open-Ended Question (FRQ)	B, H, S	B: 350-850px H: 250-600px S: 200-450px	B: 700-1700px H: 500-1200px S: 400-900px
In development, images need to be contained in the question element with the class “header” so they display on the review screen.
Ordering	B, H, S	B: 200-400px H: 150-300px S: 100-200px	B: 400-800px H: 300-600px S: 200-400px
Images will display at smaller sizes to minimize page scrolling. If larger or more detailed images are needed, consider an alternate interactive.
Slideshow	H, V, S	H: 300-650 V: 150-400 S: 150-600	H: 600-700 V: 300-800 S: 300-1200
Horizontal space is limited on each slide. Scrolling should be kept to a minimum when viewing slide content. If more than two images are requested with other instructional text and/or reveal buttons, consider a tab set in place of a slideshow. Larger or more detailed images can utilize a lightbox.
Vertical Tab Set	H, V, S	H: 250-750 V: 150-400 S: 200-500	H: 500-1500 V: 300-800 S: 400-1000
Use the grid system to maximize layout of image with text. Larger or more detailed images can utilize a lightbox.

Note: Just as we need to consider image size for retina display devices, we also need to be mindful of image size regarding page load times. Excessively large images and graphics will be slow to display when the page loads on the screen. Apart from banner images, your images should be no larger than 2000px wide. (Most will probably be closer to 1200px.)