Best Practices for UCL LibGuides

How to find images, add them to the Image manager in LibApps, and then add them to your guide.

• Images and accessibility (right column)
• Using images in your LibGuide 
• Copyright free images (right column)
• Image sizes (right column)
• Add an image to Image Manager
• Add an image to a guide

Adding impactful visuals captivates users, draws them in, and appeals to their sense of sight. However, visuals shouldn't be used just for the sake of 'adding something pretty.' Successful use of images will not detract from the function of your LibGuide. Instead, it enhances function by engaging users and building interest.

For our LibGuides, photographs are preferred, rather than clipart or cartoons. In instructional guides you may use screenshots and diagrams as required.

To add an image to your guide, you first need to add it to the Image Manager in LibApps.. The Image Manager has two 'libraries':

• Shared Library: This library may be accessed by any LibGuides editor, and images from the Shared Library may be re-used by anyone in any guide. Only admin users may upload images to the Shared Library.
• Personal Library: If you upload an image to the Image Manager, it will be stored in your Personal Library (unless you are an Admin user) and no one else will be able to re-use that image.

If you wish to upload your own image(s) you may do so to your Personal Library, but please send to an admin (Lindsay Ure or Angela Young) to upload to the Shared Library if the image:

• is for a guide for which you have shared responsibility;
• is one that other people might want to use in another guide.

Please note that images cannot be moved between Personal Libraries and the Shared Library.​

 To upload an image to Image Manager

1. From the orange menu bar, click on Content and then Image Manager. Admin users should select whether to upload the image to their Personal Library or the Shared Library.
2. You are strongly advised to organise your images into folders. Navigate to the appropriate folder in the left-hand menu, or create a new folder by entering a name for the folder and clicking on Create.
3. Click on the green Upload new image button.
4. Locate the image of your choice on your computer and click Open. Please note, you can only upload one image at a time.
5. You should now add alternate text and keywords:
   • Click on the thumbnail image to open the Edit Image Properties box.
   • Enter appropriate keywords to help when searching for images. Multiple keywords may be separated by a space.
   • Add suitable Alternate Text. 
   • You can at this point add or move the image to a particular folder.
   • Click on Save.

Images are usually inserted into a guide within a Rich Text / HTML content item:

• Place your cursor where you wish to insert the image and click on the Image button.
• Click on Browse Server to locate the image you wish to use from the Image Manager. Click on the Re-use this image icon below the image of your choice, or choose to upload a new image.
• From the Image Properties window, add Alternate text.
• Enter an appropriate width for your image. Note: ensure Lock Ratio is on so that the image does not get stretched or squashed. This is indicated by a closed padlock icon. You then do not need to enter a height.
  • Images in the middle column should be 550 pixels wide, or 240 pixels wide if you wish to have text either side of them.
  • Images in the right hand column should be 240 pixels wide.
• Leave Border blank.
• HSpace and VSpace determine how much white space you have around your image. At a minium enter 1 into both boxes. If you wish to have more white space, increase this number.
• If you wish to have text either side of your image, from the Align drop-down menu, select either Left or Right.
• Click on OK

​If you wish to edit any of these properties later, double click on the image to open the Image Properties window.

Before adding images to your guide, please sure they meet accessibility guidelines

Alternative text:

• provide alternative text for images and any non-text content. This will help people who rely on a screen reader to have the content of the guide read to them. 
• If the image is purely decorative then alt text is most likely not needed. Leave the alternative attribute field completely blank.
• Screenshots - If the image is a screenshot, provide a short description of the image in alt text, and add a fuller descriptive caption on the page.
• Images that contain a caption - If your graphic contains a caption already, repeat that caption in the alt text.
• Learn more about writing effective alternative text.

Other tips:

• Do not rely on colour alone to convey meaning. Information communicated by an image may not be available to a person who is colourblind and will be unavailable to screen reader users. Learn more about making images accessible.
• Avoid using images of text as they may pixelate when enlarged. 
• When using a gallery box add alternative text for all images. If you would like your slides to cycle automatically, don't use slide speed faster than three flashes per second, as that may cause seizures, nausea or dizziness in some people.

Ensure images you use are copyright-free. Use images you have created yourself or find images that are available for re-user on a website, ideally without attribution.

Sources of images that may be used without attribution:

Please use the following image sizes. You can adjust the size of the image after you've added it to Image Manager and before you add it to your guide.

• Images in the middle column should be 550 pixels wide, or 240 pixels wide if you wish to have text either side of them.
• Images in the right hand column should be 240 pixels wide.
• Book cover images in gallery boxes and the "Books from the Catalogue" asset  cannot easily be edited, so these dimensions don't apply in those cases.