Images

Recommended Sizes

Below are common image sizes for your site.

Home Page Header Image: 1,600px wide by 900px tall.

Page Header Image: 1,600px wide by 900px tall.  

Rotator Slide Images: 1,600px wide by 900px tall.  

Article or Event Header Images:  Articles and Events have a separate field for header images that will display on detail pages, and these images should be the same size as the standard Page Header Image at 1,600px wide by 900px tall. 

Module Images:  Unless noted otherwise in this guide most modules (sermons, events, articles, etc.) images should be 1,200px wide by 675px tall.

Module Image Exceptions:

  • Staff Layout #3 - It's important to use a consistent size for all of your staff images. Recommended size is 1,000px wide by 1,500px tall.

Section Background Images:  Images used as a background for full width sections should be 1,600px in width; the height required will depend on the amount of content in the section. A recommended height would be between 600px and 1,200px.

Monklet Images: Unless noted below or otherwise in this guide, monklets will use the module images associated with them, and most module (sermons, events, articles, etc.) images should be 1,200px wide by 675px tall.

Circle Column Layout Monklet: The large circular images in this layout are managed through the associated link list and should be 1,200px wide by 1,200px tall.

Featured Links Monklet: Images should be 1,024px wide by 768px tall.

A Word About Saving Images:

Larger pixel sizes look better on Retina Displays, and you can double the recommended size of header images to take advantage of this: 3,200px wide by 1,800px tall. The trade-off is that huge images can result in very large files and slow page loading, especially if the images are not optimized. To reduce file sizes and help speed up load times, be sure to use “Save for Web & Devices” in Photoshop (or a similar setting in other tools) and stick with the JPEG format. Always save images at 50%–70% quality, especially for large header graphics.

Stock Images

A few stock photography websites:

 

Photo Editing Software

A few photo/image editing tools: