How to Optimise Charity and Nonprofit Website Images for Speed and Accessibility
Key takeaways
- An image sets Largest Contentful Paint on most pages, so image weight usually decides how fast a charity or nonprofit website feels.
- Compress every image before upload and choose the right format: WebP for photographs, SVG for logos and icons, and PNG only where transparency is needed.
- Upload images at their largest display size and no larger, and ask your platform which images it makes smaller versions of and which it leaves out.
- Give every meaningful image alt text that says what a sighted visitor would get from it, in a short phrase or sentence. Decorative images take empty alt text.
- A chart needs a short alt text plus the data written out somewhere on the page.
- Lazy-load images below the fold but never the hero image, and make image optimisation a step in your publishing checklist rather than a one-time task.
Summary
How to optimise images for a charity or nonprofit website: compression, formats, what to ask of your platform about responsive images, lazy loading, and what alt text should say.
To optimise images for a charity or nonprofit website (or optimize them, in American spelling), compress every file before upload, upload it no larger than it will be displayed, make sure phones receive a smaller version, and give every meaningful image alt text. The first three decide how fast the page feels. The last is the floor of accessibility.
This guide covers what good looks like, what to ask of whichever platform runs your site, and what usually goes wrong.
Why Image Size Matters
A single uncompressed photograph off a camera or phone runs to several megabytes. A page carrying five of them makes the visitor download all of that before it settles.
Core Web Vitals are used by Google's ranking systems, and image size feeds straight into them. Largest Contentful Paint (LCP), the time for the main content to become visible, should be 2.5 seconds or less at the 75th percentile of page loads. It is usually an image that sets it: the 2024 Web Almanac found the LCP element was an image on 73.3% of mobile pages and 83.3% of desktop pages.
For a charity, this affects donor conversion (slow donation pages lose donors), funder perception (a slow site signals institutional neglect), and search visibility.
How to Optimize Images for the Web
Every image should be compressed before upload. Whatever your platform does afterwards, it starts from the file you give it.
File size: Google publishes no figure for an image. It judges the page: Largest Contentful Paint of 2.5 seconds or less, and Lighthouse suggests keeping the whole page below 1,600 KiB. My own ceiling is an upload under 1MB, so photographs stay crisp. That is the file you start from, not what every visitor should download: the page should never serve an image larger than the one on screen, which is why the next section matters.
Format selection: Use WebP for photographs. Google's own figures put lossy WebP at 25-34% smaller than comparable JPEG at equivalent quality, and lossless WebP at 26% smaller than PNG. Use SVG for logos, icons, and illustrations. Use PNG only when transparency is required and SVG is not suitable.
AVIF: AVIF compresses harder than WebP, and browser support is no longer the objection it once was. Check first whether your platform makes smaller versions of an AVIF. Webflow, for one, generates responsive variants for inline JPGs, PNGs and WebP images only, so an AVIF there goes out at one size and a phone downloads the desktop image. Where that is the case, WebP stays the default. On a site whose markup you control, the format comparison in my photography guide sets out the <picture> approach that gets AVIF and a fallback at once. Keep your source files, because a format conversion can replace the original.
Compression tools: Squoosh is free, runs in the browser and allows visual comparison of compression levels. TinyPNG handles batch compression, twenty images at a time on the free tier.
Dimensions: Upload images at the largest size they will be displayed, not larger. A hero image displayed at 1400px wide does not need to be uploaded at 4000px.
What to Ask of Any Platform
Responsive images mean the same picture exists in several sizes and the browser downloads the one that fits the screen, which cuts what a phone has to fetch. Most of what goes wrong is an image that falls outside this without anyone noticing. Your platform's documentation should answer each of these:
- Does it make smaller versions of each upload, or send one file to everyone?
- Which formats does that cover? A format left out is served at one size.
- Which images are left out? Check background images, images inside rich text and images placed through custom code. Rich text catches most blog and news photography.
- Can you set loading image by image, so the hero loads eagerly and the rest lazily?
- Can an image be marked decorative, and can images fed from your CMS carry their own alt text field?
Lazy Loading
Lazy loading delays images below the visible area of the page until the visitor scrolls to them, so the browser downloads only what is immediately visible.
Set it on all images except the hero image or any image visible above the fold on page load. The hero should load eagerly: web.dev says never to lazy-load your LCP image, because that always adds delay.
Image Alt Text Best Practices
Alt text is not a performance optimisation. It is an accessibility requirement: WCAG 2.2 Success Criterion 1.1.1 Non-text Content is Level A, the floor of the standard. Every meaningful image must have text that conveys what a sighted visitor would get from looking at it.
Meaningful images: Photographs of programmes, staff, events, and impact should describe what the image shows. 'Group of young people working together at a community workshop in Manchester' is useful. 'Image' or 'Photo' is not.
Decorative images: Background textures, visual separators, and purely aesthetic images take empty alt text (alt="") so screen readers skip them. Leaving the attribute out is not the same thing: some screen readers then announce the file name.
Charts and diagrams: These need a short alt text plus a longer description that carries the data. A chart with the alt text 'chart' is inaccessible.
Length: There is no character limit. The W3C asks for the most concise description possible, with the most important information first, and for a long description where a short phrase or sentence will not do.
On any platform, check all three places alt text can be missed: images placed on a page, images inside body content, and thumbnails fed from your CMS, which need a field of their own.
Keeping It Up
Image optimisation is not a one-time task. Every time new content is published with images, the same standards apply. Include it in your content publishing checklist: compress before upload, set descriptive alt text, and verify the page's performance after publishing.
For the broader monitoring framework, see Website Performance Monitoring for Charities and Nonprofits. For the standard alt text supports, see WCAG 2.2 AA: What the Build Settles and What Your Team Must Keep Doing. Image weight and alt text are both line items in a technical SEO audit.
On Webflow? The platform-specific steps are in Platform Notes.
Next step: read Answer Engine Optimisation for Charities and Nonprofits, on how AI search finds and cites your pages.
Free download
Your website, for the board.
A two-page briefing you can fill in and put in the next board pack. It covers the six things funders check, how to see what AI tools say about you, and the options to put to trustees.
That did not send. Email hello@socialectric.com and we will send you the briefing. The spam check did not finish. Try again, or email hello@socialectric.com and we will send you the briefing.
Frequently asked questions
- How much do image sizes affect a charity website?
Enough that they usually decide the score. Largest Contentful Paint, one of Google's Core Web Vitals, is set by an image on 73.3% of mobile pages and 83.3% of desktop pages according to the 2024 Web Almanac, and web.dev puts the threshold at 2.5 seconds or less at the 75th percentile of page loads. Google confirms that Core Web Vitals are used by its ranking systems. For a charity that shows up as lost donors on a slow donation page, funders reading a slow site as institutional neglect, and lower search visibility; see nonprofit website performance benchmarks for what to measure.
- What file size should a charity or nonprofit aim for when uploading images?
Google publishes no file size for an image. Its image guidance asks for current optimisation and responsive image techniques, and its measure of a fast page is Largest Contentful Paint of 2.5 seconds or less. My own ceiling is an upload under 1MB, which keeps photographs crisp on high-density screens, provided your site then serves each visitor a smaller version sized to their screen. Squoosh is free and lets you compare compression levels side by side.
- Which image format should we use?
Use WebP for photographs. Google's own figures put lossy WebP at 25-34% smaller than comparable JPEG at equivalent quality, and lossless WebP at 26% smaller than PNG. Use SVG for logos, icons and illustrations, since they scale to any size at a small file size. Use PNG only where you need transparency and SVG is not suitable.
- What should image alt text say?
What a sighted visitor would get from looking at the image, put as briefly as possible. For photographs of programmes, staff, events and impact, describe the picture: 'Group of young people working together at a community workshop in Manchester' is useful, 'Image' or 'Photo' is not. The W3C's alt text tips say to put the most important information first and that words such as 'image' or 'picture' are usually unnecessary, because screen readers already announce an image. Alt text is an accessibility requirement: WCAG 2.2 Success Criterion 1.1.1 is Level A, the floor of the standard.
- Do decorative images need alt text?
They need an empty alt attribute (alt=""), which tells a screen reader to skip them. Do not leave the attribute out: the W3C's guidance on decorative images warns that some screen readers then announce the file name instead. An image is decorative if it adds no information to the page, and the W3C says that is a judgement only the author can make, based on why the image is there.
- How long should image alt text be?
The W3C sets no character limit. Its alt text tips ask for the most concise description possible of the image's purpose, and say that anything needing more than a short phrase or sentence should use a long description instead. A chart is the usual case: a short alt text identifies it and a longer description on the page carries the data, so 'Bar chart of programme participation by year, with the figures in the table below' rather than 'chart'.
- Should we switch lazy loading on for every image?
On every image except the hero, or anything else visible above the fold when the page loads. Lazy loading holds back images below the visible area until the visitor scrolls to them, so the browser downloads only what it needs at first. The hero should load eagerly: web.dev says never to lazy-load the image that sets Largest Contentful Paint, because that always adds delay.
- How do we make sure phones get a smaller image?
Use responsive images: the platform makes several sizes of each upload and the browser downloads the one that fits the screen. Ask your platform which formats that covers and which images it leaves out. Background images, images inside rich text and images placed through custom code are the places to check, and rich text catches most blog and news photography.