Skip to Main Content
homepage homepage

LibGuides Best Practices: Best Practices--Images

Use of Images

Images: Use Them or Not?

  • Consider whether or not an image would add context to your text. It's okay for an image to be used purely for decorative purposes, but don't let your images detract from the text.  
  • When describing how to do something or use something, where possible, use images. Annotated screenshots are even better. Videos are even better.

Naming

Naming Your Image

  • 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.
  • Use descriptive file names.  
    • Bad: asd98yfbjHYWF.jpg
    • Good: students-studying.jpg

Alt-Text

Use the alt-text Field

  • 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.

Size

Image Size

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.
  • Crop or resize your images if necessary. Images that have large dimensions tend to be large files - which means it takes longer for them to load.

Image Editors

Copyright

Images and Copyright

  • Remember that images are subject to copyright. While Springshare can't determine which images you're allowed to use, there are a number of free, legal images for you to use in your guides. 
  • On that note, consider whether you need to add citation information to your images.

Organizing Images

Organizing Images

  • 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.