Optimizing Images for Your ChurchSpring Website
The Road to Beautiful Website Images Starts Here!
There is nothing more cringe-worthy than browsing an otherwise beautiful website and stumbling upon distorted, pixelated, and low-quality images. That's why part of our mission at ChurchSpring is to de-uglify the web! :)
The good news is we've already done most of the work by providing you with a growing list of high-quality church website designs to choose from. But if you're as picky about design as we are, and you have some graphics know-how, you'll want to optimize your custom images to keep your site looking snazzy.
Homepage Imagery
They always say, "You never get a second chance to make a first impression!" That's why out of all the images on your site, the homepage images are the most important. All of your homepage background images should be 1400 wide by 780 pixels high. Try to compress the file size to somewhere between 150-250kb, if possible.
Adding your own high-quality image to the Home page hero area isn't your only option. You could add a background video! For the best viewing, be sure that the minimum resolution of your video (and pictures used within the video) is 1080p (1920X1080).
Secondary Header Images
All secondary pages have background images behind the header. To optimize those images, you will want to crop your photos to 1400 x 510 px. Try to compress the file size to somewhere between 115-200 kb, if possible.
Event, Sermon, and Blog Images
When you upload an image for an event, sermon, or blog, our system automatically optimizes (resizes) your image to be displayed in two locations: 1. The page that lists all of the events, sermons, or blog posts, and 2. The individual details page for each event, sermon, or blog. To make things easy, all you need to do is upload an image that is around 1000 x 560 px. Try to compress the file size to somewhere between 115-200 kb, if possible.
Leadership Bio Images
For optimal image uploading for the Bio photos, make sure the uploaded image is a square JPEG or PNG (ie. 500 x 600px or 500 x 500px). The best way to ensure that the images remain oriented correctly is to use graphics software (such as Photoshop) or a free online service like Canva.com or Befunky.com. You will then be able to view the photo "as is."
Photo Gallery Blocks
When using the Photo Gallery block on any page, you will want to keep your images between 600-1000 pixels wide for the best optimization. Our system downsizes and optimizes anything larger than 1200 pixels in width. All images will be neatly arranged in squares, and when you click on that image, you will see the full photo view.
Special Note
When you size your photos, you must keep a margin of "padding" around the focal point of your image- do not crop them tightly around the main content, face, etc. This gives the allowance needed for mobile responsiveness. If you need a tool that will size your photo without stretching it, you may want to use Canva Photo Editor.
Summary: Optimal Image Sizes
Home Page Background: 1400x780 px
Secondary Page Background: 1400x510 px
Event, Sermon, and Blog Images: 1000x560 px
Leadership Bio Images: 500x500 px
Photo Gallery Block: 600-1000 px wide, no more than 1200 px
All image files should be around 150-250 KB, max.
Helpful Videos
- How to easily resize your images (check out the full show notes at churchspring.com/csl026)