Images and Media

Image Requirements and Best Practices

Photos are an important part of making your website interesting and engaging. When used incorrectly, however, images can be distracting rather than helpful. Keep the following in mind when adding images to your site:

  • Photography of real Boise State students, faculty, staff and community members will look more authentic and be more engaging than illustrations, generic graphics or stock content.
  • Images require descriptive alternative text. Alternative text describes images for users who cannot see them and is read by screen readers or displayed on the screen when the image is not available to users. Alternative text does not need to describe every element in an image, but rather provide a short, concise, description of either the content, or the function. For more information about alternative descriptions read WebAIM’s article on Alternative Text or utilize the W3C’s Web Accessibility Initiative Alt Text Decision Tree.
  • Always follow image size recommendations and optimize images for the web. Large image files have a significant negative impact on site performance. Optimal image sizes for panels are listed on each panel instructions page on this site. For content that does not use panels, we recommend images be no larger than 1300px x 687px.
  • Text comes first. While a good photo may illustrate key details and increase interest, a page should be understandable and operable without it.
  • Use theme elements, not images, for page layout, navigation links, and buttons.
  • Images of text are not accessible and do not meet WCAG 2.x Level AA Conformance. Do not use images of text when you can use plain text to convey the same information. Simply adding alternative text is not enough.
  • Avoid any content that scrolls, moves, blinks, or flashes. It is distracting for users, and in some cases it may cause physical harm to users with seizure disorders.
  • Complex images such as screen captures for documentation, flowcharts and diagrams should have a text equivalent on the same page to fully describe the meaning of the image.
  • Boise State’s Campus Map provides a text alternative for map locations. For all campus locations  you should embed a map view from the Campus Map to display maps.
  • Do not use clipart.
  • Do not use icons.
  • Consult Brand Standards when using Boise State graphics.

Review Images for Accessibility

Review images before and after publishing on your site to ensure they are accessible for all users. For more tips on using Siteimprove to review and approve your images, see Review Images.

Web Photo Repository

Boise State Photo Services provides a repository of pre-sized images for use on OIT-hosted websites using the Boise State WordPress panels theme. These images are updated frequently and available at no cost for use on Boise State WordPress sites. Logged in Boise State staff and faculty can access the images in the Google Drive Web Image Repository.

Manage images with Google Drive File Stream

Following the steps below, Boise State employees can add the repository to their own Google Drive and eliminate the process of downloading images to your desktop prior to uploading to the WordPress Media Library.

Download Google Drive File Stream

  1. Open the Web Redesign Image Repository Google Drive folder and sign in with your Boise State email address and login information if prompted.
  2. Right-click the folder name and select “Add to my drive”.
  3. Click Settings (the cog-wheel icon) in Google Drive and download Drive File Stream.
  4. Follow the installation instructions. You will be prompted to sign into Google again using your Boise State login information.
  5. The Drive File Stream will sync with your account.

After the installation process and sync, all your Google Drive documents and folders will be available from your desktop. You can now upload images from your Google Drive directly to the WordPress Media Library as if they had been downloaded to your desktop.

Upload Images to WordPress using Google Drive File Stream

  1. Click Add Media and/or Upload to Media Library.
  2. In the file explorer popup window, find the Google Drive File Steam drive and open My Drive.
  3. If you’ve already added the shared Web Redesign Image Repository folder to your Google Drive, you will now find it in the file explorer window. Double-click to open the folder, then open the folder for the appropriate image specifications and select an image for upload.
  4. Click Open to add the selected image to the WordPress Media Library. Add appropriate title and alt text details.
  5. Click “Insert into page” to add the image to your WordPress page or post.

Videos

The Video + Text Panel is available for adding YouTube videos to Boise State WordPress sites.

File Uploads

Boise State’s WordPress environment allows uploading of the following file types:

  • jpg
  • jpeg
  • png
  • gif
  • mp3
  • mov
  • avi
  • wmv
  • midi
  • mid
  • pdf
  • xlsx
  • xls
  • doc
  • docx