UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Data URL Builder

Build and decode data URLs with MIME, charset, and Base64 options.

About Data URL Builder

Data URL Builder encodes any text or small binary payload into a valid RFC 2397 data: URL and decodes existing data: URLs back to their original content with full metadata display. A data URL embeds file content directly in a URL string using Base64 or plain-text encoding, eliminating an HTTP request for the resource. They are widely used to inline small images, fonts, SVGs, and JSON payloads in HTML, CSS, and JavaScript without separate file references. This tool lets you choose the MIME type, charset, and encoding mode (Base64 or URL-encoded plain text), preview the generated data URL, and measure its byte size — critical for deciding whether inlining is worth the cost. The decoder path extracts MIME type, charset, Base64 flag, and raw content from any data: URL you paste in. Everything runs locally in the browser.

Why use Data URL Builder

Eliminate small-asset HTTP requests

Inline tiny icons, loaders, and placeholders as data URLs in CSS or HTML to reduce round-trips, which matters most for assets loaded before first paint.

Inline SVG in CSS background-image

CSS background-image cannot reference inline SVG elements. Data URLs solve this — encode your SVG as a data:image/svg+xml URL and use it in url() without a separate file or HTTP request.

Portable single-file exports

Embed images and assets directly in HTML files, JSON payloads, or email templates to create self-contained documents that work without external file references.

Debugging encoded payloads

When a data: URL appears in a network trace, DOM inspection, or a bug report, paste it into the decoder to instantly read the original content without writing JavaScript.

JSON and API testing

Encode JSON or XML payloads as data URLs for use in href attributes, data- attributes, or test fixtures that require a URL format but need to carry structured data inline.

No file upload required

Enter text content directly or paste raw Base64 — no file picker needed. Everything stays in the browser tab. Suitable for use in secure or air-gapped environments.

How to use Data URL Builder

  1. Select the Build or Decode mode using the toggle at the top of the tool.
  2. For Build mode: paste or type your content into the text area, choose the MIME type (e.g. image/svg+xml, text/html, application/json) from the dropdown or type a custom one, and set the charset if applicable.
  3. Toggle the Base64 switch on for binary-safe encoding (recommended for images and fonts) or leave it off for plain-text MIME types like text/plain or application/json.
  4. Click Build to generate the data: URL. The output field shows the complete string with byte count.
  5. For Decode mode: paste an existing data: URL into the input field and click Decode to extract the MIME type, charset, Base64 flag, and decoded content.
  6. Use the Copy button to copy the generated or decoded content, or the Preview button (for image/* and text/html MIME types) to render the output inline.

When to use Data URL Builder

  • Inlining a small loading spinner SVG or icon in a CSS file as a background-image data URL to eliminate an HTTP request that would block rendering.
  • Creating a self-contained HTML email template that embeds images as data URLs so the images display correctly in email clients that block external HTTP requests.
  • Generating a data URL representation of dynamically created canvas content in a browser application for download or storage without a server roundtrip.
  • Decoding an unknown data: URL found in a DOM attribute, CSS file, or network request to read its MIME type and content during a debugging session.
  • Building test fixtures for unit tests that require an image URL input but need to work offline without real asset files or network access.
  • Embedding a JSON configuration or XML payload in an href attribute or a data-config attribute where a URL-shaped value is required by the consuming library.

Examples

SVG icon as CSS background

Input: MIME: image/svg+xml | Encoding: URL-encoded | Content: <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='%23f5c842'/></svg>

Output: data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%276%27%20fill%3D%27%23f5c842%27%2F%3E%3C%2Fsvg%3E (174 bytes)

JSON payload inline

Input: MIME: application/json | Encoding: Base64 | Content: {"name":"UtilityKit","version":"1.0"}

Output: data:application/json;base64,eyJuYW1lIjoiVXRpbGl0eUtpdCIsInZlcnNpb24iOiIxLjAifQ== (68 bytes)

Decode existing data URL

Input: data:text/html;charset=utf-8,%3Ch1%3EHello%20World%3C%2Fh1%3E

Output: MIME: text/html | Charset: utf-8 | Base64: No | Decoded content: <h1>Hello World</h1>

Tips

  • For SVG data URLs in CSS, URL-encoded plain-text encoding is usually shorter than Base64 and is more readable in source files — compare both outputs using the tool before committing to one format.
  • Keep data URLs under 4KB for CSS background images. Above that threshold, a separate cached file almost always loads faster due to HTTP/2 multiplexing and browser cache reuse across pages.
  • Add a charset parameter for text MIME types: data:text/html;charset=utf-8,... prevents browsers from misinterpreting encoding on HTML payloads containing non-ASCII characters.
  • When embedding data URLs in JSON (e.g. as a field value), remember to JSON-escape the string — the Base64 alphabet is safe, but URL-encoded data URLs may contain characters that need escaping.
  • Use the Decode mode to audit existing data URLs in third-party CSS or HTML for unexpectedly large payloads or suspicious content — data URLs can hide content that is not visible in the surrounding markup.

Frequently Asked Questions

What is the format of a data URL?▾
A data URL follows the RFC 2397 format: data:[<mediatype>][;base64],<data>. The mediatype is a MIME type optionally followed by charset (e.g. text/html;charset=utf-8). The ;base64 token signals that the data is Base64-encoded. If omitted, the data is URL-percent-encoded text. Example: data:image/svg+xml;base64,PHN2Zy4uLg==
When should I use Base64 encoding versus plain URL encoding?▾
Use Base64 for binary content (images, fonts, audio) — it is compact and safe for all byte values. Use plain URL encoding (without ;base64) for text MIME types like text/plain, text/html, or application/json — the output is more readable and often shorter for text payloads with mostly ASCII characters.
Is there a size limit for data URLs?▾
There is no size limit in the RFC, but browsers and environments impose practical limits. Chrome and Firefox support data URLs up to ~2MB in CSS and attribute contexts. Internet Explorer capped them at 32KB. For production use, data URLs over 4–8KB rarely save a net round-trip compared to a properly cached external asset.
Can I use a data URL as an <img src> value?▾
Yes. <img src='data:image/png;base64,...'> works in all modern browsers and in most email clients. Similarly, CSS background-image: url('data:image/svg+xml,...') is fully supported. Audio and video data URLs work but are less common and may have size and codec restrictions.
Can data URLs execute JavaScript?▾
In older browser versions, data: URLs with an HTML MIME type and embedded script tags could execute JavaScript when opened in a tab. Modern browsers block script execution in data URLs loaded in top-level navigation (Chrome since 2019, Firefox since 2017) as a security measure. Data URLs as image or CSS values cannot execute scripts.
What is the overhead of Base64 encoding?▾
Base64 encodes 3 bytes as 4 ASCII characters, adding approximately 33% to the payload size. A 1KB binary file becomes roughly 1.37KB as a Base64 data URL. When gzip or Brotli compression is applied, the overhead is typically reduced to 10–20%, but data URLs embedded in HTML or CSS are usually not independently compressed.
Can I use data URLs to bypass Content Security Policy?▾
Not reliably. CSP's img-src directive can block data: URLs with img-src 'self'. The data: scheme must be explicitly allowed with img-src data:. Script execution via data: is blocked by default in modern browsers regardless of CSP. Do not rely on data URLs as a CSP workaround — configure your CSP correctly instead.
What MIME type should I use for SVG data URLs?▾
Use image/svg+xml for SVG content. For inline use in CSS background-image without Base64, the SVG can be URL-encoded (replace < > # with %3C %3E %23 etc.) and is often shorter than Base64. The tool's Build mode generates both variants so you can compare sizes.

Explore the category

URL Encoder Encode and decode URLs Image Base64 Converter Encode files to data URLs or decode previews. Base64 Encode and decode Base64 strings URL Parser Parse URLs into protocol, host, path, query parameters, and hash parts. X.509 Certificate Inspector Decode PEM or DER (base64) X.509 certificates to extract subject, issuer, SANs, validity, key info, and fingerprints. JWT Decoder Decode and inspect JWT tokens
URL Encoding Explained: Percent-Encoding and Why It Matters A space in a URL becomes %20, a plus sign becomes %2B — but not always, and the rules differ depending on where in a URL you are. This post Jan 2026 · 6 min CSV and TSV: The Universal Data Exchange Format Explained CSV files look trivial until you encounter a value with a comma inside it, a newline in a cell, or a file saved in the wrong encoding. This Mar 2026 · 7 min Data Normalization Explained: 1NF, 2NF, 3NF Without the Jargon Normalization rules sound abstract until you see what a denormalized table looks like after six months of updates. This guide explains the n Mar 2026 · 9 min

Glossary

Data URL (data: URI)
A URI scheme defined in RFC 2397 that allows content to be embedded directly in a URL string rather than referenced as an external resource. Format: data:[mediatype][;base64],<data>.
Base64 encoding
A binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). Used in data URLs to safely embed binary content like images in text-based contexts (HTML, CSS, JSON).
RFC 2397
The 1998 IETF standard defining the data: URL scheme syntax. It specifies the mediatype, optional charset parameter, optional ;base64 token, and the data payload format.
Content Security Policy (CSP)
An HTTP response header that restricts what resources a page can load. The data: scheme for img-src, object-src, and script-src must be explicitly whitelisted in CSP directives; it is not permitted by default.
MIME type (mediatype)
The type/subtype identifier (e.g. image/png, text/html) embedded in the data URL that tells the browser how to interpret the payload. If omitted, browsers default to text/plain;charset=US-ASCII.
Percent-encoding
The URL encoding scheme used in plain-text (non-Base64) data URLs to represent characters outside the safe URL character set. Less space-efficient than Base64 for binary data but more readable for text content.