How to Optimize Your NationBuilder Website’s Images for Faster Page Load Times

Nothing can transform a website from good to great more quickly than beautiful images. And with NationBuilder, it’s easy to upload pictures to complement your content and showcase your campaign or cause. But before you go all photo crazy, take a moment and learn these three simple steps for optimizing your website’s images.

Why Worry About Image Optimization?

Before we dive in, why is image optimization so important? Can’t you upload your full-resolution photographs right to NationBuilder and be done with it?

According to Google:

Images often account for most of the downloaded bytes and also often occupy a significant amount of the visual space on the page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for client’s bandwidth and the faster the browser can download and display all the assets.

In laymen’s terms, the smaller your images, the faster your page will load. And the quicker your page loads, the happier your supporters will be (and the better your conversion rate, too). That means failing to optimize your images is causing you to lose supporters, email subscribers, and (most likely) online fundraising revenue—all for no good reason.

How To Optimize Images For Your NationBuilder Website

Most NationBuilder website themes are designed to load the “original” file size for images on your site. That means that it’s up to you to optimize your images before uploading them to NationBuilder. Here’s how to do it.

Step #1: Crop Your Image

Using a graphics editor (we’re big fans of Pixelmator), begin by cropping your image to the most appropriate aspect ratio for your needs. In most cases, an aspect ratio of 16:9—the standard shape of a computer screen—works well, but your website theme might have specific needs.

Cropping the image doesn’t do much to optimize the file itself, and in some cases, your newly saved file may even be more substantial than your original. But by the end of our process, cropping your image will reduce the file size in the most direct of ways: removing the parts of the image that you do not want and do not need.

Step #2: Scale Down Your Image

Often, your original file will be massive: thousands of pixels wide. While size is an advantage for source files, even modern mobile phones will take pictures whose source files are massive in scale. Unfortunately, for our website purposes, this is both excessive and unhelpful.

After you’ve cropped your image, you’ll want to manually resize it (while preserving its aspect ratio) to not more than 1600 pixels. While in rare cases you may need an image to be larger than this, 1600 pixels is almost always sufficient for a brilliantly clear photograph. 

Note: At this point, you likely have a file whose size is in the range of 400kb to 1 MB. 

Step #3: Compress Your Image

Now that you have saved your cropped, down-scaled image, you’ll want to compress it. Image compression reduces an image’s file size by, among other things, reducing the number of colors stored in the picture. If done correctly, this process can radically reduce the size of an image (sometimes by 70%+) without any perceptible change to the human eye.

At Hines Digital, we recommend using a service called Squoosh to compress your images. It can compress both PNG and JPG image files, convert them to next-generation formats like WebP, and dramatically reduce overall file sizes with no noticeable change to the human eye. Moreover, the service couldn’t be easier to use. You drag and drop your files onto the page, toggle a few options, and download your optimized image.

Note: At this point, you can expect your file size to be approximately 100kb–200kb. That’s small enough to load quickly, even over a 3G mobile phone connection.

In Summary

Image optimization may seem like an “in the weeds” aspect of content strategy and website maintenance, but it’s not. In fact, it’s one of the easiest and most impactful things you can do to reduce page load times, increase supporter happiness, and improve conversion rates on your site (three things that will be sure to make your candidate/boss happy).