Throughout Church Website Photography Month, we’ve been encouraging you to take great pictures and publish them on your church website.
One problem when adding photos to a website, however, is they can dramatically slow down the load time of the website. This causes a bad experience for visitors, resulting in people leaving the website frustrated
Slow loading images are also bad for search rankings. Since 2018, Google has made page speed is a factor in its search ranking algorithm. They expanded this in 2021, making Core Web Vitals a factor in search rankings.
Our observation is that un-optimized images are almost always the biggest problem causing a website to load slowly. Therefore it’s critically important to understand…
How to optimize photos for faster load times and better search rankings
1) Determine the ideal width for each photo
The smaller a photo is, the smaller its file size is, and the quicker it will load. However, if you make a photo smaller than the space on the website in which it is placed, it will look odd with too much white space around it or the viewer’s web browser will stretch it to fill the space and it will look pixelated or blurry. Therefore, it’s recommended to resize photos to the width of the content area they will be displayed in.
What makes this tricky is most websites today are “responsive,” which means they automatically resize to fit the viewers screen.
To find the ideal width, maximize your web browser to the full width of your computer screen. Then measure the width of the content area. I use the TechSmith Capture tool. It’s a free tool that takes screenshots and uploads them for sharing. While taking a screenshot, it shows you the height and width of the area you’re highlighting.
If you are adding a photo to the background of a page or an image slider that spans the full width of the web browser, We recommend an image width of 1,920 pixels. Currently about 98% of people use a screen that is 1,920 or smaller.
2) Resize the photo
In a previous article, we wrote about our favorite free, online image editing tool, Pixlr, which you can use to resize an image in less than a minute.
The vast majority of the time, we recommend resizing photos to the width of the content area as we explained above.
One exception is if you need to fit an image in a small content area (like this blog post) or a photo gallery but you want people to be able to click on the image to see a larger version of it. In this case, if the image is larger than 1,920 pixel wide, it’s still best to resize it to 1,920
3) Optimize the file format and quality
If a photo is saved in the .PNG format, converting it to .JPG format will reduce the file size of the photo by 70-90%. The JPG image format also has a quality setting which can reduce the file size of an image. The lower the quality, the lower the file size, so there is a trade-off. But most photos can be saved with a quality setting of 70% to 85% without a noticeable decrease in quality to the viewer.
Remember…
We’re obsessed with speed. -Google
If you want to evaluate your website’s load time, GTMetrix is a great tool for that. It even provides recommendations to improve the load time of your website.
We here at OurChurch.Com are also obsessed with speed because it leads to better search rankings and better living out your mission online. If we can help you with the SEO of your church website or Christian website, let’s schedule a time to discuss it – no cost, no obligation.
Comment and Discuss:
- Are the photos on your website optimized for speed or do you have some work to do in this area?
2 Comments
Paul:
Have you ever reviewed ShortPixel? I have found that it compresses pictures extremely well and improves the page speed loading of my website. Thanks for the tips in this article – very helpful.
Caleb.
Hey Caleb, I haven’t yet, but I’ll check it out.