Workflow6 min read·Updated

Figma Exports to WebP (Stop Shipping 2× PNGs)

Designers export @2× PNG from Figma because it looks sharp on the canvas. Developers then ship that PNG. Convert the export folder to WebP at the CSS width × 1.5 and quality 88–92 for UI, 80 for photos inside frames.

Export for design, convert for production

Keep PNG in the Figma export history if you want. Production gets WebP. The converter is the last mile between the design tool and the repo.

Why it matters

  • @2× 1440 frames become 2880 px PNGs.
  • Marketing sites built 1:1 from Figma inherit every export.
  • You should not need a developer to run cwebp.

How to do it

  1. Export PNG or JPG from Figma in one folder.
  2. Convert: UI 90% / width = layout; photos 80%.
  3. Replace in Webflow, Framer, Next, or the repo.

Settings that work

If the frame is 1200 px wide, convert at 1200–1800 px, not 2400+.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

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

Open the converter

Frequently asked questions

Some plugins can. A local converter is enough and works on any export.

SVG for vectors. WebP for rasterized mockups.

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
Platforms6 min read

WebP for Framer

Framer sites look designed and often load like it: huge PNG frames. Convert assets to WebP at breakpoint width before you publish.

Read more
Workflow6 min read

Screenshots to WebP

PNG screenshots shrink dramatically as WebP if you keep quality high enough for text. Recommended settings and max width.

Read more