Images

Sizes

The following standards are for non-archival web image display. Where displaying archival images, use archival best practices and tools that meet the design system principles.

• Less than 750px
• Aspect ratio
• standard card: 2.3:1
• horizontal card: 1:1 (180 pixels)
• portraits: 1:1

Attributes

src

Required

alt

Required

Review alt content guidelines for how to write appropriate alternative text

loading

Optional

This new attribute for native image lazy loading is introduced in Chrome 76

Decorative images

All images are delivered in its original format as well as WebP.

<picture>
  <source type="image/webp" srcset="decorative.webp" />
  <img src="decorative.jpg" alt="" />
</picture>

Where the image is accompanying a headline, such as a news article brieflet linking to a full article, use the following pattern:

Story heading

<a href="/article-2" class="link-img">
  <picture>
    <source type="image/webp" srcset="map.webp" />
    <img src="map.jpg" alt="" />
  </picture>
  <h3>Story heading</h3>
</a>

Information images

<figure>
  <picture>
    <source type="image/webp" srcset="mississippi.webp" />
    <img src="mississippi.jpg" alt="1876 Minneapolis map" />
  </picture>
  <figcaption>A map of Minneapolis from 1867-1877 made under the direction of the Mississippi River Commission and Major C.B. Comstock. It includes railroad track elevations, lake depths, and topographical features. Photo from Borchert Library’s <cite><a href="https://www.lib.umn.edu/borchert/county-plat-maps-and-atlases">County plat maps and atlases collection</a></cite></figcaption>
</figure>

Complex images

Library	Affiliate type	Count
Green Library	Faculty	1,334
Green Library	Students	23,988

<figure>
  <picture>
    <source type="image/webp" srcset="chart.webp" />
    <img src="chart.png" alt="2014 first quarter attendance bar chart" />
  </picture>
  <table>
   <thead>
    <tr>
      <th scope="col" tabindex="0">Library</th>
      <th scope="col" tabindex="0">Affiliate type</th>
      <th scope="col" tabindex="0">Count</th>
    </tr>
   </thead>
   <tbody>
    <tr>
      <td tabindex="0">Green Library</td>
      <td tabindex="0">Faculty</td>
      <td tabindex="0">1,334</td>
    </tr>
    <tr>
      <td tabindex="0">Green Library</td>
      <td tabindex="0">Students</td>
      <td tabindex="0">23,988</td>
    </tr>
   </tbody>
  </table>
  <figcaption>Display of monthly and total visitors by affiliate type — student, faculty, staff, and community member — for the first quarter in 2014</figcaption>
</figure>

SVG

All illustrations should be made with SVG (scalable vector graphic), avoiding the SVG wrapper around an image for vector SVG. SVG can be referenced in multiple ways:

External reference

Calling an SVG as an external object like a JPG is the most supported option but also the most limiting for modifications such as changing colors on focus. Because it is a source pointer, it’s a resource request requiring a server fetch as well, which may cost in speed.

<img src="cancel.svg" alt="Cancel" />

SVG sprites

These are most useful for icons that are expected to repeat multiple times per web page. For instance, on a staff directory page where phone and email content has repeating iconography. Add a hidden list of SVG symbols on the page:

<svg>
  <defs>
    <symbol id="glyph-cancel">...</symbol>
  </defs>
</svg>

Then within the document content refer to the symbols:

<svg viewBox="0 0 30 30">
  <use xlink:href="glyph-cancel"> </use>
</svg>

The SVG definition list is best inside the <footer role="contentinfo">, in a <div hidden="hidden">element that contains several shared hidden assets.

Embedded

<svg viewBox="0 0 30 30">
  <path d="..." />
</svg>

The best approach is to use a combination primarily of SVG sprites and embedded SVG.

Iconography

All icons are SVG formatted and embedded into the HTML. This allows CSS styling and JS mutations.

Icons that are used purely to enhance content where the content makes sense without the icon is decorative. Decorative content does not read to screen readers.

Use only icons identified below. If you need an icon that is not represented below, place the request with the Libraries Web Dev Team.

