Optimizing Images for Your ChurchSpring Website
The Road to Beautiful Website Images Starts Here!
There is nothing more cringeworthy than browsing an otherwise beautiful website and stumbling upon distorted, pixelated, and stretched-out imagery. 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 images to keep your site looking snazzy.
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.
Secondary Header Images
All secondary pages have background images behind the header. To optimize those images, you will want to export your photos to 1400 pixels wide by 510 pixels high. 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 pixels wide and 560 pixels tall. Try to compress the file size to somewhere between 115-200 kb if possible.
Bio Images on the Leadership Page
For optimal image uploading for the Bio photos, make sure the uploaded image is a square JPEG or PNG (ie. 500px x 600px or 500px x 500px) . The best way to ensure that the images remain oriented correctly is to use a 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".
When you size your photos, you must keep a margin of "padding" around the focal point of your image- do not crop them tightly. This gives the allowance needed by the optimization tool that prepares your site for mobile viewing. If you need a tool that will size your photo without stretching it, you may want to use https://www.canva.com/photo-editor/app/.
- How to easily crop your images - start at time marker 00:28:50 (check out the full show notes at churchspring.com/csl026)