LibGuides Toolkit: Use Images

• When uploading an image be sure that it is the appropriate size for displaying on a web page. Large images can take a long time to load, especially on mobile devices. This applies to both resolution (ex. 100px by 100px) and file size (ex. 1.4MB). LibGuides will allow you to upload images up to 5MB. For more information on optimizing images for the web, check out this article from Google Developers.
  • Best File Formats
    • GIF: These are bitmaps consisting of a grid made of pixel squares and has up to 256 colors. Best for graphics like charts, bullet points, icons, buttons, and textual details.
    • PNG: Typically larger than a GIF but smaller than a JPEG. Best for screen shots, buttons and icons.
    • JPEG: The largest of these file types, but also the most popular, note that typically the .jpg file type images, take longer to load. Most graphics programs will allow you to choose the image quality, Maximum, Very High, High, Medium, and Low. A good rule of thumb, if the image is coming from a digital camera chances are you will need to compress it. Best for photographs, images needing high resolution.
  • Tip: Get help from image editing programs programs like Photoshop that offer a save for web option.
• Naming your image is also very important, be sure to give it a name that makes sense. A series of numbers will be harder to find later, but if you give it a name like Bio_143_frogs.png. you will be able to quickly tell that the image is for the Biology Class 143 and is of frogs.
• Be sure to use the alt text field, what is this you might be thinking? Have you seen it and skipped over it? Well you probably don't want to do that for two reasons.
  1. This is the text the screen reader sees and reads to the user.
  2. This text is also used for SEO (Search Engine Optimization). Take a moment to think about the image, how it is being used and what search terms might be useful. For example in the image below, the alt text is, "Click on the truck icon to move your image to the correct folder," simply describing what is going on in the image.
• When adding new images, be sure to organize them! It is much easier to find your images if you aren't looking through pages of images.
  • Create Folders, and use them to manage your images.
  • You can easily move items between folders, just click on the thumbnail in the Image Manager > this will launch a window which will allow you to change the folder that the image is in.

You can get to the Image Manager in several ways:

• Via LibApps
  From the LibApps Dashboard, click the Image Manager link in the orange command bar.
• Via the Content Menu
  In LibGuides, go to Content > Image Manager and you'll see the same exact screen as in LibApps.
• Via a Content Item / Asset
  Many of the content items / boxes allow you to get to the Image Manager (via a pop up window), like Rich Text, links / documents / databases (via the "Thumbnail Icon" area), and the Gallery box type (so you can easily add images to your gallery box).

Reusing images is easy! 

When you are working with a Rich Text/HTML content item, you can add images: 

1. Click on the add image icon , in the text box.
2. In the pop-up click on Browse Server, and locate the image in your Image Manager.
3. Click on the thumbnail for the image you want to select.
4. Give your image some alt text (for screen readers).
5. Customize the height, width, border, padding, and alignment of the image.
6. Click OK to add the image to your text.

Shared Images Library

The Share Images Library works the exact same way as the Personal Images area. You can create folders, add images to folders, preview them, move them around, and delete them. Only Admins will be able to add/modify/delete images in this area, but all users can access and use images from this area.

This is the perfect place to upload images that everyone will - and should  use. A few, ideas for images to add to this area, include authorized stock images of the library / institution, vendor logos and screenshots that might help in multiple types of guides.