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.
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.
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.
Any photos you use on the University website must be owned by the University or be used in accordance with applicable copyright laws. University Communications has a collection of photos available for use on the University website.
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 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.