Optimizing images on your church website to increase speed and enhance performance
More often than not, our church clients are selecting appealing images for their church website without taking into account the impact these images will have on the functionality of the site as a whole.
So how do we keep the images we like without sacrificing speed or performance, you might ask?
First, let’s talk about the basics.
It’s All About the File Size
When we are optimizing website images, our goal is to have to send the least amount of data possible to users of the website. Images often make up the majority of data that is sent when a user requests a web page, thus, optimizing images has an immense impact on website performance and efficiency. To this end, we always want to be sure that our image file sizes are as small as possible without compromising the quality of the user’s visual experience.
Don’t know how to find the file size of your image? See below:
There are three factors that contribute to the file size of any given image:
- The dimensions (resolution) of the image. Simply put, images that are larger in proportion have more pixels, and more pixels means more data. Always make sure that your images have been resized prior to upload to your website. Image proportions should be no larger than the maximum area they will occupy on the web page on which they are used. There is no sense sending a 2000 by 1000px image to a user of your website when it will be scaled down by the browser to occupy a 400 by 200px block of content on the web page!
- The file format of image. Image file formats function very differently. Some are vectors, while others are bitmaps. Some feature lossless compression, while others are lossy (more on this below). The most popular image formats for use on web pages are PNG and JPEG. These two formats differ primarily in that JPEG can sacrifice image quality in exchange for more extreme levels of efficiency, while the PNG format always maintains the original visual integrity of the image. Other, more advanced image formats are also available – but they are more complex and not as widely supported by older browsers (WEBP, JPEG 2000, etc). Thus, we will ignore them for the purposes of this tutorial.
- The compression level of the image. Depending on their file format, image compression can be either lossy or lossless. The former means that image quality can be sacrificed for more substantial compression, while the latter means that the appearance of the image is always unchanged because no data is ever lost (it is merely encoded more efficiently).
The aim here is to size images such that they are of appropriate proportions for how they will be used on the website, and then compress these images such that the visual quality is acceptable. By choosing the right combination of proportions, file format and compression type, you can reduce the image size by as much as 20 times!
When large images are not compressed, they act as a burden on speed, greatly slowing the page load time, which negatively affects the overall user experience and leads to the loss of valued visitors along the way. Additionally, website performance is a significant factor in Google’s SERP algorithm which determines if your church website will appear in search results. Google wants its users to have good experiences, and is reluctant to send people to slow websites!
Here are a few ways to ensure your church website performance is not hindered by large images
Option 1: Optimize Images Before Posting on Church Website
One of the most popular ways to reduce image file size is to simply resize and compress the image or graphic before uploading to the church website. This option is ideal because it does not require a mechanized function within your website, and it’s only one additional step in the posting process. Additionally, this gives you complete control over the the process and the corresponding image result.
When it comes to image compression, there are many tools online that can help:
- https://compresspng.com/ is a fast, free, and effective way to losslessly compress PNG images. By definition, lossless compression features no reduction in image quality.
- https://compressjpeg.com/ is a fast, free, tool that compresses JPEGs to a point at which it is near impossible for the human eye to detect a reduction in image quality. For typical church website images, further compression (and corresponding quality reduction) should almost never be necessary.
- Photoshop has built-in options for saving files optimized for website usage.
Option 2: Use a Plugin to Optimize Images Following Upload To Your Church Website
Word to the wise – be selective about using plugins if you are not an experienced webmaster because they add a layer of complexity to the inner-workings of your website and can at times be problematic for the self-taught web builder.
If there are images already present on your church website that were not optimized before upload, utilizing an image optimization plugin may be the best option to bulk-optimize your existing images.
Here are 3 Image Optimization Plugins for WordPress to Check Out:
- reSmush.it allows you to automatically optimize images on upload as well as offer a bulk optimization option for older images.
- EWWW Image Optimizer is another good option for reducing file size upon upload and does not require an account.
- Compress JPEG & PNG allows you to set a maximum file size for all images, so that any image larger than the set maximum will automatically be adjusted by the plugin.
Extra tips when adding images to your church website:
- Before uploading your image, rename it with an SEO-intentional file name. What does this image represent?
- When adding your image to a web page, set the ALT (alternate text) property of the image with text that describes the content of the image. This helps search engines and sight-impaired users understand what the image is about.
Crafting a visually stunning church website does not mean you’ll need to sacrifice speed or performance. Make sure to always compress and appropriately size your images with the best possible visitor experience in mind.
Contact Jason Hamrock or Kevin Peck, or use the Contact Us button.
Jason Hamrock – Phone: 480-773-9115 | Email: firstname.lastname@example.org
Kevin Peck – Phone: 602-481-2991 | Email: email@example.com