Skip to Main Content

Using Images in LibGuides

Overview

WHY

  • Images can create visual appeal and consistent branding, provide valuable information, and enhance comprehension. 
  • Images may be subject to copyright. 
  • Alt text screen readers represent visual content. 
  • Large image files may slow page load time and display will vary on different browsers and devices. 

HOW

  • Consider if your image is necessary. Does it add value or can you cut it to reduce visual clutter? 
  • Consider copyright when using images on the web.
  • Add alt text to images if helpful or delete if duplicative with other content. For more information, see Adding Alt Text.
  • Resize the image to its optimal size before uploading it to LibGuides according to Resizing for Mac or Resizing for PC. Delete the image dimensions within LibGuides to allow web browsers to adjust the image size automatically for different devices. 

Acceptable Images

Public Domain: Works that you can use in any way you want to. Most works enter the public domain once intellectual property laws expire, but some enter because creators wish for their work to be available without copyright law restrictions.

Creative Commons: Creative Commons is an organization that has made the process of applying copyright licenses much easier. Creators can choose from six licenses with a range of restrictions and easily access the license and legal code for their choice. This clear licensing and common-sense explanation of copyright makes it a lot easier to find and use work legally and ethically. 

Best practices for attribution for copyright (use 10px)

Images & Videos

Rules for Web-Ready Images

  1. Use JPGs for photographs (they allow for a broader range of colors)
  2. Use GIFs for logos and simple graphics
  3. If using a image program (like Photoshop) set the resolution to 72 - that is the standard resolution for monitors
  4. File size should be between 30- 40 KB, the pixel size should be 500 or less.

Using Microsoft Photo Editor to create web-ready images:

  1. Under programs, choose "Microsoft Office Tools"
  2. Select "Microsoft Photo Editor"
  3. Open the image in the editor program
  4. From the toolbar, choose "image" and then "resize"
  5. Type the width that you want the image to be (height will resize automatically) and click okay
  6. Go to Save As
    1. Save the file as a JPG or GIF
    2. Click the "more" button to select the resolution.  85 is a good compromise between size & resolution.

Placing an Image in a Box

  • The "books from the catalog" option allows you to get the cover art from Amazon
  • In text boxes, you can add an image by choosing the "insert image" tool (looks like a tree)
  • You can choose to link to an image from the internet by typing in the URL or  upload an image from your computer.

You can insert an video in any libguide from either a video source like youtube or a video from one of the other libraries using libguides. Vide

To insert a video:

  1. Add a new box and choose the "embedded video box"
  2. Click add a new video
  3. You can either
    • past in the URL for the video (it should start with "object..."
    • search the Libguide community site to link to an existing video

Warning: Videos do not open in a seperate tab or page. Videos that have detailed content (e.g. screenshots) will not display properly in a narrow column. Place videos in a larger column.

Screenshots & Icons

WHY

  1. Some information is most easily displayed and understood visually.
  2. Images paired with text can enhance understanding.
  3. Icons help users know what to expect. 

 

HOW

Consider adding screenshots and icons where appropriate. 

Taking screenshots on a PC:

  • Press the Print Screen key (often shortened to PrtScn) to take a screenshot of the entire screen or Alt + PrtScn to take a screenshot of just the active window. This will copy your image to the clipboard.
  • Open the Paint application and press Ctrl + V to paste the image from the clipboard.
  • Make any desired changes in Paint and Save. For recommendations on image sizing for LibGuides, see Resizing for Mac or Resizing for PC.

Taking screenshots on a Mac:

  • Press Command + Shift + 4. A crosshair pointer will appear.
  • Click and drag to select the area you want to capture. Let go of your mouse or trackpad.
  • An image file will appear on your desktop. For recommendations on image sizing for LibGuides, see Resizing for Mac or Resizing for PC.
  • If you prefer the image to copy to the clipboard, use Command + Shift + Control + 4. 

 

TIPS

ACCESSIBILITY NOTE

  • Do add alt text for visual content not repeated in the text. Be descriptive. 
  • Do not add alt text for visual content meant to reinforce information already included in the text.

Create Your Own

Infographics, Wordles, Timelines, Charts, Graphs, Etc...

Recommended Image Repositories

Best Practices for Images