Skip to page content

Need a cheat sheet for multimedia dimensions?

Print off this table with the image and video dimensions, and keep it handy when you want to add or request additional multimedia to your webpage!

Appropriate Multimedia Dimensions

Meeting your goals on the web often means using media in a strategic way, whether it includes images, video, or audio components. Before placing any multimedia content on the website, you should know what is and isn't available to use in any given section. Not all multimedia fits appropriately given the way our webpages must now display for a diverse set of device screen sizes and operating systems. In fact, some operating systems won't let certain multimedia display as expected, so you have to consider alternative solutions for those devices. 

For example, those cool new background videos that display on a desktop computer do not display on all mobile devices because of the concern mobile device makers have about abusing your cellular data plan for downloading those videos or running your battery dry playing all those videos. Instead, they may pick the first frame of your video to sit statically on the webpage. In which case, you need to make sure that first frame is informative enough that it doesn't confuse people.

Additionally, because our webpages are responsive, or react to the screen size available, your content may be displayed on even larger screens than mobile devices or desktop monitors. Therefore, image content that used to be appropriate for websites in the past may be too small for technology today. Therefore, quality standards are vitally important in combination with the media dimensions allowed in each content module.

Determining Dimensions

In order to determine what you can use in any content module block, go up to the Edit button and select it to reveal the Content in that particular block. Before all the questions and fields that you fill in, you will see the word "DEFAULT" displayed. After that will be the name of the Content Module Block. Compare that name to the cheat sheet with the image and video dimensions Web Services provides or the tables below. 

For example, the module may say, "DEFAULT - Tall Aside Feature Panel" which is the most commonly used Content Module Block due to its flexibility. Look for "Tall Aside Feature Panel" and note the dimensions allowed. In this module, there is only a minimum for images, which is 720 pixels wide, the standard for full screen viewing on a mobile device. While not noted on the chart we provide, all images should be at 72 dpi, which is the normal setting off a camera. Notice also those dimensions are the same for both Stacked and Right Nav Templates. All dimensions are the same with the exception of slideshow images.

If you are working with slideshow images, among other things, you need to determine which template your website is in. To determine whether you are on the Stacked or Right Nav template, look at the page the module is on, via a desktop monitor, to see if there is any navigation on the right-hand side with white space filling the rest of that column. The main content should not be wrapping around the right navigation. Stacked pages have content modules stacked on each other like layers of cake or a stack of pancakes or layers of ingredients on a hamburger. Navigation, should any exist on a Stacked Template, would be within the main contents of the webpage or breadcrumbs, not the right-hand side of the desktop screen. 

Once you've determined the template and modules, you will have confirmed the minimum dimensions and/or proportions of your images. Videos, on the other hand, must typically comply with standard video dimensions (a 16:9 ratio) unless Web Strategy is creating a background video for use in a slideshow.

If you are asking others to provide you with photos, they need to provide photo quality (typically straight from the camera), with minimum dimensions of 1600 pixels wide by 1200 pixels tall.

The following table shows the minimum sizes of graphics for each module, however, where both width and height are defined, make sure your proportions are always the same, even if the graphic is larger.

Image Dimensions for Modules
Module Stacked Template Right Navigation Template
Button Panel n/a n/a
Calendar Panel n/a n/a
Photo Feature Panel minimum 900 px wide minimum 900 px wide
Regular News Panel 720 px wide by 480 px tall (3:2) 720 px wide by 480 px tall (3:2)
Rotating Aside Feature Panel 720 px wide by 480 px tall (3:2) 720 px wide by 480 px tall (3:2)
Rotating News Panel 720 px wide by 480 px tall (3:2) 720 px wide by 480 px tall (3:2)
Slideshow Panel 1200 px wide by 800 px tall (3:2) 1120 px wide by 910 px tall (16:13)
Social Media Panel n/a n/a
Statistics Panel 700 px wide by 700 px tall (1:1) 700 px wide by 700 px tall (1:1)
Tall Aside Feature Panel minimum of 720 px wide minimum of 720 px wide
Testimonials Panel 720 px wide by 480 px tall (3:2) 720 px wide by 480 px tall (3:2)
Video Block Panel n/a n/a
Right Navigation: Social Media Block n/a n/a
Right Navigation: Expanding Contact Information Block minimum of 720 px wide minimum of 720 px wide
Video Dimensions for Modules
Module Stacked Template Right Navigation Template
Photo Feature Panel 16:9 16:9
Slideshow Panel 3:2* 16:13*
Tall Aside Feature Panel 16:9 16:9
Testimonials Panel 16:9 16:9
Video Block Panel 16:9 16:9

* Must be a Vimeo animation of 10 or less seconds, no sound.

Social Media Marketing

Web Services provides a special module for Social Media Marketing that allows your page to appear on social media platforms in a more engaging manner. Each social media platform has its own dimensions and proportions you must comply with for your content to appear correctly. Please note these numbers can change periodically, and we will update them when they do.

Image Dimensions for Social Media Marketing
Module Minimum Dimensions Recommended Dimensions
Facebook 470 px wide by 246 px tall 1200 px wide by 627 px tall
Twitter 1200 px wide by 600 px tall (2:1) 1200 px wide by 600 px tall (2:1)
Pinterest 100 px wide by 200 px tall for tall pin
200 px wide by 100 px tall for wide pin
 

Calendar Event Marketing

Image Dimensions for Calendar Events
Module Minimum Dimensions Recommended Dimensions
Event Thumbnail 900 px wide by 600 px tall 900 px wide by 600 px tall