LibGuides SOP

General

• The image's file size should be between 30-40 KB, and the pixel size should be 500 or less.
• Images should be inclusive and represent people from diverse populations. Please see the Inclusive Curriculum Guide on the Inclusive Learning page of the Curriculum Hub for more details.

Photos

• Use .jpg or .jpeg for photos, allowing for a broader range of colors.
• If the photo is the only content in the box, replace with <p> and </p> tags in the source code with <div> and </div>. The P tags will add extra spacing around the photo.
  
• Consider adding aria-hidden="true" to your opening div tag if a photo is for decoration only. This will hide the image from screen readers.

Screenshots

• Use .png for screenshots, especially if you've placed highlighting, circling, or arrows on the image. These display less blurry than .jpg.
• Consider adding a border to the screenshot, as screenshots are not as visible on the page.
• Consider decreasing the width and centering your screenshot. See the example on how to do this.

Examples

Easy sample code (start with this first!)

<div aria-hidden="true"><img alt="Roadmap design" src="//libapps.s3.amazonaws.com/customers/1639/images/Roadmap_Design.jpg" /></div>

Sample code for resizing an image

Try this code if your image needs to be resized (especially if it's too big). Depending on your goal, you can change the width percentage to make an image smaller or bigger.

<div align="center" aria-hidden="true"><img alt="Womens Health" src="//libapps.s3.amazonaws.com/customers/1639/images/Womens_Health.jpg" style="width: 90%;" /></div>

Complex sample code

Here are some additional components that can be added to your image if needed.

<div align="center" aria-hidden="true"><img alt="Changing p tags to div" src="//libapps.s3.amazonaws.com/customers/1639/images/ChangingTags.PNG" style="border:1px solid #333; margin-top: 5px; margin-bottom: 5px; width: 90%;" /></div>

• <p> and </p> have been changed to <div> and </div>
• align="center" centers the image
• aria-hidden="true" hides the image from screen readers
• style has been added (note that the punctuation in the style section is essential; it will not work otherwise)
  • border adds a border around the image to make it easier to see
  • margin-top and margin-bottom add space to the top and bottom of the image so the text does not sit right on top or beneath the image, making the image easier to see (note: you can also use margin-left and margin-right to define margins on the side of the image or margin to define the same amount of space around the entire image)
  • width helps size the image within the space it lives in

Providing alt (short for alternative) text for images is required for accessibility. Even if you add aria-hidden="true" to your image, including alt text is always a good idea.

To add alt text, enter the text in the Alternative Text field when adding or editing an image.

Alt Text Guidelines

• Be accurate and concise.
• Provide alt text for all images.
• Do not add "image of…" or "graphic of …" as screen readers will already state that it's an image and then read the alt text.

We must purchase all photos through iStock. We can't just pull them off of the web. Please contact Alexis or Mike about an image for your guide, as they are the keepers of the images account. Note that we only have so many monthly credits to spend, so we may be unable to procure your image immediately.

The LibGuides image manager, found under the Content menu, allows for a personal and a shared library. You should always use the shared library.

The image library is organized into folders on the left. Use the Guide Photos folder for single photos used on a guide page. If you are creating a guide with many screenshots or intend to use many images, creating a separate folder for that guide may make sense.

Important: Once you delete an image asset from the library, it will permanently delete it from any guide it currently resides in.