Data URI Generator

Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Key Facts

Category
Developer & Web
Input Types
file, select, text
Output Type
text
Sample Coverage
4
API Ready
Yes

Overview

The Data URI Generator converts local files like images, fonts, and stylesheets into encoded Data URIs using Base64 or percent-encoding. This allows developers to inline assets directly into HTML, CSS, or Markdown documents, reducing HTTP requests and simplifying asset delivery.

When to Use

  • •When you want to embed small icons, logos, or fonts directly into CSS or HTML to eliminate extra HTTP requests.
  • •When creating self-contained HTML templates, email newsletters, or Markdown files that need to display images without external hosting.
  • •When developing offline-first web applications or single-file prototypes that require embedded assets.

How It Works

  • •Upload your file (such as PNG, SVG, WOFF2, or MP3) using the file input.
  • •Select your preferred encoding method (Base64, URL-encoded, or Raw) and output format (Data URI, HTML img tag, CSS background, or Markdown).
  • •Optionally override the automatically detected MIME type if a custom type is required.
  • •Copy the generated Data URI or formatted code snippet directly into your project.

Use Cases

Inlining SVG icons directly into CSS background-image properties to keep stylesheets self-contained.
Embedding custom web fonts (WOFF2) inside a CSS @font-face rule to prevent layout shifts during loading.
Inserting small images directly into Markdown documentation or README files without relying on external image hosting.

Examples

1. Embedding a UI Icon in CSS

Frontend Developer
Background
A developer is building a lightweight UI library and wants to include a search icon directly inside the CSS file to avoid external asset dependencies.
Problem
The icon needs to load instantly with the stylesheet without triggering an additional network request.
How to Use
Upload the search-icon.svg file, select 'Base64' encoding, and set the output format to 'CSS background'.
Example Config
Encoding: Base64, Output format: CSS background
Outcome
Generates a CSS rule: background-image: url("data:image/svg+xml;base64,..."); ready to paste into the stylesheet.

2. Inlining a Logo in an Email Template

Email Marketer
Background
An email marketer is designing an HTML newsletter and wants to ensure the company logo displays even if the recipient's email client blocks external images.
Problem
External image URLs are frequently blocked or load slowly in email clients.
How to Use
Upload the logo.png file, select 'Base64' encoding, and choose 'HTML <img> tag' as the output format.
Example Config
Encoding: Base64, Output format: HTML <img> tag
Outcome
Produces an <img src="data:image/png;base64,..." /> tag that embeds the logo directly into the HTML email body.

Try with Samples

json, xml, html
PDF Samples
Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
preferred input family image,pdf,text
image, pdf
WebRTC Real-Time Communication Samples
Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation
preferred input family audio,video,text
audio, video
QR Code Samples
Sample QR code images for testing QR code reading and generation tools
preferred input family image,text,json
image, text
XML Samples
XML (eXtensible Markup Language) format examples from simple to complex structures
preferred input family image,text,xml
image, text

Related Hubs

Audio Encoding and Format Conversion Tools
Compare audio format conversion, bitrate changes, sample-rate conversion, codec swaps, and export tools in one hub for delivery and archive workflows.
Image Format Conversion and Animated Export Tools
Compare image format converters for JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64, and animation-friendly exports in one hub.
JSON Interchange and Format Translation Tools
Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub.
Text Case, Encoding, and Normalization Conversion Tools
Compare text case conversion, character-width conversion, encoding conversion, quoted-printable handling, and inline text normalization tools in one hub.

FAQ

What file types are supported by the generator?

The generator supports images (PNG, JPEG, SVG, WebP), fonts (WOFF, WOFF2, TTF), audio, video, PDFs, and text files (CSS, JS, HTML, JSON).

Does using Data URIs improve website performance?

It reduces HTTP requests, which benefits small assets like icons. However, Base64 encoding increases file size by about 33%, so it is not recommended for large files.

Can I customize the MIME type of the output?

Yes, you can manually override the auto-detected MIME type using the custom MIME type input field.

What is the difference between Base64 and URL-encoding?

Base64 is standard for binary files like images and fonts, while URL-encoding (percent-encoding) is ideal for text-based assets like SVGs to keep them readable and slightly smaller.

Is there a file size limit for uploads?

Yes, the tool supports files up to 10 MB in size.

API Documentation

Request Endpoint

POST /en/api/tools/data-uri-generator

Request Parameters

Parameter Name Type Required Description
file file (Upload required) Yes -
encoding select No -
outputFormat select No -
customMime text No -

File type parameters need to be uploaded first via POST /upload/data-uri-generator to get filePath, then pass filePath to the corresponding file field.

Response Format

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Text: Text

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

Supports URL file links or Base64 encoding for file parameters.

If you encounter any issues, please contact us at [email protected]