How to Optimise Nonprofit Website Images for Performance and Accessibility on Webflow

Images are the single biggest factor in nonprofit website performance — and the most common source of accessibility failures. Uncompressed photographs, missing alt text, and oversized hero images account for the majority of slow page loads and screen reader navigation problems on the sites I audit.

This guide covers practical image optimisation for Webflow nonprofit sites: how to compress images, write effective alt text, configure responsive images, and use Webflow’s built-in tools to deliver fast, accessible visual content.

Performance: Why Image Size Matters

A single uncompressed photograph can be 3–5MB. A page with five such images loads 15–25MB of data before the visitor sees anything. On a mobile connection, this creates a loading time of 10–20 seconds — long enough for most visitors to leave.

Google’s Core Web Vitals, which affect search rankings, are directly impacted by image size. Largest Contentful Paint (LCP) — the time for the main content to become visible — is almost always determined by the hero image or the largest photograph on the page. If LCP exceeds 2.5 seconds, the page fails Google’s performance threshold.

For nonprofit websites, this performance hit affects donor conversion (slow donation pages lose donors), funder perception (a slow site signals institutional neglect), and search visibility (poor Core Web Vitals depress rankings).

Image Compression

Every image uploaded to Webflow should be compressed before upload. Webflow applies some automatic optimisation, but starting with optimised source files produces significantly better results.

Target file sizes: Hero images and full-width photographs should be under 200KB. Thumbnail and card images should be under 100KB. Icons and decorative elements should be under 50KB.

Format selection: Use WebP for photographs (better compression than JPEG at equivalent quality). Webflow supports WebP natively. Use SVG for logos, icons, and illustrations (infinitely scalable, tiny file size). Use PNG only when transparency is required and SVG is not suitable.

Compression tools: Squoosh (squoosh.app) is free and allows visual comparison of compression levels. TinyPNG (tinypng.com) handles batch compression. Both produce WebP output.

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. Webflow generates responsive variants automatically, but the source image determines the baseline.

Alt Text

Alt text is not a performance optimisation — it is an accessibility requirement. Every meaningful image on the site must have descriptive alt text that conveys the same information a sighted user would get from looking at the image.

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 should have empty alt text (alt="") so screen readers skip them. Announcing ‘decorative wave pattern’ adds noise without information.

Informational images: Charts, diagrams, and data visualisations need detailed alt text or a text alternative that conveys the same data. A chart image with alt text ‘chart’ is inaccessible. Alt text should describe what the chart shows: ‘Bar chart showing programme participation increased from 200 in 2022 to 340 in 2024.’

In Webflow, set alt text on static images through the image element settings panel. For CMS images in rich text fields, set alt text when inserting the image in the Editor. For CMS thumbnail images, bind the alt text to a dedicated text field in the collection. See your CMS structure for the appropriate field.

Responsive Images in Webflow

Webflow automatically generates multiple sizes of uploaded images and serves the appropriate size based on the visitor’s screen. This is called responsive images and it significantly reduces data transfer on mobile devices.

To ensure this works correctly: upload images at maximum display size (not larger), use Webflow’s native image element rather than background images where possible (background images do not generate responsive variants by default), and avoid using HTML embed elements for images (these bypass Webflow’s responsive image processing).

Lazy Loading

Lazy loading delays the loading of images that are below the visible area of the page until the visitor scrolls to them. This improves initial page load time because the browser only downloads images that are immediately visible.

In Webflow, enable lazy loading on images through the element settings panel. Enable it on all images except the hero image or any image visible above the fold on page load. The hero image should load immediately (eager loading) because it determines LCP.

Ongoing Maintenance

Image optimisation is not a one-time task. Every time new content is published with images, the same standards apply. Include image optimisation in your content publishing checklist: compress before upload, set descriptive alt text, and verify the page’s performance after publishing.

For the broader performance monitoring framework, see Website Performance Monitoring for Nonprofits. For the accessibility standards that alt text supports, see WCAG AA Accessibility on Webflow.