Introduction
Whether you are using the Learnosity Author site or the embedded Author API, images can be easily inserted as content. 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 Label image with drag & drop, Label image with drop down, Label image with text, Label image with math, Hotspot or Drawing available.
Note: images cannot be added directly to an Item.
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.
Note: Clients who have embedded the Question Editor API into their own CMS are responsible for hosting images in their own Digital Asset Management tool.
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 are 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.
Click OK when you are done.
Accessibility
Alternative text is a text substitute for non-text content like images. Screen readers announce alternative text in place of images and if an image fails to load or has been blocked the alternative text will be shown in its place.
Starting with v2024.3.LTS, alternative text will be automatically generated with AI if using the Learnosity Author site. The text should be reviewed and can be edited as needed before saving the image. When editing an existing image, you have the option to re-write the alternative text with AI. The autogeneration behavior or the AI feature in its entirety in Author site can be disabled by contacting Support. To enable this feature in Author API, customers should reach out to their Customer Success Manager for more information.
Also, 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 color alone 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 icons.
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.
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, such as when using Learnosity's Assess UI. Rather than scrolling the assessment vertically, Learnosity 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. The Learnosity Author Site can help test your results by simulating how Items will appear across multiple devices.
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 Microsoft Paint.
Image Source
It is highly recommended to use images that are uploaded using the steps above or hosted from your own servers. Images loaded in this manner can be served more efficiently from a browser and benefits from faster loading times as images uploaded to Learnosity will be served from our CDN.
Learnosity does not support embedded images using Data URLs and only supports externally hosted images. Data URLs will always slow down performance significantly because unlike externally hosted images, they cannot be loaded in parallel or served by a CDN as the rest of the page loads. In some cases, images loaded using Data URLs can cause problems and prevent the assessment from being loaded in the assessment player or can prevent reports from rendering correctly.
When authoring your content, images containing Data URLs may appear when copying and pasting images that have been embedded inline from another document such as from Microsoft Word or Google Docs, as opposed to the supported method of uploading and hosting the image with Learnosity as detailed above.
Image upload for learners
Looking for instructions on enabling learners to upload images in the Essay with Rich Text Question type? See the Essay with Rich Text Question type page for how to enable learners to upload images in Questions, and instructions on how to use that interface.