Saving Images for the Web
When you upload an image to the website it should be resized and saved appropriately for the web. See Saving Images for the Web for instructions and information about the different file formats we support.
Caption Shortcode
When you place an image on a page, it’s best to wrap the image in a caption shortcode. This will tell the website that the image should be dynamically scaled to fit the space available.
If you provide text in the caption shortcode, it will display at the bottom of the image – but this text is optional.
ALT Attribute
When you upload an image to the website you must supply an ALT attribute in the media library. (You will be brought to this screen automatically after uploading an image.)
The ALT attribute will be read aloud to visitors who use screen readers. You should describe the image succinctly – no more than one sentence. If you need more space to describe the image, use the caption shortcode.
Photo Selection
Any photos you use on the University website and social media must be owned by the University or be used in accordance with applicable copyright laws.
Whenever you choose photos, artwork, clipart, or other artistic works for use on the University’s many digital channels (websites, calendars, blogs, newsletters, AND social media accounts, etc.) you must acquire the appropriate rights to use those works. If you do not acquire these rights, your department, college, school, and the University are vulnerable to legal action. Please see the Content Creators’ Guide to Photo and Image Licensing for more information.
University Communications has a collection of photos available for use on the University website that are free for you to use.
If you search for images using Google Image Search, make sure you select “Labeled for reuse” from the “Usage Rights” menu to filter out copyrighted images.
Wikimedia Commons is also an excellent source for freely-usable stock photography.
Some things to keep in mind when selecting photos:
- Will this photo have text overlaid on top? Header photos on the University website have white text with a subtle shadow overlaid on top. You can ensure readability by selecting photos that are both relatively dark in the middle and that don’t have a lot of sharp details.
- Where will the faces in the photo end up? If you’re putting the photo into a header area you should try to make sure that peoples’ faces aren’t covered by the header text and that they’re not cut off by the edge of the image. Tip: stay away from images that contain close-ups of peoples’ faces. If you want to use a header photo that contains faces, opt for one that’s more zoomed out.
Understanding Aspect Ratio
The aspect ratio of a photo is calculated by dividing the width of a photo by the height of a photo. If you know the aspect ratio and either the width or height, you can calculate the other value.
aspect = width/height
width = aspect/height
height = width/aspect
Types of Photos
Homepage Hero Image
Homepage hero images are displayed at the top of a homepage layout.
- Aspect Ratio: 1.77
- Recommended Width: 3600
- Recommended Height: 2025
Sub-page Hero Image
Sub-page hero images are displayed at the top of a sub-page layout.
- Aspect Ratio: 3.33
- Recommended Width: 3600
- Recommended Height: 1080
Masonry Tiles
Masonry tiles are used on certain homepage layouts. These tiles are all either square or they’re twice as wide as they are tall. We don’t recommend a specific width or height, but anything above 1000 pixels wide should work well.
News Feature Images
Feature images on news articles (posts) are not bound to an specific size and they will display after the headline. In general, though, it’s best to use wide images instead of tall ones.
