Photography

Photography should be shot in a 3:2 aspect ratio for landscape and a 2:3 aspect ratio for portrait.


Hero Imagery

The hero image for Washington University websites is the large banner (billboard) that displays at the top of any webpage below the navigation. The hero image should be at least 1440 pixels x 550 pixels, however, it is recommended to increase that to 2880 pixels x 1100 pixels so it displays properly on retina displays.


News - Featured Image

The featured image for News articles on the School of Medicine website is the first image of the article. The image is also used as the thumbnail on the detail listing page for the news landing page. The recommended image size for this image is 700 x 467 pixels.

Using portrait images as a feature image

Using landscape (3:2) images is the best practice for featured images, but on some occasions, it might be necessary to use a portrait image, such as a headshot. When uploading a portrait image to the website, the website is programmed to display that image with a light gray background (#F9F9F9), so there is no additional work needed to be done. When creating new websites however, this is something to keep in mind. We have 2 templates for doing this. One is to pair the image offsetted with a gray background, while the other is pairing the image with the outline shield on a gray background.


Alt Tags

Alt tags are used in the HTML code to describe what is in the picture. One of the primary reasons to use alt tags is for accessbility. For instance, when someone with a vision impairment is viewing your page, a screen reader can read the alt tag to the user so they can understand what is on the screen. Another great benefit of alt tags is that it helps with search engine optimization. Using alt tags will benefit your search engine rankings as Google places a high important on alt tags.

Below is a sample HTML image tag and how to apply an alt tag to describe the image.

<img class="example-image" src="graduation.jpg" alt="Image of Washington University medical students" />