Data URL Generator & Decoder
Convert files or text to data URIs and decode data URIs back to content. All processing runs in your browser.
About This Tool
The Data URL Generator & Decoder is a free browser-based tool that converts files and text into data URIs (also known as data URLs) and decodes existing data URIs back into their original content. Data URIs let you embed small files directly into HTML, CSS, or JavaScript documents using the data: scheme, eliminating the need for separate HTTP requests.
This tool supports any file type including images (PNG, JPEG, GIF, WebP, SVG, ICO), fonts (WOFF, WOFF2), stylesheets, scripts, and arbitrary binary data. When you upload a file, the MIME type is automatically detected. For text input, you can select from common MIME types or enter a custom one.
All encoding and decoding happens entirely in your browser using the native FileReader API and btoa()/atob() functions. No data is ever sent to a server, making this tool safe to use with proprietary images, private fonts, and sensitive documents.
After generating a data URI, you can instantly copy it as a CSS background-image snippet, an HTML <img> tag, or a Markdown image reference. The tool also shows the original file size versus the data URI size so you can make informed decisions about when inlining is worthwhile. Base64 encoding typically increases size by about 33%, so data URIs work best for small assets under 10 KB.
If you already have a data URI and need to inspect its contents, switch to Decode mode. The decoder extracts the MIME type, decodes the Base64 payload, and displays the content. For images, a visual preview is rendered inline.
For related encoding tasks, check out the Base64 Encode/Decode tool for raw Base64 conversion, or the URL Encode/Decode tool for percent-encoding URLs. If you need to compress images before inlining, use the Image Compressor.
How to Use
- Choose Encode mode (default) to create a data URI, or Decode mode to extract content from an existing data URI.
- In Encode mode, select File Upload to drag-and-drop or browse for any file, or Text Input to paste text and select a MIME type.
- For file uploads, simply drop the file onto the dashed area or click to open the file browser. The MIME type is auto-detected.
- For text input, select the appropriate MIME type from the dropdown and click Generate Data URI.
- Copy the generated data URI using the Copy button, or copy the pre-built CSS, HTML, or Markdown snippets.
- Check the size comparison to see how much larger the data URI is compared to the original file.
- In Decode mode, paste a data URI into the text area and click Decode to extract and preview the content.
- Use the keyboard shortcut Ctrl+Shift+C to quickly copy the data URI, or Ctrl+Enter to trigger encoding/decoding.
Popular Data URI Examples
FAQ
Is my data safe when using this tool?
Yes. All encoding and decoding happens entirely in your browser using the native FileReader API and Base64 functions. No file data, text content, or generated data URIs are ever sent to any server. You can safely use this tool with proprietary images and sensitive files.
What is a data URI?
A data URI (Uniform Resource Identifier) is a scheme that lets you embed data directly in web documents using the format data:[<mediatype>][;base64],<data>. Instead of linking to an external file, the content is encoded inline. This eliminates an HTTP request but increases the document size by approximately 33% due to Base64 encoding.
When should I use data URIs?
Data URIs work best for small files under 10 KB, such as icons, small logos, simple SVGs, and small CSS background patterns. They eliminate HTTP requests and reduce connection overhead, which can improve page load performance. For larger files, external URLs with proper caching are usually more efficient.
What are the browser size limits for data URIs?
Modern browsers like Chrome, Firefox, Safari, and Edge support data URIs up to at least 2 MB, and often much larger. However, Internet Explorer 8 had a 32 KB limit. If you need to support very old browsers, keep data URIs under 32 KB. For general use, staying under 2 MB is a safe target.
How much larger is a data URI compared to the original file?
Base64 encoding increases the size by approximately 33% (4 bytes of Base64 for every 3 bytes of binary data). Additionally, the data URI includes the MIME type prefix (e.g., data:image/png;base64,). The exact overhead depends on the file type and encoding. The tool shows both sizes so you can compare.
Can I use data URIs for fonts?
Yes. You can embed WOFF or WOFF2 fonts as data URIs inside @font-face declarations in CSS. This eliminates the font file request and can improve First Contentful Paint (FCP). However, it prevents caching the font independently, so this approach is best for small fonts or critical text rendering.
What file types can I convert?
Any file type can be converted to a data URI. Common use cases include PNG, JPEG, GIF, WebP, and SVG images; WOFF and WOFF2 fonts; PDF documents; and text files. The tool auto-detects the MIME type from the file, or you can specify it manually for text input.
Related Tools
Base64 Encode/Decode
Encode and decode Base64 strings and files with drag-and-drop support.
URL Encode/Decode
Encode and decode URLs, parse query parameters, and build query strings.
SVG to PNG Converter
Convert SVG files to PNG or JPEG in the browser. Set custom scale, dimensions, and background color.
Image Compressor
Compress images in your browser with quality and resize controls. Compare file sizes before and after.
Image Format Converter
Convert images between JPEG, PNG, WebP, BMP, and AVIF formats with quality control and batch processing.
Image Metadata Viewer
View and extract EXIF, IPTC, and XMP metadata from photos. See camera settings, GPS location, and strip metadata for privacy.