LibGuidance

Image Manager

The Image Manager provides you with a central place to upload and store images, which you can then reuse throughout LibApps.

There are two types of image libraries where you can store images:

• Your Personal Library contains images that only you can manage and reuse.
• The Shared Library allows admin users to upload images that all users in your LibApps system can reuse.

Each library can be further organised by folders and keywords, with the ability to both browse and search for images.

Further support

For more information on the Image Manager visit the Springshare Support website.

Adding an Image

It is best practice to add an image in a new Rich Text / HTML content item. Adding a an image in it's own separate line will keep formatting inline and ensure easy editing of sections. 

To add an image:

1. Click Add / Reorder
2. Select Rich Text / HTML
3. Select the Image Logo in Rich Text Editor
4. In Image Properties click Browse Server
5. Select your image from the Shared Library or Upload New Image
6. Return to Image Properties and add Alternative Text
7.  Click OK
8. In Rich Text / HTML Editor click Save & Close

Accessible Images

Providing access to all viewers is essential when conveying crucial information through an infographic. It can be challenging for people with visual impairments and cognitive disabilities, as complex designs and distracting design elements can hinder their ability to understand the information.

Key considerations:

• Ensure that the infographic adheres to WCAG 2.1 AA for accessibility standards.
• Provide a detailed alternative text or transcript that effectively communicates the content.
• Use a contrast checker.
• Produce a video or audio recording with narration that covers the essential concepts.
• Limit the use of visuals to only those that are necessary.

Images should be used to enhance content, not as the sole means of conveying important information. Users who are unable to view the image should still be able to understand the content through alternative means.

Screen readers

Screen readers are essential tools for individuals with visual impairments, allowing them to perceive and navigate websites through auditory cues. By creating screen reader-friendly websites, we ensure that this segment of the population can access the same information and services as everyone else.

Files

The file size of an image must be under 5MB. The file size of a photo is important as larger files can take longer to load, which can negatively impact website performance.

File type

The choice between JPEG or PNG depends on the type of image and the intended use. For photographs or complex images, JPEG is often the preferred choice due to its smaller file size. For images with simple designs or transparency requirements, PNG is a better option.

JPEG

A compressed file format that is commonly used for photographs and complex images with many colors. It is best suited for images that do not require transparency.

PNG

Portable Network Graphics is also a compressed file format that supports transparency, making it suitable for images with simple designs or logos with transparent backgrounds.

Image Dimensions

The recommended image dimensions are 400px high and 850px wide.

This will give you an image that is perfectly centred when uploading to text editor. 

Photoshop canvas settings

Follow the settings in the image to create a canvas for the minimum image dimensions.

Rows and Columns

Using tables to display images next to text can cause layout issues on mobile devices. To ensure your content looks great on all screen sizes, it's recommended to use rows and columns within the code provided. This approach allows images and text to automatically realign as the screen dimensions change, guaranteeing a consistent and user-friendly experience for everyone.

Copy the code

<div class="container" style="width:100%; padding:0px;">
<div class="row">
<div class="col-md-8">
<p>insert text here</p>
</div>
<div class="col-md-4">
<img alt="insert alt text here" loading="lazy" src="insert image URL here" />
</div>
</div>
</div>

Link an Image

Sometimes you might want to make the image a weblink. This has been used on certain resources to link to external content like an Articulate 360 product or forms.

This technique can also be used to increase the image to 100% when clicked. Simply use the image URL as the link target.

Copy the code

<a href="insert web link here" target="_blank">
<img alt="insert alt text here" loading="lazy" src="insert image URL here" /></a>

Common Issues

If you encounter any issues uploading images to your guide, here are some common culprits and solutions to get things back on track.

Stretched or squashed image

If you upload a large image and then manually resize it within LibGuides to fit a smaller space, the image might appear stretched or distorted. This is because you're essentially forcing the image proportions to fit a new frame.

Issue

Dimensions have been set in the image manager.

Solutions

• Remove the dimension settings.
• Resize the image in Photoshop.
• Use the Column HTML code to align image to text.

Pixelated image

Photos for the web should typically have a resolution of 72dpi (dots per inch). This is because the web is a screen-based medium and does not require the high resolution that is necessary for print. However, enlarged images of a lower resolution will become pixelated.

Issue

Image is pixelated and distorted. 

Solutions

• Replace the image with a higher quality image.
• Upscale the image Photoshop.