Webflow and WebP, in practice
The Designer accepts WebP, and published sites serve the files you upload. Responsive images use the original as the source of truth. A 2880 px PNG screenshot used in a 720 px column still costs hundreds of kilobytes at every breakpoint. Resize to the largest layout width, then encode WebP at 80–90%.
Why it matters
- Lighthouse on Webflow marketing sites almost always flags image weight first.
- CMS Collection images (blog, portfolio, customers) accumulate; one bad template multiplies the problem.
- Hosting bandwidth on higher-traffic Webflow sites is not free at scale.
How to do it
- Export from Figma at 1× the largest breakpoint width (or 2× if you truly need retina and will cap width in the converter).
- Bulk convert the export folder to WebP at quality 85 for UI, 80 for photos.
- Replace assets in the Designer or re-bind CMS fields. Keep filenames predictable for replacements.
- Publish and re-run PageSpeed on a template page, not only the home page.
Settings that work
Hero backgrounds: max 1920–2400 px, quality 70–78. UI screenshots: 1400–1600 px, quality 88–92 so type stays crisp. Team avatars: 400 px, quality 80.
| Asset | Webflow bind | Convert at |
|---|---|---|
| Navbar logo | Image | 400 px · 90% |
| Hero photo | Background or Image | 1920 px · 75% |
| CMS cover | Collection Image | 1600 px · 80% |
| Logo wall | Image | 320 px · 85% |