guides/Figma PNG exports to WebP
GUIDE

Figma PNG exports to WebP

Figma exports lossless PNG. At 2x that is easily two or three megabytes per frame, and a frame never travels alone: you export the whole view and end up with twenty files nobody is going to open one at a time.

It is also the case where the change shows most, because you are moving from a lossless format to a lossy one.

TYPICAL REDUCTION−90 to −97%measured across 12 Figma PNG exports
QUALITY0.80indistinguishable at 100% zoom, checked on photo and text
MAX SIDE2048 pxenough for a 2x screen at 1024 logical

Why 2048 and not the full export

A 2x export of a 1024pt frame is 2048 px, and that is the size the browser will actually paint. Anything above it is data the user downloads and then throws away during scaling. Setting a maximum side caps that without touching frames that are already smaller.

Why quality 0.80 rather than higher

At 0.80 the output is not distinguishable from the source at 100% zoom, on photographic content and on small text, which are the two cases that fail differently. Going higher spends bytes on detail nobody sees; the honest way to pick your own number is to compare at 100% and stop where you first notice something.

The folder structure survives

Dropping a folder returns a ZIP with the same tree, so site/img/brand/logo.png comes back as site/img/brand/logo.webp. Two files with the same name in different folders stay separate, which matters more than it sounds once you are exporting components.

It is safe to re-run

If a file would come out larger than it went in, the original is kept and the row is marked as unchanged. So you can drop a folder you already processed, or a mixed folder where half was done last week, without degrading anything.

Open the tool with this preset →
PrensoDecodes and re-encodes in this tab. Works offline.