Drupal 10 Website Image Guide

Choosing the Right Images For Your Website

Choosing the right images for your website is essential for making a strong first impression. The visuals you pick can help tell your story, engage visitors, and make your site feel welcoming and professional. But with so many options out there, how do you know which images will work best?

When choosing images, it is also important to ensure they are accessible for everyone, including people with disabilities. Images are not just used to enhance your site visually, but they can also make your content more engaging and understandable for users with various needs. When choosing and optimizing images with accessibility in mind, you’re not just following best practices, you’re also making your site more inclusive and welcoming.

In this guide, we’ll walk you through simple steps to choose images that enhance your website’s look and feel, support your message, and create a positive experience for your audience.

Resizing & Cropping Images

Before you attempt to alter any of your photos, it's important to understand the difference between resizing and cropping. Resizing changes the size of an image, but allows it to keep the same shape and height to width ratio, while cropping removes portions of the image and can change the size, shape, and height to width ratio. 

Find resizing tools

 

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

Images & Accessibility

Because images and graphics make content more pleasant and easier to understand for people with or without learning disabilities, we need to ensure that our images are accessible to everyone. They serve as cues for people with visual impairments to orient themselves in the content and are also helpful for those with cognitive and/or learning disabilities. Both images with text and images without alt text can negatively affect both your website and the user's experience in many ways. Not only do they cause problems for people with vision impairments, but also for people who are just trying to find information on your website.

learn more about images on text

Standard Image Sizes


In order to help users maintain a consistent look for images in WYSIWYGs, we are now introducing standard image sizes. Instead of having to manually resize your photos, these ten sizes will resize your image to the size you select. For more information about how standard-size images work, please visit the WYSIWYG section of our web guide or our standard image size sample page. 


 Standard image size sample page    WYSIWYG section of our web guide

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 best practices for attributing images

Additional Web Resources

 

Web Accessibility

learn how to create accessible web content

Social Media Guide and Policies

review WashU's guide and policies for social media

Branding & Logo Policies

review WashU branding and logo policies

Finding Photography for your Site

Have more questions?

email the web team