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.

  • 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

1-column

Two Column

Recommended image size: 768 x 350px

Minimum image size: 555 x 300px

2-column-bkrgd

Three Column

Recommended image size: 768 x 350px

Minimum image size: 360 x 300px

3-column-inline

Four Column

Recommended image size: 768 x 350px

Minimum image size: 260 x 260px

4-column-block-edit

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.

logo-row-edit

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.