Images

Images

Introduction

Selecting contextually relevant and high-quality images - including graphics (charts, graphs, etc.) - is essential to creating effective KU CMS sites.

Image and Video Quality

  • All images and videos on Sunflower websites must be high-quality and high-resolution.

Where to Find KU Photos

The photography team at KU Marketing & Communications has provided a wide variety of beautiful images for use on CMS websites. See University of Kansas Brand Photography to download high-quality images from collections of campus beauty, academics & research, student life, and KU spirit.

If you do not find what you are looking for in the available photo collections, contact the KU Marketing & Communications Digital Media team at kuphotos@ku.edu.

How To Add Images

Add Images Between Sections

See Images 1 - Basic for instructions to add images between sections.

Note: Every image field in KU CMS - Sunflower sections has a minimum file size required for upload. Be sure to note the minimum file size when selecting your images.

Add Images in Body Content

In KU CMS – Sunflower images are no longer inserted into body content via the WYSIWYG images button and the IMCE File Browser. See Body 1 – General Content for instructions on adding images via Image – Body 1.

Photo Editing Software and Exporting

  • Recommend using Adobe Photoshop to resize and export images for the web
  • Recommend file/export settings:
    • Resolution: 72 pixels/inch

      Start with 72. If your image resolution is not crisp, go to 150 pixels/inch.
    • Files types:
      • Photos – Use jpg or jpeg
      • Graphics – Use png

Accessibility

When adding images and graphics to your site, you must account for users who will be interacting with those assets via screen readers.

  • Alternative text
    • Alternative text (alt text) is required for all images on KU CMS sites.
  • Captions - Use captions to add additional context for screen reader users to understand the value of the image in relation to the content on the page.
  • Image choices - Select high-quality images that allow all users the best opportunity to perceive the content.
  • Avoid text as images (see info below)

Avoid Text as Images

  • Avoid using images/graphics that contain text, whenever possible.
    • Common examples include graphs and charts, screenshots, etc.
  • Sufficient alt text is required for all images.
  • Put the text and graphics on the page rather than using a single image to convey the information, if possible.

Why? It is difficult to properly describe extensive/complex text and graphics for users experiencing your site via screen reader. The more information in the image, the greater your burden to use alternative text and/or description fields to properly convey the salient details of the image.

Avoid Stock Photos or Images That Do Not Add Value

When selecting photos for your site, it is important to avoid two kinds of images:

  1. Stock photography (i.e., stock photos from non-KU sources)
  2. Images that do not add emotional or contextual value in direct support of the information on a page

These kinds of images can damage the user experience because they do not provide clear and meaningful value to your users – and it puts a literal barrier between your users and the information they are seeking.

This is especially important in header sections and tops of pages. It is far better to begin with text information that adds value for users than to force them to scroll past an image that provides only aesthetic value.

Images you do not have clear and verifiable rights to use are not permitted on KU CMS websites.

Guidelines and Best Practices

  • Images and graphics should be purposeful and add value to the user
    • (i.e., you should be able to explain why you selected a photo and what purpose it is serving)
  • Avoid using images and graphics that do not support the context of the page.
  • You must have appropriate rights to post images and graphics.
    • Do not use assets you do not know for certain you have rights to use.
  • Avoid clip art of all types.
  • Alternative text is required for all images and graphics.
  • Avoid use of screen shots and detailed graphics for accessibility compliance.

Support