<svg aria-hidden="true" class="glyph" focusable="false" viewBox="0 0 30 30">
  <path d="..." />
</svg>

Available icons

Use these icons to present a consistent style. Icons avoid thin or outline styles so they are clearly visible.

Icons are written to be decorative only, which requires meaningful text to be provided next to each icon.

If the icon is not used as decoration or is intended to stand alone (not recommended), remove focusable and aria-hidden element attributes from the <svg> element, then insert a <title> element inside the <svg> element with a brief description similar to alt text.

Icons identified with an asterisk (*) have a specific purpose. If intending to use an icon that deviates in meaning from the intended purpose, contact Web Development for an exception or to get a consultation on what to use in the specific situation.

Where Drupal tokens are available, they are listed.

• angle-circled-right

  *for main nav links
  [[{"glyph":"angle-circled-right"}]]

• angle-circled-up

  [[{"glyph":"angle-circled-up"}]]

• attention

  *for alerts
  [[{"glyph":"attention"}]]

• calendar

  *for events
  [[{"glyph":"calendar"}]]

• cancel

  *for close action
  [[{"glyph":"cancel"}]]

• chat-empty

  *for 24/7 chat
  [[{"glyph":"chat-empty"}]]

• check

  [[{"glyph":"chek"}]]

• clock

  *for time/hours
  [[{"glyph":"clock"}]]

• cog

  *for settings/edit
  [[{"glyph":"cog"}]]

• comment

  [[{"glyph":"comment"}]]

• down-open

  *for accordions
  [[{"glyph":"down-open"}]]

• facebook-squared

  *for social media link
  [[{"glyph":"facebook-squared"}]]

• gift

  *for giving link
  [[{"glyph":"gift"}]]

• help-circled

  *for tooltips
  [[{"glyph":"help-circled"}]]

• home

  *for homepage link
  [[{"glyph":"home"}]]

• info-circled

  *for tooltips
  [[{"glyph":"info-circled"}]]

• instagram

  *for social media link
  [[{"glyph":"instagram"}]]

• lightbulb

  [[{"glyph":"angle-circled-right"}]]

• like

  [[{"glyph":"like"}]]

• link-ext

  *for external links
  [[{"glyph":"link-ext"}]]

• link

  *for links
  [[{"glyph":"link"}]]

• location

  *for directions/map
  [[{"glyph":"location"}]]

• lock-open

  [[{"glyph":"lock-open"}]]

• lock

  *for auth required
  [[{"glyph":"lock"}]]

• mail

  *for email links
  [[{"glyph":"mail"}]]

• menu

  *for mobile nav
  [[{"glyph":"menu"}]]

• mobile

• newspaper

  [[{"glyph":"newspaper"}]]

• paper-plane

  [[{"glyph":"paper-plane"}]]

• phone

  *tel number link
  [[{"glyph":"phone"}]]

• pinterest-squared

  *for social media link
  [[{"glyph":"pinterest-squared"}]]

• plus-squared

  *for social media link
  [[{"glyph":"plus-squared"}]]

• right-open

  *for accordion
  [[{"glyph":"right-open"}]]

• rocket

  *for auto suggestions
  [[{"glyph":"rocket"}]]

• search

  *for search buttons
  [[{"glyph":"search"}]]

• space-shuttle

  deprecated - do not use

• trash

  [[{"glyph":"trash"}]]

• twitter-squared

  *for social media link
  [[{"glyph":"twitter-squared"}]]

• user

  [[{"glyph":"user"}]]

• users

  [[{"glyph":"users"}]]

• youtube-play

  *for video play button
  [[{"glyph":"youtube-play"}]]

• youtube-squared

  *for social media link
  [[{"glyph":"youtube-squared"}]]

• zoom-in

  *for “enlarge” action
  [[{"glyph":"zoom-in"}]]

• service-account

  *for My Account

• service-guides

  *for Library Guides

• service-ill

  *for Interlibrary Loan

• service-reserves

  *for Course Reserves

• service-study

  *for Group Study

• service-tutoring

  *for Tutoring