All photos used on brynmawr.edu must be owned by Bryn Mawr College or in the public domain, sized and formatted for the web, and must meet accessibility guidelines.
- What Images Can I Use on brynmawr.edu?
- Sizing and Dimensions
- File Format and Optimizing for Web
- Accessible Complex Images (Graphics and Charts)
- Alt Text
In general, use of photos or images found via Google search, from news websites, or otherwise downloaded or copied from the web is prohibited by copyright law and by College policies, unless the image is royalty free or used under a license such as Creative Commons.
Photo resources (note that restrictions or license parameters may apply):
The first thing to remember when using photos in Drupal is not to use a file size that is too large.
The following are pixel widths and ratios that are most commonly used in Drupal.
Note: These are actual sizes, so when saving your image, make sure you are properly saving the image size as well as cropping to a ratio. Photos not cropped to these ratios will not fit space properly in some cases and may cut off parts of your image.
|Image Type/Use||Dimensions (in pixels)|
|Standard carousel image||
Maximum 1784 wide by 816 high
|Intro image (for page)||Maximum 892 wide by 408 high
Minimum 565 wide by 258 high
|Portrait for faculty/staff bio page and department page||225 wide (should be uniform ratio on department pages if possible; close to square or vertical crop)|
|Article image||Minimum 1200 wide for landscape formats, 565 wide for portrait or thumbnail-only|
|Spotlight||Minimum 275 wide by 185 tall
Recommended for vertical images: 400 wide by 520 high
|Horizontal-oriented images within body of page||Maximum 563 wide|
|Square or vertical-oriented images within body of page||Maximum 250-300 wide depending on use and crop/ratio|
|Right-hand sidebar image||Maximum 300 wide
Minimum 250 wide
|Impact slide||1920 wide by 640 high|
|Homepage slide||2400 wide by 1111 high|
JPG should be used in most cases. PNG and GIF are also usable formats. Images should be saved at 72 pixels per inch resolution. A quick way to optimize photos for the web can be viewed in the PhotoShop dialog box below, which appears when saving a JPG. Choose High for Image Options: Quality, and Baseline Optimized for Format Options.
When using a graphic, chart, infographic, or other complex image that contains detailed information, alt text should be used. In addition, if that information is not completely conveyed in alt text (see below), the information must also be included in text either on the page or elsewhere on the site. This Admissions infographic is such an example.
Also, complex images containing a lot of information should be avoided in carousels with multiple images when possible, because of the limited time the user has to view the image before it rotates.
Alternative text accompanying an image helps provide information for users who need screen readers because of visual or cognitive disabilities. It's a crucially important component of web accessibility.
Whether adding a photo to page content, a carousel, sidebar, or elsewhere, there is always an option to add alt text. Alt text should be added whenever uploading or using photos in Drupal. Usually, a simple description will suffice, such as the subject's name or a brief summary of what is being depicted.
Complete documentation for photo guidelines in Drupal can be found in the Drupal image guide and Image Size and Format Guide. Visit this image editing resource page to learn more about PhotoShop and other photo editing options.