Below are some common image sizes for your site.

Page Header Image: 1600px wide by 816px tall (for retina images, 3200px by 1632px). The home page header image is a little different: 1600px wide by 1045px (for retina images, 3200px by 2090px).

Module Header Images: These should be the same size as the Page Header Image (1600px wide by 816px 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 a separate header image. Typically header images are larger and are used for the detail page of the item, while the image field is more commonly used for monklets, etc. and is usually smaller (1,024px wide by 576px tall).

Module Images: Unless noted otherwise in this guide, most module images (for sermons, events, etc.) should be 1,024px wide by 576px tall. 

Some Image Exceptions:

• Staff Images - The key is to keep all staff images consistent—choose a size and orientation, then stick with it. For horizontal photos, we recommend a 16:9 image (eg. 1,024px wide by 576px tall).  For vertical photos, a 2:3 image works well (683px wide by 1,024px tall). For square images, the recommended size is 1,024px wide by 1,024px tall.
• Section Monklet - Image Grid - These square image links should be 1,024px wide by 1,024px tall.

Section Parallax Images:  Images used in the full width section background image option should be 1,600px 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, 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 (as mentioned above, double the header image sizes to take advantage of retina-capable devices). However, large image sizes can slow down your site, especially if the images are not properly optimized. To reduce file sizes and improve load times, be sure to use the “Save for Web” option in Photoshop, or a similar setting in other tools. Always save photos at 50%–70% quality, especially if you're planning on using double-sized, retina-ready images.