Converting Figma Exports to Web-Optimized Images in 2026

Figma's export panel is a trap. Click "Export 2x PNG" and you get a 1.8 MB file that your design-system docs need to render in under 100ms. The tool isn't wrong, the defaults just aren't aimed at web delivery. Closing the gap between "what Figma exports" and "what should ship" is a 2-minute post-processing step most teams skip.

What Figma actually gives you

As of the April 2026 release, Figma's export options are:

• PNG at 1x, 2x, 3x, 4x. Lossless. Never subsampled. Big.
• JPG at selectable quality. No per-channel control. No modern chroma settings.
• SVG with optional "Include ID attribute" and "Outline text." Almost always bloated with empty groups, IDs like Rectangle_47, and redundant fills.
• PDF for print handoff.
• WebP as of late 2025. Lossy only, single quality slider, no AVIF.

No AVIF, no JPEG XL, no automatic stripping of the embedded metadata, no way to enforce a size budget. The export is a starting point, not a shipping artifact.

The minimum useful post-process

For a raster export at 2x (say 1200x800 source, exported as 2400x1600 PNG):

1. Resize to the actual display resolution set. Usually that's 1x, 1.5x, 2x. Do not ship 4x for any reason short of a print catalog.
2. Convert to AVIF at q55 for photo content, q65 for UI screenshots. Keep a WebP fallback at q78.
3. Strip metadata. Figma exports often carry a few hundred bytes of XMP. exiftool -all= or any modern encoder's strip flag.
4. Generate srcset - 1x, 1.5x, 2x at minimum.

Typical savings on a UI screenshot of a dashboard (2400x1600 Figma PNG export):

Variant	Size
Original PNG 2x	1.8 MB
Optimized PNG 2x (oxipng)	1.1 MB
WebP q78 2x	240 KB
AVIF q65 2x	130 KB

14x reduction with no perceptible loss. If you deliver a <picture> element with AVIF, WebP, and a PNG fallback, most users hit the 130 KB version.

SVG is the bigger opportunity

A Figma SVG export for a medium-complexity illustration (roughly 60 shapes, some gradients, a few text elements):

• Raw Figma SVG: 42 KB, 820 lines.
• After SVGO with default preset: 14 KB, 60 lines.
• After SVGO plus manual path merging and gradient deduping: 9 KB.

Run every SVG export through SVGO. Non-negotiable. The built-in plugins do useful work:

• removeUselessDefs strips orphaned gradients.
• convertPathData rewrites M/L commands with shorter equivalents.
• cleanupIds removes id="Rectangle_47" junk Figma loves.
• mergePaths collapses adjacent paths with identical styling.

Watch for two gotchas. First, SVGO's removeViewBox plugin is enabled by default in some presets and will break responsive sizing. Turn it off. Second, if your SVG has inline <style> blocks and you're inlining the SVG into HTML, scope the CSS or you will get cross-icon bleed.

The automated handoff pipeline

Three good points in a design-to-code flow to run conversion:

1. At export time. A Figma plugin like "Export as Optimized" runs the PNG through a WebP/AVIF pipeline before the designer saves. Immediate feedback, but limited to one machine.
2. At commit time. A pre-commit hook converts anything new in /assets/raw into /assets/optimized. Works well for small teams on a shared repo.
3. At build time. Next.js' Image, Astro's <Image>, or a dedicated asset pipeline. The current best-of-class answer for most stacks. Images go in as source PNGs or SVGs and come out as AVIF/WebP/SVG in production.

For teams who want the in-between option - drop a folder of exports in, get optimized output back out, do not write build config - running a batch conversion over the Figma export folder gives the same result in under a minute.

A realistic pipeline recipe

exports/
  raw/              # whatever came out of Figma
  optimized/
    1x/             # 1x WebP/AVIF/PNG fallback
    1.5x/
    2x/

# raster exports
for f in exports/raw/*.png; do
  name=$(basename "$f" .png)
  for scale in 1 1.5 2; do
    w=$(identify -format "%[fx:int(w*$scale/2)]" "$f")
    magick "$f" -resize ${w}x avif:q=55 exports/optimized/${scale}x/${name}.avif
    magick "$f" -resize ${w}x webp:q=78 exports/optimized/${scale}x/${name}.webp
  done
done

# svg exports
svgo -f exports/raw -o exports/optimized/svg --config svgo.config.js

That is the whole pipeline for 80 percent of cases. Everything beyond (sprites, icon systems, responsive art direction) builds on the same foundation.

One thing teams get wrong

Designers will keep exporting 3x PNGs because "that's what retina needs." 3x is for the iPhone 14 Pro Max and a few Android flagships. The median visitor to a B2B SaaS site in 2026 is on a 1x or 1.5x display. Ship 2x as your ceiling and add 3x only for hero images on consumer-facing marketing pages. For everything else the bytes are wasted.

The takeaway: treat Figma export as a source format, not a delivery format. Add one automated step between designer and production and the numbers speak for themselves.