Website Image Guide

Photo Guidelines

Taking your own photo?

When a student, staff, faculty, or alumnus/alumna will be submitting a portrait photo, here are some recommendations to follow that will help you achieve the best possible image. The portrait should be well lit, in focus, and show the subject from the waist up with margins on the left, right, and top. The image should be uncropped and as high a resolution as possible (i.e., the original image) with a minimum size of 680x680 pixels. 

learn about photo guidelines

Minimum Photo Sizes

Each section with the option to upload an image (a "Browse" button) is designed so that images must meet a minimum image size to display correctly (or at all, in many cases). This does not mean that you need to resize a larger photo down to this minimum size. In fact, we suggest using a photo larger than the minimum size so the focus tool will work properly.

minimum photo sizes for A&S websites

Why are Thumbnail and Header Images so Important for Articles and Events?

Because they are everywhere!  That thumbnail header images you are uploading don't just live in its respective event or article.  You may think you don't need thumbnail and header images, but when it comes to content share, other people do!  When your content is shared to another site, they are unable to add a photo. This means that when they display your article or event on their side, it will only show the default ampersand image, which may discourage them from featuring it. Also, if you are hoping to have your content shared on the Artsci site or the Ampersand page, it is crucial to have a thumbnail photo.  It can be pulled into many other sections on your website:

Thumbnail Images: 

  • home page
  • mulitipurpose page
  • the grid view of your events or news landing page
  • recent news scroll at the bottom of a person profile
  • recent news scroll at the bottom of articles

Header Images:

  • top of individual events and articles
  • top of the home page when using an event or article header
  • top of the events and articles landing page when featuring articles in the header slide show
     

How to choose a great thumbnail photo:

  • use a photo larger than the 600x600 minimum so the focus tool will work
  • upload the image to see what it looks like before you alter the photo
  • don't use a flyer or anything with text
  • don't use a close-up
  • choose one that will look nice in multiple sections
  • don't depend on the ampersand default photo!

 

How to choose a great header photo: 

  • use a photo larger than the minimum size so the focus tool will work
  • upload the image to see what it looks like before you alter the photo
  • don't use a flyer or anything with text
  • don't use closeups of people or headshots 
  • use a landscape-oriented photo

 

Still having problems finding just the right photo?   

  • have a few general photos already picked out (classrooms, students in an auditorium, campus photos, etc)
  • use a specific photo for each of your categories
  • keep trying different photos!
  • ask us for help!

Photos and Copyright

The complexities of intellectual property rights are best avoided by using original WashU photos. Even WashU images, if published in scientific journals, may be subject to a particular journal’s licensing restrictions. Do not use any images without first securing all necessary rights, permissions and licensing agreements. Note that copyright law pertains differently to educational classroom use than it does to general distribution and publication.

If you use open source photos, take care to follow licensing conditions and give credit, following the CC best practices for attributing images.

learn about CC best practices for attributing images

How to add inline images

Sometimes adding inline images are tricky, but they can be a great addition to an article or event! These instructions apply to the new (2017-present) Arts & Sciences web theme

Images & Accessibility

Text on Images

  • not accessible to people with disabilities and can't be read by screen readers
  • can't be found by search engines
  • hard to read and pixelated when it's enlarged
  • user can't interact with the text (click on links, emails, etc)
  • user can't copy/paste from the image

Do:

  • take advantage of the different types of header options that allow you to add text and photos in a way that is accessible:

  • when adding an event, fill out all of the fields and then add a flyer in the wysiwyg body section

Don't:

  • use photo editing software to add text to your photos
  • use flyers as your only source of information
  • use flyers or photos with text in thumbnails, headers, or other sections with photo uploads

 

Alt Text

Alt text is one of the easiest ways to help keep your website accessible.  People who use assistive devices, like screen readers, need alt text for the user to get the full experience of your website. The easiest way to stay consistent with alt text is to add it whenever you upload a new photo. 

Images and graphics make content more pleasant and easier to understand for many people, in particular, those with cognitive and/or learning disabilities. They serve as cues for people with visual impairments, including people with low vision, to orient themselves in the content. Adding an image or a graphic to your content without using alt text or empty alt attribute, can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. 

Informative Images: An image that contains information that is helpful for the user in understanding the content of the page. These images need to have alt text.

  • Use a short description of about 100 characters or less and use important keywords if possible
  • Only use relevant information

Decorative Images: An image that is present on the page purely to make it look good and doesn't convey any necessary information.

  • These images need to have an empty alt attribute, which is displayed as two quotation marks:  ""   

 

 

Find Existing Photography