Media guidelines and best practices

Whether you're updating the homepage slideshow, adding a hero image on an interior banner, posting a news photo gallery or uploading a splash video, keeping the imagery on your site fresh is always a good idea. The Resources module makes it easy for you to upload and keep organized. But what's the right size?

In this Article

• Media terminology
  • Aspect Ratio
  • Dimensions
  • File Size + Type
  • Resolution
  • Central Focal Point
• Media guidelines + best practices
  • Alternative text (alt text) 
  • Homepage hero images
  • Interior media guidelines
  • Thumbnails

---

Media terminology

These terms defined below are often used interchangeably, but they are unique elements of an image. Understanding how one affects the other can help you choose a good image for the space you are using and how to properly crop the image or reduce the file size while still keeping the image’s correct proportions.

Aspect Ratio

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.

Dimensions

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

File Size + Type

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
• .gif
• .heic

Resolution

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:

But it doesn’t look as good as the original because the aspect ratio changed. Instead of 4:3 it is now 1:2. So in this case cropping the image is the best option and choosing what portion of the full image we want to use.

Text on Images 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.

Central Focal Point

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.

Media guidelines + best practices

Alternative text (alt text) 

Adding alt-text to images helps users who rely on screen readers to understand the content and context of those images. It also improves the overall user experience and enhances search engine optimization (SEO) by providing more context to search engines. Learn more in the article, "Best Practice: Writing alt-text for images."

Homepage hero images

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:
  • 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.

Hero and background videos

These are short, repeating video clips that play in the background of a web page. Recommended video settings for hero/background videos are:

• 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."

Thumbnails

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

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."