When adding an image to a page, there are a few important things to take into account. Some tips and tricks to use images in the most effective way can be found below, as well as a series of layouts with the pixel width of the image noted in the layout. All dimensions will be noted in pixels (px) unless otherwise specified.

• Base64 for image files is not a recommended and is not supported.  This format increases the size of the image file which impact load times, and the likelihood that the file within an iframe will cause the page to have load problems.
• Images on the site will constrain to their width. When working on content in a card the width is set by the row width selected and the number of cards within the row, and the height of the row is set to the largest card height in that row. If you have a large paragraph of text within a Basic card that has more line height than the height of your image within a Media card, the image will have empty space below it. If the image is taller than the content beside it, the row will be the height of the image. For these reasons, when planning out your content, the most important measurement for an image is its width (exception: Jumbotron).
• Images can be displayed in three ways: Cards, Jumbotrons and Featured images.
  • The card use applies to any image added with a Media card or through the WYSIWYG editor Media button.
  • The Jumbotron and Featured image have set image sizes (see below).
• If you add an image via the WYSWYG editor Media button, you can set a thumbnail size which is determined by the largest side of the image.
  • For example, if you select the 650 x 650 thumbnail and have uploaded a 1300 x 650 image, the resulting thumbnail will be 650 x 325, rather than the square that the dimensions imply.
• Jumbotron - The Jumbotron will be as wide as the browser window you have open. We recommend images are no smaller than 1920 x 450 for the Jumbotron i.e., Jumbo Slides. The wider the image the better, although the height will always be 450 high. Jumbotron images are also the size used in Hero rows on Landing pages.
• Featured Image - The Focal Point Scale and Crop on Featured images is set to 1200 x 400.

Other image reminders:

• If you add an image with a width larger than the recommended width for a space, the image will resize down proportionally to the size of the space.
• Images will align to the top left corner of the layout they are in, so if an image has a smaller width than the recommended width in a card, it will be at the top right corner of the layout you have selected.
• To display images in a row that are the same size, crop the images to the same pixel dimensions before uploading them to the Media library via the CMS.
  • You can do this with existing computer applications like Paint 3D or Photos.
  • You can also use this free software that helps with image cropping and resizing.

In the following examples you will see layouts exaggerated for the purposes of displaying these points. You will also see many of the same images displayed in different layouts. These images have been uploaded into the Media library once, and then are reusable throughout the site.

Note that all uneven column rows are combinations of ratios used in the equal column row examples.

Sample of photos resized externally and uploaded to the site

Width 250 px Height 312 px