Images are essential to nonprofit storytelling. Photos of your programs, the people you serve, and your team all add authenticity and emotional resonance. The problem is not the images themselves. It's that most people upload images without any optimization, and the file sizes that result make pages load slowly on every device, especially mobile.
Why file size matters
When a visitor loads a page on your site, their browser downloads every file the page needs: HTML, CSS, JavaScript, fonts, and images. Images are by far the largest files on most pages. A single uncompressed hero image can be larger than all the other files on the page combined.
On a fast broadband connection, a large image might add half a second to your load time. On a mobile connection, the same image might add three to five seconds. Given that Google's research shows bounce rates increase dramatically with every additional second of load time, that's a measurable cost in lost visitors.
The difference between display size and file size
Your browser might display a hero image at 1200 pixels wide. But if the image file was uploaded at 4000 pixels wide straight from a camera, the browser still has to download all 4000 pixels before it can display the 1200 it actually uses. The extra pixels are pure waste: they slow down the page without improving anything the visitor sees.
Resize images to the dimensions they'll actually be displayed at before uploading them. For most web images, 1200 to 1600 pixels wide is the maximum you'll ever need. For smaller elements like staff photos or program icons, much less is appropriate.
File format matters too
JPEGs are appropriate for photographs. PNGs are appropriate for graphics with transparency or sharp edges. The problem is when large photographs are saved as PNGs, which results in file sizes three to five times larger than the equivalent JPEG at the same quality. WebP format is an even more efficient option supported by all modern browsers.
If your site is full of PNG photographs, converting them to JPEG or WebP alone can dramatically reduce page weight without any visible quality loss.
Compression: the biggest quick win
Compression reduces file size by removing data the human eye can't perceive. A JPEG compressed to 80 percent quality looks nearly identical to the uncompressed original at a fraction of the file size. Free tools like Squoosh (web-based), TinyPNG, and TinyJPG make this easy without any technical expertise.
Before uploading any image to your site, run it through one of these tools. For images already on your site, a WordPress plugin like Smush or ShortPixel can batch-compress your entire media library retroactively.
A GoodSiteReport Performance Report identifies every oversized image on your site, shows the current file size and what it should be, and explains exactly how to fix it.
Lazy loading
Lazy loading is a technique where images below the visible portion of the page are not downloaded until the visitor scrolls to them. This means the browser only loads what the visitor is actually about to see, rather than downloading every image on the page upfront. Most modern content management systems support lazy loading natively or through a simple plugin setting.
What to check on your site right now
Open your homepage in a browser, right-click any large image, and select "Open image in new tab." Look at the URL: it will usually include the file dimensions. Then check the file size in your browser's developer tools (Network tab) or by right-clicking the file once it's open. If a hero image is larger than 300KB, it's a candidate for compression. If it's larger than 1MB, it's a significant performance problem.
For a complete picture of every oversized image across your entire site, a performance audit will surface them all in one report.