# What Is a Data URI? — Inlining Assets, and the 33% Tax

Canonical: https://commareports.com/glossary/data-uri
Published: 2026-09-11

> A data URI embeds a file's bytes directly in a document instead of linking to it. The syntax, why base64 inflates by a third, and where inlining stops being a good idea.

# Data URI

**A data URI (RFC 2397) embeds a resource's bytes directly inside a
document instead of pointing at a separate file.** It is the mechanism
behind every single-file HTML export.

```html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…" />
<link rel="stylesheet" href="data:text/css,body%7Bmargin%3A0%7D" />
```

Syntax: `data:<mediatype>[;base64],<data>`. Without `;base64` the payload
is percent-encoded text, which is smaller for CSS and SVG than base64 is.

## The 33% tax

Base64 encodes three bytes as four ASCII characters. Encoded data is
about a third larger than the original, before any line wrapping.

That is only the visible cost. Inlining also defeats the optimisations
that made the multi-file version fast:

- **No caching.** A linked asset is fetched once across every page and
  every visit. An inlined one is re-parsed on every open.
- **No lazy loading.** An image below the fold parses with the document.
- **Blocking parse.** The browser reaches first paint only after the
  whole inlined blob has been read.

A 400 KB report with 6 MB of assets becomes an 8 MB single file that
takes seconds to open — and still will not attach to most mail servers
([too big to email](/fix/html-file-too-big-to-email)).

## Where it is the right call

- A logo or icon of a few kilobytes that must survive detachment.
- SVG inlined as percent-encoded text, which is often _smaller_ than the
  extra HTTP request it replaces.
- A single chart image in a report someone will genuinely open from an
  email attachment.

## Where it stops working

Whole report directories. Tools whose reports fetch a JSON data tree at
runtime — Allure, Playwright, most coverage trees — cannot be inlined at
all without rewriting the report
([self-contained HTML](/glossary/self-contained-html)).

And inlining does nothing about delivery. The file still has to get past
attachment limits and chat clients that refuse to preview HTML, and it
still arrives as a file on someone's disk with no comments, no versions
and no way to know it was read.

## The alternative

Upload the directory as it is. Relative references are rewritten to the
uploaded copies, so nothing inflates by a third, the reader gets a URL
instead of an attachment, and the page loads incrementally the way its
author intended.

**Limits:** entry HTML 5 MB; assets 25 MB per file, 250 MB and 500 files
per report. An export that exceeds the 5 MB entry limit is almost always
inlined assets — uploading the original directory is the smaller path.

## Try it

Comma is free — unlimited reports, unlimited commenters, unlimited
revision history.

**[Publish a report directory →](https://commareports.com/)**

### Related

- [Self-contained HTML](/glossary/self-contained-html) · [MIME type](/glossary/mime-type)
- [Share an HTML folder](/share-html-folder) · [Email an HTML report](/email-html-report)
- [The HTML file is too big to email](/fix/html-file-too-big-to-email) · [Glossary](/glossary)