Media guidelines and best practices

The proportional relationship between the height and width of a rectangle. Aspect ratio for shapes is represented by x:y, but the actual numbers do not matter as long as the ratio remains the same, just as with image aspect ratio. For example, a rectangle’s aspect ratio is the ratio of it’s long side in relation to its short side.

The height and width of the image, generally given in terms of pixels. Examples: 800 x 600, 200 x 100; 150 x 150

How big the file is in KB, MB, GB. This is often confused with dimensions. It's possible to use the following image types in Resources:

• .jpeg
• .jpg
• .png
• .heic
• .gif

Note: For more information, see "File types not allowed in Resources."

Often web images are displayed best at 72 ppi (pixels per inch) or 144 ppi for digital and higher resolutions such as 300 ppi for printing. Starting with this image which is 800 pixels (width) by 600 pixels (height) it has an aspect ratio of 4:3 and saved at 72 ppi (resolution), a file size of 760 KB.

Now let’s pick a different place for our page that must have the image fit into a space that is 300 wide x 600 high. If we resize the image, it looks like this:

Avoid using text on the image itself as the text will not be compliant with accessibility standards as it has been turned into an image. If your banner supports captions, we recommend using those as a way to display text.

For most scenarios, photos are set as background images to the container they are in. With this setup, there is typically some clipping that occurs around the edges. For that reason, we recommend that you select images with a central focal point and no closeups. Also, and most importantly, avoid adding text, logos, or similar graphics that won't look right if clipped.

First, consult your Site Instructions page in the Instructions branch for the guidelines for your site's specifications. Here are some general guidelines: 

• Aspect Ratio: Full-width slider hero images should be cropped to around a 16:9 aspect ratio. To do this:
  • Step 1: RESIZE image to a minimum of 1920px wide.
  • Step 2: CROP the height of the image to a minimum of 1080px tall.

Header images are great for drawing visitors into a page and leaving an impression. You want to use images that fit your brand, but it's also important to make a selection that fits your site's design, as well. Depending on the style of your site's header banner, some prep work may be necessary to ensure that your content looks good on all devices.

Interior media guidelines:

The proportional relationship between the height and width of a rectangle. Aspect ratio for shapes is represented by x:y, but the actual numbers do not matter as long as the ratio remains the same, just as with image aspect ratio. For example, a rectangle’s aspect ratio is the ratio of it’s long side in relation to its short side.

• Hero treatments: 16:9 aspect ratio
• Featured news & events: 1:1 aspect ratio (Miniumim 800px width & height)

Fixed height banners:

If your site features a hero banner with a fixed height (or max-height), then your images will crop to fit the height set by the design.

Adaptive height banners:

If your site features a hero banner with an adaptive height (or full height), then your images will scale with the screen without cropping.

• Video size: 1080P
• Video bitrate: 2500 Kbps
• Frame rate: 30 fps or 24fps
• Key frames: None
• Duration: 15-30 seconds
• Audio: None
• Format: MP4

For tips and best practices on how to best optimize videos, read "Optimize video for your website."

A thumbnail is a small image representation of a larger image, usually intended to make it easier and faster to look at or manage a group of larger images. In your Finalsite platform, there are places where you can upload and display thumbnails.

---

Constituent profile thumbnails

In order to add a profile picture to a Constituent's record, you must first upload the image file to your site using File Manager. For more information on how to get started and more precise dimensions, see:

• Uploading files or images to File Manager
• Editing user thumbnail images

Note: This is one of the very few scenarios where File Manager is where these images will be uploaded instead of Resources. 

Post module thumbnails

Thumbnail images can be added to both boards and individual posts to display in various ways on your Composer site. For more on how it works and for precise dimension recommendations, see the following article: Adding thumbnails to boards and posts.

Video thumbnails

The first frame of a video is not automatically used as the thumbnail because, quite frequently, that frame is completely black. In Resources, you can add a thumbnail to display on the page where visitors can see the video to choose to watch it. For more information on how this works, see "Quick tip: Set a video thumbnail."