Visual Elements: Images

Color, typography, the logo, and images.

Whenever possible, use rich, sharp, colorful images from our collections, and photographs of patrons and staff actively using library services and spaces.

Avoid using photographs or images of the backs of people’s heads, outdated technology, empty spaces, and clip or stock art.

Choose images that show the library as a place that welcomes diversity, equity, and inclusion.

If critical information is included with the image, be sure to repeat that information in the caption or body text.

Finding images

Choose images from among:

  • Originals owned by the library or University (such as from the Widen Photo Database).
  • Public domain or Creative Commons content, properly sourced and credited
  • Library image sources (where licenses allow images to be used in this way) like Digital Collections
  • Photos taken by you or a library colleague

 

Alternative text

Alternative text, or alt text, takes the place of the image for users who can’t access the original, whether because of ability, environment, or technology. 

When writing alt text:

  • Describe what you want the image to convey rather than the particulars of what it looks like.
  • Repeat information presented in the image if it's not already in the accompanying text.
  • Leave off phrases like “image of” or “picture of.”

Decorative images

You do not need to provide alt text for decorative images — ones that don't convey information — including labeled icons.

Leaving alt text empty marks the image element as decorative and follows W3C Web Accessibility Initiative guidelines. Screen readers ignore this null (empty) alt text attribute, reducing audio clutter and improving the experience for people using assistive technology.

File types and sizing

Our library website uses JPG and PNG file formats for images.

We tend to use horizontal images because they work best in a variety of layouts. Use 800x600px images on our website — they work well at full size and also resize well for various devices and browser widths.

Large photos can slow down page load times and don’t look any better on the web. Optimize images so they’re less than 1 MB in file size. Changing the image to 72 dpi usually helps.

Our design system is deeply indebted to the University of Michigan Libraries' Design System.

  • Last Updated: Sep 26, 2024 8:07 AM
  • URL: https://libguides.gvsu.edu/visualelements