Images

Images Sizes

Below are some common image sizes for your site.

Page Header Image: Because these images are fixed to the users screen size to allow for the parallax scrolling the recommended size is 1,900px wide by 1,100px tall.  The height may need to vary on some images depending on how you want to center portions of the image.

Module Images:  It is important to try and keep images uniform in size to allow your pages and monklets to present consistently throughout the site.  For most modules it is recommended to use 16:9 (1,024px wide by 576px tall) images.  There are places in your design that call for square images.  Your blog post, article and images assigned to link list using the Featured Links monklet display square images and are recommended to be 800px wide by 800px tall.  Your sermon series images should be 2,048px wide by 1,152px tall.  Staff images can be either 16:9 or square as long as they are all kept uniform in size.

Module Header Images:  These should be the same size as the Page Header Image at 1,900px wide by 1,100px.  This includes the Header Image field for modules such as sermons, 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 OR  800px wide by 800px tall).

Church Logo Images: 600px wide by 260px 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.

Stock Images

A few stock photography websites:

 

Photo Editing Software

A few photo/image editing tools: