Image considerations

• Why are you using an image? Is it decorative or functional? Remember that if the image is functional (is providing information) you need to include alt-text to ensure accessibility. For more on this, see the page in this guide on Alt-Text.
• This flowchart might help you decide whether or not to use an image online.
• Try to keep decorative images as small possible so they don't distract from your guide content, but just assist in providing visual interest.
• As a general rule, you shouldn’t make an image larger than it's original dimensions.
• Try to maintain the ration of the image dimensions: keep the aspect ratio locked (the padlock icon will show if it is locked or open), and just adjust the width. You can also set the image so that it takes up a percentage of the width of the box.

Adding Images

You can add an image to your LibGuide by either:

• adding your own new image;   OR
• reusing an existing image.

If you are adding a new image to a LibGuide, you need to be sure that it is free from copyright, or that the Library owns the copyright. If you use someone else’s image, be sure provide an attribution as per the image usage requirements.

More information on finding, editing and using images can be found in the Visual Communication Guide for Library Staff.

The Image Manager

In LibGuides, you add an image into a box by first uploading it into your Image Manager. The Image Manager is a place within LibGuides where you store and manage images. There are 2 components to the Image Manager:

• Personal Library  - for images that only you can use;
• Shared Library     - for images that can (and, in many cases, should) be used by everyone.

There is LibGuides help information available in the articles on Image Manager.

You can add an image to a LibGuides box by using Add > Rich Text/HTML.

The process involves saving the image to your computer, uploading it to the LibGuides server, and then adding it into the box:

1. [Make sure you know where you have saved the image. In your Downloads folder? Your Desktop?]
2. Go to the relevant box and click on Add > Rich Text/HTML. In the Editing tool, click on the Image icon. This is the "sun and mountains icon" as shown below:

   

3. In the ensuing Image Properties box, click on Browse Server.
4. Choose whether you want to put your image in your Personal Library or in the Shared Library. Also decide whether you want to place your image in a folder. 
5. Click Upload New Image, and browse your computer for the image you want.
6. Double click on the image file. The image will be uploaded into LibGuides, and, by default, the Personal/Shared Library screen will close and the image will now be in the Image Properties box.
7. If appropriate, describe the image in the Alternative Text field. This description is important because it's what screen-reader software will read out when it gets to the image.

   Notes on images that are purely decorative:

   • If the image is purely decorative and has no attribution, you don't need a description.
   • If the image is purely decorative and does have an attribution, you will need to insert a description in the Alt-Text field. (This is because the screen-reader will otherwise ignore the image and read out the attribution).
8. Change the “properties” (width and height, border, alignment) as required and click on OK. Note that you can set the size of the image by setting the width as a percentage. This sets the amount of the box, width-wise, that the image will take up. (Leave the height blank).

9. If the image is in a box with text, LibGuides Help recommends settings of:

• Border        1
• HSpace      5
• VSpace      5

As an example, here is the same image as above, set with the following properties: 

Width         50%
Height        -
Border       1     
HSpace     5      
VSpace     5       
Alignment  Right

This process also applies to adding a screen-shot into a LibGuides box (but you have to save the screen-shot to your computer first).