Images

Use images sparingly.

Images are a significant source of slow web experiences. In some cases, imagery enhances the message of the text. However, in many more cases an image adds little to the message and instead may provide an unintentional lesser experience.

Formats

Photography
Examples: building exteriors, person profiles, building spaces
Preferred: optimized progressive JPG
Do not use: BMP, TIFF
Illustrations
Examples: logos, label enhancements (e.g. an “x” next to word “close”), icons
Preferred: SVG
Do not use: GIF

Do not use animated GIFs or any animated images that lack controls (pause and stop) over the animation.

When adding images outside of Drupal, follow the optimization techniques, described in Photoshop CC steps.

Optimization

Manual photograph optimization

Use a graphic editor of choice; these steps are written specifically for Photoshop but are possible in most editors.

  1. Size: 750px wide maximum with 90dpi (to determine width, investigate what the largest display will be on the page)
    1. Photoshop > Image > Image Size
    2. Resolution: 90 Pixels/Inch
    3. Width: 750px Pixels (or less)
  2. Color: black and white unless an archival image
    1. Photoshop > Image > Adjustments > Black and white
    2. modifying each channel may increase file size, proceed only if necessary
  3. Blur: for images with main focal points (head shots, buildings, single objects with irrelevant background)
    1. Filter > Blur Gallery > Iris Blur
    2. Pull corner of blur zone so it’s only slightly rounded
    3. Set blur radius between 3px and 5px
  4. Save as: JPG format at “8” high quality
    1. Progressive load for images “below the fold”
  5. Optimize the JPG file by loading it in squoosh.app or Kraken and saving the optimized version

Manual SVG optimization

Read more about optimization tricks in understanding and manually improving SVG optimization.

  1. Open file in Adobe Illustrator (or create a new one)
  2. Modify artboard size to the smallest possible to work with
    1. For icons, make a square size no bigger than 100 by 100, preferably around 32 by 32
    2. For other illustrations, fit tightly to the graphic size
  3. Set the top left corner of the artboard to 0,0
  4. Utilize more efficient shapes when possible, such as circle, ellipse, line, and rect
  5. When saving as an SVG, consider how precise the decimals need to be, the fewer the more efficient
  6. Remove Adobe Illustrator comments and fill (which can be added back in with CSS if embedding into the HTML) in the SVG file
  7. Ensure the code includes viewBox (should be 0,0,[32],[32], for example), width, height
  8. Optimize the remaining code running it through SVGO

Image purpose

General guidance

Determine if the image is decorative or more substantial. When selecting images, follow these standard practices.

Avoid placing text in or on top of an image
Text inside an image is not accessible and may become pixelated and difficult to read. Text on top of an image is more difficult to read with the background noise.
Do not use photos of people without photo releases
Respect individual rights to anonymity. Photo releases (University-access only) are available through Libraries Communications.
Avoid proprietary images from other places without consent
Taking images from the web that do not expressly state their copyright falls within the University Libraries’ use is prohibited.
Use accurate images
Avoid stock photo websites outside of the University-provided resources. Images must accurately represent spaces, services, and people.

Image types

Decorative images

From WAI Decorative Images:

Decorative images do not add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

Informative image

From WAI Informative Images:

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. They may be used to label other information (such as a phone for “telephone”), to supplement other information, to convey succinct information, or to convey an impression or emotion.

  • Drupal: In “alt text”, use a short phrase or a couple words to describe the image
  • Other: see informative image code

Complex image (e.g. charts)

From WAI Complex Images:

Complex images contain substantial information than can be conveyed in a short phrase or sentence, such as graphs, charts, diagrams, and maps.

Present the visual and textual data together for best information dissemination. Provide both an image and a data table.

A more technical option is to merge the visual data and textual data displays for objects like charts, by building accessible SVG and coding the vectors to behave like a data table (“2 in 1”).

  • Drupal: In “alt text”, short description of what the image is (e.g. “2014 first quarter attendance bar chart”); in “figure caption”, describe the content in context of the page (e.g. “Display of monthly and total visitors by type — student, faculty, staff, and community member — for the first quarter in 2014”)
  • Include a data table that mirrors the content of the visual representation (see tables)
  • Other: see complex image code

Alternative text

For more on alternative text, read “Writing great alt text: emotion matters” by Jake Archibald.

Alternative text, or alt text, is necessary for screen readers to “describe” images, so the content is accessible to people with impaired vision, or people that have disabled images for cognitive impairments or data limitations. Alt text needs to be as brief yet meaningful as possible given the surrounding text, rather than just a filename, for example.

Avoid any redundancy; those who have to listen to the web all day can hear a lot of unnecessary repetition. If the image contains something the surrounding text doesn’t convey, describe it in the alt attribute.

More specifically, “the alt attribute’s value should never contain text that could be considered the image’s caption [...] or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image.” (HTML alt spec)

If the text included in the alt attribute benefits other people, use a visible text option such as a wrapping <figure> with accompanying <figcaption>.

In cases where the accompanying text already directly mirrors the content of the image, the alt text should be left blank, so that it isn’t duplicated.

Avoid starting alt text with “This is an image of”, “Photo” or “Photo of”, “A view of”, “You see”, “Screenshot of”, or “Thumbnail”.

Use the alt decision tree to determine how to write alt text.

Example

“PNRs304.jpg” (no)
vs.
“Screenshot from Parks and Rec” (better)
vs.
“Screenshot from Parks and Rec” with a <figcaption> element including the text: A self-referential screencap from Parks & Recreation, showing character Tom Haverford looking at an uncaptioned photo of himself. The subtitle reads, “What is he thinking?” (yes)

Figure captions

Captions are visible, and the text is not italicized to improve readability. To distinguish it from surrounding text, both the image and caption are centered on the page when not full width, and the caption has a 90% size.

Captions are not a substitute for alt text. “If an image is given an empty alt, then the <figcaption> is in effect describing nothing. And that doesn’t make much sense, does it?” When <figure> is used, alt text is required (no empty attribute).