In this Article
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?
Note: This article is meant to outline general recommended guidelines. Every site is unique, however, and exact dimensions for your site's custom treatments and enhancements can be found on your Site Instructions page in your page tree.
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
Dimensions
File Size + Type
- .jpeg
- .jpg
- .png
- .heic
- .gif
Note: For more information, see "File types not allowed in Resources."
Resolution
Text on Images
Central Focal Point
Media guidelines + best practices
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. 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.
Fixed height interior hero images
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
- 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
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:Note: This is one of the very few scenarios where File Manager is where these images will be uploaded instead of Resources.
Comments
Please Sign in to leave a comment if you don't see the comment box below.