What a data URI is
A data URI is an image (or any file) written out as text: data:image/png;base64,iVBORw0…. Put that string where a URL would go — the src of an <img>, a CSS url(), a favicon link — and the browser decodes it in place. No request, no file, no path. For a single-file HTML app that is exactly what you want: the page and its pictures are one document, so there is nothing to zip and nothing that can be missing when the APK is built.
When to embed, and when to keep files
| Embed as data URI | Keep as files in a ZIP | |
|---|---|---|
| Icons, logos, small illustrations | Yes — a few KB each, no path to break | Fine too |
| Photos, backgrounds, sprite sheets | Only if small; base64 is ~33% bigger and blocks parsing | Yes — cached and decoded separately |
| Many images (a gallery) | No — the HTML becomes megabytes of text | Yes |
| SVG | Yes — it is already text; often smaller than PNG | Fine |
The rule of thumb this tool applies: it warns once the embedded total passes about 1.5 MB. The free tier bundles up to 5 MB of source content, so there is room, but a page that starts with a megabyte of base64 opens noticeably slower than one that loads image files from the bundle.
Resizing and re-encoding
Images that will only ever be shown on a phone rarely need to be wider than about 1080 pixels, and a 4000px photo from a camera embedded at full size is the most common cause of a bloated single-file app. Set a maximum width and the image is scaled down on a canvas before encoding. Re-encoding as WebP typically halves the size of a JPEG at the same visible quality; every Android version that can install a modern APK can display it. Keep PNG for anything with transparency or sharp edges — WebP handles transparency too, but a PNG of an icon is often already small.