Utilities Center

Guide

How to Encode Images as Base64 Data URLs

Learn how to embed images inline as Base64 data URLs, when it helps, and the trade-offs.

Open the Base64 Image Encoder / Decoder

A Base64 image encoder converts an image into a Base64 data URL that you can embed directly in HTML, CSS, or JSON without a separate file. A decoder reverses the process.

What a data URL is

A data URL is a string that embeds the file content inline, prefixed by its MIME type, e.g. data:image/png;base64,iVBORw0KGgo.... The browser treats it as the image itself, so no separate HTTP request is needed to load it.

When to embed images as Base64

  • Small icons and logos in HTML or CSS to cut HTTP requests.
  • Inlining images in JSON payloads or email templates.
  • Self-contained HTML documents with no external assets.
  • Passing images through APIs that accept text only.

How to encode or decode

  1. To encode: upload an image and copy the generated data URL.
  2. To decode: paste a Base64 image string and view or download the image.

Examples

A 4 KB logo encoded as a data URL can be dropped straight into <img src="data:image/png;base64,..."> so the page renders the logo with no extra request. Decoding a data URL back to an image lets you recover and save an inline picture.

Trade-offs

Base64 encoding inflates file size by about 33%, and large images bloat the HTML or CSS that carries them, slowing the initial parse. Use Base64 for small assets (icons, sprites) and stick to regular files for large photos. Base64 images are also not cached separately by the browser.

Put it into practice

Use the Base64 Image Encoder / Decoder right now — free, in your browser, no sign-up required.

Try the Base64 Image Encoder / Decoder

More guides

Back to all tools

Related free tools

More free online utilities that pair well with this one — same-category tools for the same task, plus handy extras from other categories.