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
- Recommend less than 250 kb for 'full width of site' images.
- 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.