Recommended image and video dimensions

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. But what's the right size?

This article is meant to outline general recommended dimensions. Every site is unique, however, and exact dimensions for your site's custom treatments and enhancements can be found within the Production branch of your site.

Homepage

Full-width slider images should be cropped to around 1440 x 750px. Please be sure to resize your image first to around 1440px wide, then crop the height of the image so that it is roughly 750px tall.

Best practice: The focal point of all images should always be in the center, as some cropping is bound to occur to accommodate for varying screen widths.

Interior

For images and videos used on the interior pages of your site, use the following guidelines.

Hero treatments: 1440 x 700px
Featured news & events: 800 x 800px

Hero/background videos

“Hero” or “background” videos refer to short, repeating video clips that play in the background of a web page. Due to the size of video files, we recommend that you keep the length of these clips to around 10-20 seconds, with no audio.

Note: Only desktop web browsers that support HTML5 can display videos as background elements. Videos will not play on mobile devices such as iPads, due to limited HTML5 support of mobile web browsers.

The recommend video settings for hero/background videos are:

Video size: 1080P
Video bitrate: 2500 Kbps
Frame rate: 30 fps or 24fps
Key frames: None
Duration: 20-90 seconds
Audio: None
Format: MP4
Was this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.