Skip to Main Content

LibGuides at City St George's

Resources and Best Practices for creating LibGuides at City St George's

Using images

Images are great for making your LibGuides more interesting, however before adding an image to your guide think about whether it reinforces Library Services and the University brand. To quote the University Style Guide:

Avoid the gratuitous use of images. Dull, poor quality, uninspiring and clichéd images are detrimental to our identity and the effectiveness of your communications. Only use images that add relevance, personality and atmosphere. 

Before adding an image to your guide consider the following:

  • Is your image appropriate? Your images must illustrate a concept, a good image should help us better understand something, teach us how to use something, or show us how something is done. Screenshots are great for this. 
  • Is your image the right size for displaying on the web? Large images will take a long time to load (this applies to both resolution and file size). The best file formats to use are GIF, PNG, JPEG. 
  • Have you acknowledged the images you've used?  See the Copyright Guide for more information and to find suitable image sources. 

Using screen shots

To add accessible screen shots to your LibGuides and LibAnswers follow the instructions on the Staff Manual FAQ: How do I create accessible Ask Us entries?

You will find a template in the linked files section which you can download to make your own marked up screenshots.

Image Manager

The Image Manager allows you to upload and organize the image assets you use across your guides into your private Personal Library. There is also a Shared Library of select image assets that all City users can access. Don't delete any images from the Shared Library as they may have been used by your colleagues on their LibGuides. 

Remember to resize your images before adding them to LibGuides.

Common image problems

Stretched images

             An example of a stretched image

In Image Properties, you can change the size of the image by adjusting either the width or height.  If the lock icon is closed, the aspect ratio will be automatically maintained, so as not to distort the image; if the icon appears open, click on it and the icon will close, allowing you to maintain the aspect ratio.

                                   Screenshot of the photo editor pointing out the toggle button to lock the ratio of the width and height values.

Slow loading images

This generally means that the file size of your image is too large for use on the web. Resize your image using Paint before uploading to LibGuides. Changing the image size after you upload it does not affect the file size download.

Consider mobile users, if you upload an image that is 3000px by 3000px (2.5MB file size) and resize it inside your LibGuides to be 100px by 100px...the user still downloads all 3000px and all 2.5MB. 

White space

You may find that you would like a bit more white space around your images and text. Do not create padding by adding empty lines (pressing the return key). In the image properties you can add spacing by using the HSpace (Horizontal space to the left and right of your image, which is useful when wrapping an image with text) or VSpace (Vertical space above and below your image). Between 10-30 pixels usually looks good.