Uploading Images In A Question Using The Rich Text Toolbar

Images can be easily inserted as content using the question editor. Images can be uploaded in the question as part of the stimulus or as possible responses. There are also a number of image Question Types including Image Drag & Drop, Image Drop Down, Label Image, and Hotspot.

Image files can be uploaded in JPEG, PNG, GIF, and SVG format. Images must be less than 500KB. The recommended maximum width of the image is about 700px. If your image exceeds the width of the content container, it will get scaled down automatically to fit within the container.

Uploading an Image as Content

You can easily add an image to a Question with the add Image tool on the Rich Text Editor. When you click within a text field in a Question, the Rich Text Editor will pop up. Select the Add Image tool on the toolbar as seen in Figure 1.

Figure 1: Image tool on the Rich Text Editor panel.

You can upload images directly by dragging your image from your computer to the Drag & Drop area or click to choose a file from your computer, as seen in Figure 2. You can also embed an image hosted elsewhere on the web, by pasting the URL into the Source URL area in the more options section.

Figure 2: Uploading an image.

When uploading or embedding an image, you can add Alternative Text and specify Image Properties such as Alignment, Height, and Width.

Figure 3: Adding Alt text and adjust image properties such as width, height, and alignment.

Alternative text is an alternative source of information  to increase access for users who have chosen to disable images or those who have network issues. Alternative text will appear if an image cannot be displayed to users and should describe what the image is about.

Click OK when you are done.

Resizing

Hovering the cursor over the image in the Question Editor will display an Edit button. Clicking on this re-opens the pop up to change Alternative text, and Alignment, as well as the image Width and Height.

To quickly resize an image, click on the image in the Question Editor. Small white boxes will appear on each corner of the image; click and drag these boxes to resize the image.

Figure 4: Quickly resize an image with click and drag.

Optimization Tips

Optimizing images can go a long way to improve an assessment experience. Optimized images will load faster, improve usability on small screens, and be useful to a wider audience. Optimizations typically fall into four main categories.

Dimensions

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. For example, it's best to try to design your image-based questions to minimize scrolling. This can be especially important if you are reusing a fixed height to deliver assessments. Rather than scrolling the assessment vertically, Skillways will attempt, wherever possible, to scale your image to fit the width of a content container. But this can reduce clarity and the excess file size (in KB) becomes an unnecessary cost.

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

Image Size

As previously mentioned, file sizes should be 500 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 (particularly important when schools are limited in this area), and display faster to the end user.

Start by converting your images to screen resolution. Images that are scanned or captured with a camera are 300 dpi (dots per inch) or larger, optimized for higher quality prints. But this file size is wasted on the typical screens in use at schools today. 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.

Next, reduce an image's bit depth where possible. Depending on how images are captured, they can sometimes have lots of unneeded additional information. 32-bit images can be reduced to 16-bit with no reduction in quality, effectively cutting file size in half. If transparent areas of an image are required, they can still be reduced to 24-bit, gaining a file size reduction that is still significant.

Then experiment with compression to see how small you can make an image's file size. If transparency is required, use the PNG image format. This will reduce any artifacts that might appear in other transparency-capable formats, such as GIF. If no transparency is needed, JPEG is best for continuous-tone images, such as gradients and photographs. GIF can be effective when large areas of solid colors are present. Pick a trial image that is representative of your content and see which compression and file format suit the material.

Finally, you'd be surprised how much additional, unneeded information can make its way into an image. Things like file previews (for showing an image in thumbnail view on a desktop) and metadata (information used by cameras or asset management systems) are often injected. Most image editing software can trim that material for you. Photoshop's Save For Web feature bundles much of these techniques into one dialog and is always better for this purpose than the native Save option.

Best of all, software designed specifically for optimizing file size can not only remove this extra information but can use proprietary algorithms to improve image compression. The always-impressive TinyPNG is a free online service (with commercial enterprise options when lots of image processing is needed) that often dramatically reduces the file size of both PNG and JPG image file format, with no discernable reduction in visual quality.

Image Content (Whitespace)

Be careful of white space around images that you are uploading to Items or Questions. White space can affect the way the Item or Question behaves and appears onscreen.

Equally, too little white space can cause problems for the authors creating the question. It is recommended that the appropriate amount of whitespace is included on the image. With the aim to reduce student scrolling and allow the author to create the question appropriately. Images can be easily manipulated by using photo editing software such as Adobe Photoshop, Gimp or even Paint.

Accessibility

Keep in mind that some users may face disabilities such as poor eyesight or color blindness. Increasing contrast can make it easier for many users to get the most from your images. Avoid relying solely on common color-blindness colors such as green and red for visual feedback. For example, when indicating "good" and "bad" elements in an image, instead of just using green and red, add iconographic indicators as well, such as a checkmark and x/cross. Similarly, affected users can find it difficult to pick out red in a field of black. 

Always include alt text in your images to enhance accessibility for all users. This is especially important if your image displays critical information that learners must interpret in order to answer a question correctly.