Images and Media
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:
Image Requirements and Best Practices
- 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.
- 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.
- 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.
- 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. Most image files on Boise State WordPress sites should be smaller than 1 MB, with a few larger images requiring up to 2 MB file size. In general, the smaller you can make your image files without sacrificing quality, the better the experience will be for your audience. Also, consider how many images you add to one page. Adding more than one large image to a page can significantly slow down page load time for some users.
- The Gallery panel is the supported method of displaying a grouping of photos together. The WordPress Gallery found in the default text editor within Add Media > “Create Gallery” is not accessible and is therefore not supported.
- Do not use clipart.
- Do not use icons.
- Do not use emojis® or graphical avatars such as Bitmoji®, Animoji® or Memoji®.
- Consult Brand Standards when using Boise State graphics.
- 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.
- 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. Adding alternative text is not enough.
- 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.
- 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.
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.
Boise State employees can use Google Drive File Stream to upload images to WordPress directly from Google Drive.
The Video + Text Panel is available for adding YouTube videos to Boise State WordPress sites.
Audio files can be converted into a video file with an associated image and uploaded to YouTube. The standard YouTube embed can then be used to add the audio file to a page on your site.
Boise State’s WordPress environment allows uploading of the following file types: