Platforms6 min read·Updated

Framer Sites: Convert Images to WebP for Better LCP

Framer optimises some images, but design files are still the source. A full-frame PNG from Figma can be 2–4 MB. Convert to WebP at your largest breakpoint and Framer pages usually pass the LCP image budget.

Design pixels vs network pixels

What you see on the Framer canvas is not what you should ship. Export or convert at 1× (or a modest 1.5×) of the desktop breakpoint, WebP 80–90%, then replace the asset on the canvas.

Why it matters

  • Marketing sites are judged on first-load LCP.
  • CMS collections in Framer repeat cover images.
  • No reason to send client mockups to an online compressor.

How to do it

  1. Select all page images that are photos or screenshots.
  2. Convert the folder; cap width at 1800–1920 px.
  3. Replace in Framer Assets and republish.

Settings that work

Photos 80% / 1920 px. UI shots 90% / 1440 px. Avatars 400 px.

Convert a batch in your browser. Nothing is uploaded.

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

Yes. Upload WebP to Assets and use them in Image components.

Only if you already have an AVIF pipeline. WebP is enough for Core Web Vitals on most marketing pages.

Keep reading

Platforms6 min read

WebP for Webflow

Webflow accepts WebP uploads and responsive images, but designers often drop 4× PNG exports. How to bulk convert Webflow assets to WebP without leaving the browser.

Read more
Workflow6 min read

Figma to WebP

Figma PNG exports are lossless and huge. Convert them to WebP at 1× or 1.5× the layout width.

Read more
Performance6 min read

Landing page WebP

Paid landing pages should convert the hero, logo row and proof shots to WebP before you touch the headline.

Read more