You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 30 Next »

Basic standards

  • For the website, we use photos taken by WSB's professional photographer or UW's professional photographers. You can view those images on the PhotoShelter accounts: WSB PhotoShelter, UW PhotoShelter.
  • 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.
  • 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 512 x 512px.

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 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 or make a lightbox and share the link with the developer in the relevant Jira ticket.
  • 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.


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.


  • No labels