Best Practice: Working with images

To help you get off to a good start we’ve gathered some of our top tips for working with images.

1. Choose appropriate images

The first aspect to consider when selecting images is whether they effectively support your content, ensuring they don’t distract from the core messages within your learning. Make sure they are consistent, on brand (if necessary), and as clear as possible.

mceclip2.png

You should also consider your accessibility and translation requirements when selecting images:

  • To ensure your content works for learners using screen readers it’s important to ensure that any meaning in your imagery is also conveyed in the text content. For example, if you have an image that conveys ‘success’ ensure that it is accompanied by text that says the same.  
  • If using background imagery behind text, make sure the colour contrast is strong enough for the text to be readable, especially when considering learners who might have a visual impairment. 
  • If your learning content needs to be translated then we’d recommend avoiding using images containing text as these will increase the work effort when it comes to translation, requiring new images for each language.

 

2. Consider the image size and file type

Elucidat has a maximum size limit of 12MB to ensure images aren’t uploaded at a size too big to render. However, as an author you can take extra steps to ensure your images are sized correctly before you upload them to Elucidat.

mceclip3.png

We’d recommend always saving images at a size suitable for web (72dpi) and dimensions appropriate to the area you are using them. 

  • For background images that need to be large enough to fill a large desktop screen we would recommend an approximate size of 2000 x 1400 pixels.
  • For image fields within your layouts you can take a direction from the box you are uploading them to, by looking at the dimensions under the Size control.

Keeping the file sizes as small as possible will ensure that load times are quick across all internet connections.

Think also about where your image is going to be displayed. Is it sitting on top of a background colour or image? If so, you might want to save it as a transparent .png so the image displays without a border. If the background doesn’t matter, you could simply save in .jpg format. 

You can also upload .gif files to Elucidat, which can be great for adding a bit of subtle animation to your projects.

 

3. Select the right image mode

There are four different image modes available in Elucidat: Cover, Contain, Fixed and Original

mceclip0.png

Knowing which of these will work best for different situations will help you ensure your images look great in all views:

  • Cover mode is good for background images or image fields where you wish the image to fill the whole area and don’t mind the image being cropped slightly. 
  • Contain mode is ideal for images such as diagrams or logos, where it is crucial that the whole image is visible and you don’t want it to become cropped. 
  • Fixed mode allows you to use the image ‘size’ slider to manually adjust the size of the image within your box (this can be handy if you want to zoom in on a particular area of your image, for example).
  • Original mode displays the image at the exact dimensions it was uploaded at. This can be useful for elements such as logos where you may want them to appear at an exact size.

 

4. Ensure your images display well on all devices

Avoiding images with details that might be lost on smaller screens is a good way to ensure that your content is suitable across a wide range of devices. 

If complex images can’t be avoided, you can make use of Elucidat’s responsive design features to upload alternative images for smaller devices. These might be portrait rather than landscape orientation, or could have unnecessary details removed. 

blobid4.png

Here’s an example:

blobid5.png

Alternatively, you could upload complex images as a supporting PDF document in a Resources area, for users on smaller screens to open up and enlarge.

We’ve put together this Masterclass guide (link opens in new window) with some more top tips for mobile learning design in Elucidat.

 

5. Know when to use images in text boxes

It’s also possible to add images directly into text boxes in Elucidat. This can be a useful option if you are an author who doesn’t have access to the Layout view, but want to add some additional images to support your content.

blobid6.png

We’ve put together this Masterclass guide (link opens in new window) on when to use images within text boxes and how to format them.

We recommend uploading images which are already sized to the correct dimensions for your text boxes, rather than scaling down inside Elucidat. This will allow the images to resize smoothly across different view modes without distortion.

 

6. Make the most of the Asset Library 

The asset library in Elucidat hosts all the images that have been uploaded to all projects within your account. This can reduce time spent searching for and uploading images when you’re working on your projects.

blobid7.png

If you know you’ve uploaded a suitable image before, or that someone else in your team has, then you can search the image library and choose it from there. This can be particularly useful if you’re reusing icons or logos either within one project or in multiple projects.

Just make sure that you upload your image with an appropriate filename that makes it easy to find when you search.



Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Request support
Access support that’s tailored to you by getting in touch with our Support Team.
Send us feedback
Do you have a new feature request, or want to tell us about something that works well (or not so well) for you? Get in touch!