How to Optimize the Image Size on Webflow for SEO

Image size is one of the most controllable performance variables on a Webflow site. Large images slow down pages. Slow pages have worse Core Web Vitals scores. Worse Core Web Vitals scores correlate with lower rankings and higher bounce rates. The chain is direct and the fix is straightforward: optimize images before uploading.

The target: most images on a page should be under 200KB. Hero images and full-width background images can go up to 400KB if they're critical to the design, but anything over 1MB is almost never justified. For context, a DSLR photo straight out of the camera is often 5-10MB. That's 10-50x larger than it needs to be for web use.

The workflow before uploading to Webflow: resize the image to the maximum size it will actually display. If a card image in your CMS shows at 600px wide on the largest screen, there's no reason to upload a 3000px wide version. Resize first. Then compress. Tools like Squoosh (free, browser-based) let you convert to WebP and set compression levels side by side with a live quality preview. Aim for WebP format — it's typically 25-35% smaller than JPEG at equivalent visual quality.

Webflow does handle some automatic optimization: it serves images via CDN and generates responsive sizes for different breakpoints if you use the native image element. But it doesn't compress at upload — whatever you upload is what gets stored. The optimization you do before uploading is what determines the base file size.

For CMS images specifically: create a written standard for your team or for yourself. Something like "hero images max 1200px wide, max 300KB, WebP format." Without a standard, image sizes drift upward over time as different people upload with different assumptions.

Check your largest page images periodically using PageSpeed Insights or Lighthouse in Chrome DevTools. The "Properly size images" and "Serve images in next-gen formats" audits tell you exactly which images are over-sized and by how much. Fix those first.