Skip to main content
Apply Give
Menu

ARHU Website User Guide: Images and Media

Learn about the sizes and formats for images and media on your site. 

Menu

General Guidelines: 

  • Size: Most images have a 16:9 aspect ratio, except the directory and some of the widgets, which are square. When in doubt, horizontal or landscape images work best.
  • Weight: The maximum weight of images and gifs is 2MB. Choose the file format with the least weight, usually a jpg instead of a PNG.   
  • File Type: The ideal file format for images is optimized for web JPEG, if the image needs transparency, when possible utilize PNG-8, in the extreme case that you need a large image with transparency, optimize for web PNG-24. 
  • Videos: Headers can have animation and b-roll video in mp4 format with a maximum weight of 6MB. Headers cannot be gifs. Insets cannot have video.
  • Gifs: Insets can be gifs. These should weigh no more than 2MB. 
  • Focal Point: Use images with a vertical and horizontally centered focal point. An image of people of different heights, for example, will cut off the tallest or shortest people.
  • Source, Attribution and alt text: Keep track of image titles, sources and credits and provide a list of all images with attribution and links with the final product. This information helps us write alt text for people using screen readers. Animations should list images by slide. Collages should list all images top to bottom, left to right.
  • Saving: Please create a folder on Box or Drive for all images and include a link to the folder in the "Reference Documents and Files" section at the top of the wrike task.
  • Naming Conventions: Use a combination of the unit abbreviation, image type, and descriptive language, in this format: "ARHU_Header_AlumniBookClub"

Image Sizes

Unit Homepage Hero/Slider

1600x900px (16:9 aspect ratio): These images display differently depending on the screen size. With all but the smallest size, 40% of the left side of the image is covered with text (see example). As the screen gets smaller, the image is cut off from the top and bottom. On an average monitor, the image has 185 px cut off from the top and also bottom of the image--i.e. It displays the middle 530 px of the image. Very little to nothing is cut off the left or right side.

ARHU Hero

1600x900px (16:9 aspect ratio): On the ARHU home page, heros are responsive but display differently (see example). There is no text overlay. As the screen gets smaller, the image is cut vertically and horizontally from the center. On an average monitor, the area displayed is 400 px wide x 300 high.

 

Internal page header

1920x1080px (16:9 aspect ratio). This image changes with screen size. The focal point should be vertically and horizontally centered, with all vertical content within the middle 320 px of the image. On an average monitor, 308px will be cut off from both the top and the bottom.

Large images

1600x900px (16:9 aspect ratio)

  • Large callout (statistic and image) widget: Image changes w/screen size & is partially covered w/ text. Focal point should be vertically in the top 1/3 and horizontally centered.
  • Large image gallery (local) widget: Will maintain aspect ratio regardless of screen size. Focal point can be anywhere
  • News Inset: Image changes w/ screen size & display area. A news item set to display in as "featured news" will have a larger image than one tagged as "in the news. Sometimes these images have overlaid text in lower half. Because of the dynamic nature of these images, it's especially important to follow the size guidelines and keep the focal point vertically & horizontally centered. 
  • Event Inset: This image functions like the news inset.

Small and Medium Images

1200x675px (also square at 1200px width)

  1. large callout gallery (text column with image) widget: Image changes w/screen size. Focal point should be vertically & horizontally centered.
  2. two column (image with text) widget: Will maintain aspect ratio regardless of screen size. Focal point can be anywhere.
  3. three column (image) widget: Image changes w/screen size. Focal point should be vertically & horizontally centered.
  4. WYSIWYG body with optional sidebar text or photo widget: Both image options will maintain aspect ratio regardless of screen size. Focal point can be anywhere.
  5. Red intro block widget: This has an optional image which, when used, appears on the right. 
  6. Tab (unit homepage styling) widget: This widget looks best when used with images, though they are optional.

Profile Images

800px width

  1. Profile images: Make sure face is vertically & horizontally centered
  2. Contact directory widget: Image is set in profile page and displays as square in the widget & search results.

Embedded Images

Embedded images can be 960 px wide (large), 640 px wide (medium), 345 px wide (small). The following widgets and dynamic content types can have images embedded in the body (i.e. separate from insets). 

  1. News
  2. Events
  3. Activity
  4. Accordion widget
  5. Tabs widget 
  6. Related content block widget