Data URI Generator
The Data URI Generator turns image files into data URIs: the whole file encoded as text, ready to paste into an <img> tag, a CSS background-image or anywhere else a URL is accepted. Inlining saves the browser a separate request, which helps for small icons and backgrounds. Base64 makes the data about 33% larger than the file, though, and inlined images cannot be cached on their own, so it is best kept for images of a few kilobytes. SVG files can be inlined as URL-encoded text instead, which is usually much smaller.
Your files are converted in your browser and are never uploaded.
Image to data URI
Converting and resizing apply to PNG, JPEG and WebP images. GIFs and SVGs are always kept as they are.
Data URI to file
About Image to Base64 Generator
An Image to Base64 generator is a tool that converts an image file into its Base64 representation. Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. This encoding is often used in various applications, including web development, to embed binary data, such as images, within text-based formats like HTML, CSS, or JSON.
When you use an Image to Base64 generator, you provide it with an image file, and it will encode the image's binary data into a Base64 string. This encoded string can then be included in your code or data as a text string. It's a way to embed images directly in your HTML or CSS, for example, without needing to link to external image files. This can be useful in certain situations, like when you want to reduce the number of HTTP requests on a webpage or need to include images in data transmission, where only text-based data is supported.
When to use a data URI
- Good for: small icons, simple backgrounds and placeholders of a few kilobytes, single-file HTML emails or demos, and images in JSON or other text-only formats.
- Not ideal for: photos and larger images. The Base64 text is about a third larger than the file, it cannot be cached or lazy-loaded separately, and a big data URI inside a CSS file delays everything else in that file. With HTTP/2, extra requests are cheap, so a normal image file is usually faster above about 10 KB.
- SVG: SVG is already text, so URL-encoding it instead of using Base64 keeps it smaller and it compresses better with gzip or Brotli.
- Make it smaller first: converting a PNG or JPEG to WebP, or resizing it to the size it is shown at, often cuts the data URI by half or more.