Export Optimization Guide

We want you to have a great experience using Banner Ad Maker. Better inputs = better outputs. Use this handy free guide to prepare your files for the smallest, highest-quality HTML5 ads.

Quick Reference: Which Format to Use

Format	Best For	Typical Savings vs PNG
SVG	Icons, logos, simple illustrations, text	90%+ smaller at large sizes
JPG	Photos, gradients, complex scenes	60-80% smaller
PNG	Graphics that need transparency	Baseline (largest)
WebP	Web delivery (photos + transparency)	25-35% smaller than JPG/PNG

💡 Rule of thumb for this tool: If your source files total under 400KB, you'll get a perfect export every time. Over 1MB and you may see quality loss from auto-compression.

1. Choose the Right Format

Use SVG when:

The design is made of shapes, icons, or text
You need it to scale to any size
File contains few or no photos
Destination is web (this tool!)

Use JPG when:

The image has photos or complex gradients
You don't need transparency
Small file size matters more than pixel-perfect edges

Use PNG only when:

You need transparency AND the image has photos/complex raster content
Logos with transparency that can't be SVG

2. Figma Export Settings

How to Export

Select the frame or layer
Open the Design panel (right sidebar)
Scroll to Export section (bottom)
Click + to add an export setting
Configure format, scale, and suffix

SVG Settings (Recommended)

Setting	Recommendation
Include "id" attribute	✅ Yes — this tool reads layer names from IDs for element labels
Outline text	✅ Yes — avoids font embedding issues, reduces file size
Flatten transforms	✅ Yes — simplifies path data

PNG Settings

Setting	Recommendation
Scale	1x for web — match your actual ad dimensions
Clip content	✅ Check this on your frame

⚠️ Don't export at 2x, 3x, or 4x. Each step multiplies file size ~4x. A 300×250 ad exported at 2x becomes 600×500 and 4x the file size — for zero benefit in an HTML5 ad.

JPG Settings

Setting	Recommendation
Scale	1x
Quality	80% — barely visible difference from 100%, ~40% smaller

💡 80% quality is the sweet spot. Below 60% you'll see artifacts. Above 90% the gains are negligible.

3. Design-Level Optimizations (Before Export)

These changes in your Figma file will dramatically reduce export sizes:

Flatten Complex Layers

Select layers → Right-click → Flatten (⌘+E / Ctrl+E)
Merges boolean operations and overlapping shapes into simpler paths
Can reduce SVG path data by 50%+

Simplify Vectors

Remove unnecessary anchor points in paths
Enter edit mode → select points → delete redundant ones
Fewer points = smaller SVG

Rasterize Complex Elements

If an area has 100+ overlapping vector shapes (textures, patterns), rasterize just that portion
Right-click → "Rasterize selection"
Trade: slightly larger raster, but massively smaller overall SVG

Crop & Trim

Ensure frames are tightly cropped — no extra whitespace
Enable "Clip content" on frames to avoid exporting hidden overflow

Reduce Blur & Shadow Complexity

Each blur/shadow adds raster data to SVG exports
Reduce blur radius where possible (larger radius = more pixels baked in)
Consider removing drop shadows and noting them for CSS implementation instead

Limit Gradients

Complex multi-stop gradients inflate SVGs significantly
Simplify to 2-3 color stops where visually acceptable

Remove Hidden Layers

Hidden layers still get included in exports
Delete or move them outside the frame before exporting

Name Your Layers

This tool reads Figma layer names as element labels
Use clear names: "Headline", "CTA Button", "Logo" — not "Group 47" or "Frame 12"
Good names make it easy to assign animations to the right elements

4. Post-Export Optimization

After exporting from Figma, run files through these free tools for further savings before uploading to Banner Ad Maker:

PNG Optimization

Tool	Savings	Notes
TinyPNG	50-80%	Web-based, drag and drop
Squoosh	50-80%	Browser-based, adjustable quality
ImageOptim (Mac)	20-50%	Lossless option available

SVG Optimization

Tool	Savings	Notes
SVGOMG	30-60%	Best web tool, many options

💡 SVGOMG tip: Enable "Round/rewrite paths" with precision 2-3. Keep "Remove viewBox" unchecked. Enable everything else for maximum savings.

JPG Optimization

Tool	Savings	Notes
Squoosh	20-50%	Try MozJPEG codec for best results

5. Common Mistakes That Bloat Files

Mistake	Fix
Exporting at 2x/4x when only 1x is needed	Match scale to actual ad dimensions
Using PNG for simple icons/logos	Switch to SVG
Hidden layers still included in export	Delete or move outside the frame
Text not outlined in SVG (embeds font data)	Outline text before SVG export
Exporting entire pages instead of specific frames	Select only the frame you need
Not clipping content on frames	Enable "Clip content" in frame settings
Using effects (blurs/shadows) in SVG exports	Rasterize the affected layer or remove
Uploading a 2000px image for a 300px ad	Resize to exact ad dimensions first

6. File Size Targets

Use these as a gut check. If your export exceeds these, revisit the steps above:

Asset Type	Target Size
Single ad frame (SVG)	< 100 KB
Single ad frame (JPG/PNG)	< 200 KB
Total for 3-frame ad	< 400 KB
Icon/logo (SVG)	< 5 KB
Background photo (JPG)	< 150 KB

✅ If your total source files are under 400KB, Banner Ad Maker will produce a perfect export every time — no quality loss, no compression artifacts.

TL;DR Checklist

Pick the right format (SVG > JPG > PNG in most cases)
Export at 1x — match your actual ad dimensions
Flatten and simplify vectors before export (⌘+E)
Enable "Clip content" / crop frames tightly
Set JPG quality to 80%
Remove hidden layers from export frames
Name layers clearly (Headline, CTA, Logo — not Group 47)
Run through a post-export optimizer (TinyPNG, SVGOMG, Squoosh)
Target under 200KB per frame, under 400KB total

Open App →