Recommended Image Sizes

When creating content on your site, make sure you're using the optimal image size for a consistent look and feel on your site.

Whether it's a background image or a content block, if you're replacing one of our placeholder images these are the recommended sizes.

  • Images have a size (dimensions) and a size (weight). The lighter an image is the faster a page loads for the end user.
    • Recommend less than 250 kb for 'full width of site' images. 
      • Larger images may not upload successfully
      • Larger images may not load on mobile devices, giving a bad user experience
    • less than 75kb for a smaller multi-column content block image
  • Note that 2, 3, and 4 column blocks will become a single column on most mobile devices.
  • Tablets will move to 1 or 2 columns depending on device and total columns in your content block.
  • Remember to name your images well. It's better for search engine optimization and for people who use a screen reader to read what's on screen.
    • That means "woman-riding-mountain-bike.jpg" is WAY better than "webmtb_354_750.jpg"

One Column

Recommended image size: 1170 x 390px

Full width: 1920 x 640px


Two Column

Recommended image size: 768 x 350px

Minimum image size: 555 x 300px


Three Column

Recommended image size: 768 x 350px

Minimum image size: 360 x 300px


Four Column

Recommended image size: 768 x 350px

Minimum image size: 260 x 260px


Logo Rows

Recommended image size: 300 x 300px

Minimum image size: 250 x 250px

Note: square images work best. Add white space above and below an image in a photo editing program to get horizontal logos to look right on the page.


Additional Notes 

  • Background images are set to cover the container they are in. They will do so by adjusting the crop and upsizing the image when needed. The images are set to never skew or warp.
  • Our pre-built content blocks have dark grey placeholder images that are in Edit Column and light grey in Edit Content.