...
- For the website, we use photos taken by WSB's professional photographer or UW's professional photographers. You can view those images on the Photo Shelter PhotoShelter accounts: WSB Photo Shelter, UW Photo ShelterPhotoShelter, UW PhotoShelter.
- To request access to WSB's PhotoShelter library, follow the instructions in the Brand Toolkit.
- Partners may submit other images for consideration, but we might not accept them if they do not meet our standards. We require original, in color, and uncropped images in JPEG format. They must fit in with the school's brand and tone standards. Do not pull images from webpages, emails, or social media. Approximate dimensions of 2400px width by 1600px height are required.
- Always Export for Web when using Adobe.
- Images must be less than 5MB.
- Images must be a jpg file type unless there are transparent parts, then png file type may be used.
Detailed standards
Hero Photos, Jumbotron Photos, Traditional Card Photos, Horizontal Card Photos, Spotlight Card Photos, Featured Image Photos, and other large photos
Photos
...
should be
...
2400px
...
by 1600px. This the standard Photo Shelter "large" size. (The height may vary slightly. UW's ratio puts the height at 1597px for large and WSB's ratio puts it at 1661px for large.) 
...
A note on hero photos: the main content of the photo
...
should be vertically centered in the photo because at large screens (when the photo gets really wide), we crop the height of the photo so it doesn't take up tons of vertical space. So if you're photo has people in it, make sure their heads are vertically centered.
News Hero
When supplying an image for the full-width hero at the top of the News page, the image MUST be at least 2400px wide. The image height can vary, but we recommend somewhere between 1300px and 1600px tall.
Directory Photos
Headshots (default hero layout)
These are styled into a circle via CSS, so the uploaded photo must be a square. The square should be a minimum of 300px by 300px.
Portrait photos (alternative hero layout - first used with T2L3 faculty)
- Size: 2400x1700px
- Format: Png file with subject and background cutout
- Light gradient aura was added to the background of T2L3 faculty images
- Placement
- Subject’s face should be near the top because the bottom of the image gets cropped at various screen sizes
- Subject should be centered on the horizontal axis (e.g. for T2L3 faculty, the best images have yellow background on both sides of the subject, like Aziza)
- No gray background gradient needed; this is added with code
Stylized Cutout Headshots
The gray-background stylized headshot should be 512px in width, height can vary.
Logos
Company logos (for employment/career sections) should be 512px in width. (Height varies because different companies have different logo dimensions.)
(Note: 512px was chosen because it is the WordPress "medium" image size.)
Events - Featured Images
The recommendation is 1200px by 450px. See our Events documentation for more information on Featured Images for Events.
Process for Acquiring Images
- For designers and others sourcing photos for the website, share the link to the Photo Shelter page with the web developer / or make a lightbox and send share the link to with the developer in the relevant Jira ticket.
- Web developer, download the large size from the Photo Shelter link and then upload it to WordPress.
- If the photo is not in Photo Shelter yet or is one that needed to be cropped to a square, please upload the photo to the proper folder (Images may be attached to the relevant Jira ticket. If it's a lot of photos (that aren't in Photo Shelter for some reason), then uploading them to a Google Drive folder works. For MSC members, use MSC Web → Design/Visual → Assets → Images and then find the proper folder based on what page it's going on) in the Images folder in the Assets folder of the MSC Web Google Drive: https://drive.google.com/drive/folders/1KMnVunAwjqtJrZG8y_d4Vy--1R2aYkm-?usp=sharing MSC Web → Design/Visual → Assets → Images
Adding Images to WordPress
- Upload all images to the correct folder in the Media library. Folder structure mirrors page structure.
- Do not change the name of the image file because we want to be consistent with what the designers/photographers use.
...