All lessons T
Encoding & Escaping beginner 8 min

Turn a Small Image Into a Data URI

Convert a small image into an embeddable data URI and know when that tradeoff is acceptable.

Scenario

A single-file HTML demo needs a small logo, and shipping a second file alongside it defeats the point of "single-file." The standard trick is a data URI: the image bytes Base64-encoded and inlined as data:image/png;base64,... directly in the src or CSS url(). It works beautifully for icons and breaks budgets quickly for anything bigger — Base64 inflates size by roughly a third, and inlined bytes cannot be cached separately.

Broken input

small logo image for an inline demo

Goal

Use Image to Base64 Converter to produce a complete, paste-ready data URI — correct MIME prefix included — and confirm the size cost is acceptable before inlining.

Tool sequence

  1. Open Image to Base64 Converter.
  2. Load the logo file; the converter detects the format and builds the data:image/png;base64, prefix to match.
  3. Check the output size — a few KB of image becomes ~33% more characters of Base64; if the URI runs to hundreds of KB, keep the image as a file instead.
  4. Copy the entire URI including the prefix; the Base64 payload alone renders nothing.
  5. Paste into <img src="..."> or CSS url(...) and open the demo; if the image fails to render, the usual culprit is a truncated paste or missing prefix — decode a snippet with Base64 Encoder to check integrity.

Checkpoint output

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
└──────┬──────┘└──┬──┘└────────────┬────────────┘
     MIME       marker        Base64 payload

A complete data URI with format prefix and payload — the demo renders the logo with zero extra network requests.

Common mistakes

  • Inlining large images that should stay separate files — the page loses caching and the HTML becomes megabytes.
  • Copying only the Base64 payload without the data:image/...;base64, prefix and getting a broken image icon.
  • Forgetting that data URIs turn image updates into massive text diffs in code review.
  • Inlining the same image in five places, paying its full size five times where one cached file would be fetched once.

Related tools and lessons