Below are some common image sizes for your site.

Page Header Image: Images should be 2,732px wide by 808px tall and 2,732px wide by 1,390px tall if you use the full height option.  The height may need to vary depending on how much content you enter into the header text field.

Module Header Images:  These should be the same size as the Page Header Image (2,732px wide by 1,440px tall).  This includes the Header Image field for modules such as articles, events, etc.  Note that most of these modules have two different image fields.  The image assigned to the item and the header image.  Typically header images are larger and are used for the detail page of the item where the image field is typically used for monklets, etc. and are smaller (typically a 1,024px wide by 576px tall).

Module Images:  Unless noted otherwise in this guide most module (sermons, events, etc.) images should be 1,024px wide by 576px tall.  Please note that there are areas on the site that use a square image or a non 16:9 display from the modules (eg. the section monklet for the latest sermon).  In these instances the 16:9 image from the module is used and centered to cover the area.  This means that if you have text layered in the image it should be as centered as possible to prevent text from getting cut off.

Module Image Exceptions:

• Staff Layout #3 - The key is to keep all staff images the same size.  For horizontal layout the recommended size is a 16:9 ration (eg. 1,024px wide by 576px tall).  For a more vertical/square layout of images the recommended size is 1,200px wide by 1,200px tall.

Section Parallax Images:  Images used in the full width section background image option should be 2,732px in width by the desired height.  The height will depend on the amount of content in the section.  A recommended height would be between 1,200px and 2,400px.

Monklet Images: These will use the module images associated with the monklet and unless noted otherwise in this guide eg. most module (sermons, events, etc.) images should be a 16:9 ration (eg. 1,024px wide by 576px tall).

A Word About Saving Images:

Larger pixel sizes look better on Retina Displays (you can double the size of the recommended images eg. module images could be 2,800px tall by 1,200px tall) but they can also be large file sizes if they 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. Always save photos at 50%–70% quality, especially if you double the recommended size.