Adding Images

At minimum, your website should include a featured image at the top of the homepage and all primary pages (i.e., the pages that appear in your main menu at the top of the page).*

Choosing the right photos

Images aren’t just decoration; they help shape your message and impressions of your brand. Our guide includes standards for selectingshooting and sizing the images on your site.

See photo guidelines »


Related information:


Prepping image files for web

Before uploading photos to your site, use a photo editing tool to save them at the correct dimensions and according to the settings listed below.

If you’re unfamiliar with photo editing software, our tutorial, which includes instructions for popular paid and free tools, can help you save images correctly.

See tutorial: Saving images for web »

  1. Size your images correctly for where they will appear on your site
  2. Optimize image files for web use; this process compresses the file and prevents you from uploading files that are too large (big files slow page load times and anger the Google gods)
    1. Save at a resolution of 72 dpi (dots per inch / pixels per inch)
    2. Save as RGB, not CMKY
    3. File size should be no larger than 100 KB
    4. If using Photoshop, you can achieve this by using Save for Web
  3. Save as png, jpg, or gif
  4. Filename should be short and descriptive (ex: gordon-fellow-lab.jpg)

Adding images to your site

To insert a single photo on a page

  1. Size and save your photo according to the instructions above
  2. Open the lucky page in editor view
  3. Click your cursor where the image should go, then click Add Media (button above the text editor box)
  4. Select either Upload Files or Media Library from the top left (the Media Library contains all of the files that have already been uploaded)
  5. Upload and/or click to select the image you’re inserting
  6. Check these properties on the right:
    • Title: Very short description, can be the same as the file name
    • Caption: Optional; if image is a headshot, include the last name only
    • Alt Text: Optional; include only if information about the photo will be helpful if the photo doesn’t appear (due to user’s visual support software, page load problems, etc.)
    • Description: Leave blank
    • Alignment: Depends on photo and intended placement
    • Link to: None
    • Size (see guide to image sizes):
      1. Standard/landscape images: Large
      2. Vertical images: Medium
      3. Head-and-shoulders portrait: Headshot
  7. Click Insert into page
  8. To edit the image you’ve inserted, hover over the image and select edit option
  9. Update page as usual

To upload several photos (or other files) at once

All files uploaded to your site are saved in the Media Library. You can add files to the library directly, which is quicker and easier if you have several images to add.

  1. Size and save your photos according to the instructions above
  2. In WordPress click Media in the left menu, then Add New at the top
  3. Add files by drag and drop or browsing
  4. After all files have been added to the Media Library, navigate to the page(s) you’re adding them to and follow the directions above for adding a photo to a page

*Smaller websites, such as sites for labs and student interest groups, may omit the featured image from their top level pages. These website should still include a featured image on the homepage. Talk to your project team or email webtheme@wustl.edu if you would like to opt out of the featured image requirement.