Prominently show a full-width image or series of images as a slider at the top of the page. Hero images can also have a title, call to action, or featured content added inside the image.
They are useful for enhancing information on the page with strong visual representation, but should not be overused. Most information-based pages do not need them. Hero images can cause slower load times on mobile networks, disrupting the user experience.
Scroll through the hero slider above to see examples of each hero image type.
In this page
Usage
Do
- Use images that are cropped to 1600 pixels wide and 500 pixels in height for best results.
- Keep headlines, captions, and call to actions brief.
- Choose an image that fits the purpose of your message.
- Use photos taken by your unit or downloaded from sites like Adobe Stock, Unsplash, or the UW Photo Library
Don’t
- Use several sentences for headlines, captions, or call to actions.
- Use images that are smaller or larger than 1600 pixels wide and 500 pixels in height.
- Use an image you do not own the rights to.
Accessibility
Be sure to include alternative text for your hero image. See the Center for UX guidelines for more information on writing alternative text for images and learning how to choose appropriate images.