How to Reduce Playable Ad File Size: Targets, Techniques & Tools

A 5 MB playable file sits at the ceiling most networks publish, and is well over Meta's 2 MB limit on the HTML inside its ZIP. For most end cards it is also 10x larger than it needs to be. On LTE, 5 MB takes 3–5 seconds to load. At 500 KB, load time drops under 1 second on the same connection. Load time tracks viewability: a creative that finishes loading after the user has moved on still counts as an impression and gets no engagement.

Where File Size Comes From

Images make up most of it. A single 1200×2000 PNG background image at full quality is typically 800 KB to 2 MB. When base64-encoded for embedding in HTML, it grows by roughly 33% because base64 adds overhead. Three uncompressed images (background, app icon, and CTA button texture) can easily put you at 3–4 MB before any animation logic.

• PNG background image (uncompressed, full size): 800 KB – 2 MB.
• Same image as WebP at equivalent quality: 150–400 KB.
• App icon (512×512 PNG): 50–200 KB.
• Custom font file (TrueType): 100–500 KB.
• Particle FX (JavaScript, no images): under 20 KB.
• Kinetic Text (JavaScript, no images): under 10 KB.

Audit Before You Optimise

Optimising without measuring usually means working hard on the wrong asset. Start every size pass with a short audit, so the effort goes where the bytes are.

1. List every asset in the project with its file size and the size it is actually drawn at on the canvas.
2. Sort the list by file size, largest first. In most end cards the top two or three items account for most of the weight.
3. For each large item, compare its pixel dimensions with its on-screen size. Anything far larger than it is drawn is the first thing to resize.
4. Look for duplicates: the same art uploaded twice under different names, or near-identical backgrounds in different scenes.
5. Only then convert formats and adjust quality, working down from the top of the list.

Re-export after each change and note the new size. A short log of what each change saved tells you, next time, which steps are worth doing first for your kind of art.

Image Optimization: The Biggest Lever

For most playables, converting PNGs to WebP saves more than anything else. WebP achieves 25–35% smaller file size than PNG at the same visual quality for photographic images, and 20–30% smaller for illustrations. All modern iOS and Android browsers support WebP natively.

1. Resize the image to your canvas dimensions before converting. If your canvas is 1080×1920, a 3000px image is 8x the pixels you need: resize first.
2. Convert PNG → WebP using Squoosh (browser-based, free) or cwebp (command line). Target 80% quality for photographs, 90% for game art.
3. For app icons and logos, use PNG-8 (indexed) instead of PNG-24 if the image has under 256 colors.
4. Upload the optimized image to Playable Ads Maker: the embedding step preserves whatever format you upload.

Export-Time Compression in Playable Ads Maker

The export modal has a compression toggle that applies additional optimization during HTML generation. It re-compresses images at the export stage before base64 encoding. This catches images that were uploaded before optimization and applies a uniform quality pass. Enable it as a baseline; it's most effective on JPG and PNG images and has minimal effect on WebP (which is already compressed).

Frames, Fonts and Sound

Images are the biggest lever, but three other kinds of asset can quietly undo the work.

Animation frames

A flipbook animation of thirty separate frames costs thirty images. Cut the frame count to what the motion needs, pack the frames into one sprite sheet at the size they are drawn, and ask whether a tween (moving, scaling or rotating a single image) would do the same job for the price of one frame.

Fonts

A full font file carries every character in the face, most of which an ad never uses. Playable Ads Maker subsets custom fonts at export to the characters the project actually draws, so a headline in a display face costs a fraction of the full file. If you build by hand, subset the font yourself, and remember that translated variants need their own characters. See custom fonts in playable ads.

Audio

Many placements start muted, so sound is a bonus rather than the message. Keep effects short, use a compressed format, and drop looping music when the size budget is tight. The asset formats guide covers audio formats and settings.

A Worked Example

As an illustration of how the steps combine (your own numbers will differ) take an end card that exports at around 3 MB. Its background is a 3000-pixel PNG straight from the art team, the icon is the store-listing master, and the CTA uses a large PNG texture.

1. The audit shows the background is most of the file, so it goes first: resized to the canvas width and saved as WebP, it drops from megabytes to a few hundred kilobytes.
2. The icon is resized to the size it is drawn on screen, which removes most of its weight.
3. The button texture is replaced with a solid shape and a border drawn by the editor, which costs nothing in image weight.
4. Export-time compression is switched on as a final pass.

None of these steps is clever. Together they usually take a file like this from the edge of the network caps to inside the targets below, with no visible change on a phone. The order matters more than the tools: the largest asset first, always.

When Not to Use Images at All

Solid color backgrounds, CSS gradients, and simple geometric shapes have zero image cost. A dark gradient background with a white headline and colored CTA button can look clean and load in under 100 KB. If your game's brand color is distinctive, a solid or gradient background that uses it consistently with game-name typography often outperforms a cluttered gameplay screenshot, and loads 10x faster.

Size Targets by Creative Type

• End card, 1 background + text + CTA: target 200–400 KB.
• End card with app icon + Particle FX: target 400–600 KB.
• Video end card (HTML only, video separate): same targets as above (video file is not in the HTML).
• Game Template (Match-3 or Runner): target 1–2 MB (game logic adds unavoidable weight).

Common Size Mistakes

• Compressing an already compressed image again and again. Each pass loses quality and saves little. Go back to the original source and export once at the right size and quality.
• Choosing PNG for photographs. PNG suits flat art with hard edges and transparency; photographic backgrounds are far smaller as JPG or WebP.
• Keeping transparency nobody sees. An image with an alpha channel that always sits over a solid area can often be flattened onto that colour and saved in a smaller format.
• Shrinking the art until it blurs. On a high-density phone screen an undersized background looks soft. Size to the canvas, not below it.
• Forgetting the second orientation. A creative with separate portrait and landscape backgrounds carries both, so budget for both from the start.