# Data URI Generator Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown > Canonical page: https://elysiatools.com/en/tools/data-uri-generator - **Category:** Development - **Keywords:** data uri, base64, inline, embed, image, font, css, html, data url, data scheme ## 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. ## Inputs - **File** (file) - **Encoding** (select) - **Output format** (select) - **MIME type** (text): Auto-detected (e.g. image/png). Override only if needed. ## 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. ## Frequently asked questions ### 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. ## Related tools - [Image Sequence to Video](https://elysiatools.com/en/tools/image-sequence-to-video): Convert uploaded image files or a ZIP archive of frames into a video, sorted naturally by filename - [PDF Photo Contact Sheet](https://elysiatools.com/en/tools/pdf-photo-contact-sheet): Generate paginated photo contact sheets with thumbnails, filenames, and EXIF lines - [PDF Storyboard Sheet](https://elysiatools.com/en/tools/pdf-storyboard-sheet): Generate storyboard sheets with thumbnail frames and description areas - [Image Watermark Opacity](https://elysiatools.com/en/tools/image-watermark-opacity): Add watermarks with custom opacity to images, supporting both text and image watermarks with advanced opacity controls - [Batch Image Convert](https://elysiatools.com/en/tools/batch-convert): Convert multiple images to different formats with quality settings and batch processing - [Image Bit Depth to PNG Converter](https://elysiatools.com/en/tools/image-to-bit-depth-png): Convert images to exact monochrome, indexed, grayscale, RGB, or RGBA PNG bit depths with verified output. - [PDF Header/Footer Snippets](https://elysiatools.com/en/tools/pdf-header-footer-snippets): Convert HTML to PDF with reusable logo, title, and date snippets - [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each ## Samples - [Web Image Processing TypeScript Samples](https://elysiatools.com/en/samples/web-image-processing-typescript): Web TypeScript image processing examples including image read/save, scaling, and format conversion - [Web Image Processing Rust Samples](https://elysiatools.com/en/samples/web-image-processing-rust): Web Rust image processing examples including image read/save, scaling, and format conversion - [PDF Samples](https://elysiatools.com/en/samples/pdf-samples): Generated PDF samples from tools dated 2026-02-01 to 2026-02-10 - [WebRTC Real-Time Communication Samples](https://elysiatools.com/en/samples/webrtc-samples): Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation ## Related content - [Audio Encoding and Format Conversion Tools](https://elysiatools.com/en/hubs/audio-convert): 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](https://elysiatools.com/en/hubs/image-convert): 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](https://elysiatools.com/en/hubs/json-convert): 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](https://elysiatools.com/en/hubs/text-convert): Compare text case conversion, character-width conversion, encoding conversion, quoted-printable handling, and inline text normalization tools in one hub.