Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

Image to Data URI

Convert images into data URIs you can paste straight into CSS or HTML. Shows the encoded size next to the original, wraps the result as a CSS background or img tag if you want, and handles whole batches at once. Also decodes a pasted data URI back into a file.

Everything runs locally in your browser. Your data never leaves your device.

Upload

Drop images here

PNG, JPEG, WebP, GIF, SVG… Click to choose files.

They never leave your browser.

Next steps

Send this tool's output straight into another tool.

Text Case Converter

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more.

textconverter

Word & Character Counter

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

text

Dedupe Lines

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

textdev

Find and Replace

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

devuuid

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

Scientific Notation Converter

Convert between scientific notation and full numbers as you type. Reads 1.23e5, 1.23 × 10^5 and plain numbers, shows the value written out, in normalized scientific notation and in engineering notation, and can round to any number of significant digits.

convertercalculator

About the Image to Data URI Tool

This tool turns images into data URIs you can paste straight into a stylesheet or an HTML page. Drop in one or more images and each gets a thumbnail, its original size next to the encoded size, and the finished URI with a copy button.

Base64 makes data about a third larger, and the tool shows that overhead per image so you can judge whether inlining is worth it. SVG files get a URL-encoded data URI by default, which stays readable and is usually smaller than Base64. It also works in reverse: paste a data URI and see what it decodes to.

What you can do

  • Convert a PNG, JPEG, WebP, GIF or SVG to a Base64 data URI.
  • Turn an SVG into a URL-encoded data URI, smaller than Base64.
  • Get the URI ready-wrapped as a CSS background-image or an img tag.
  • Convert a whole batch of images and copy or download all the URIs at once.
  • Decode a data URI back into a preview and a downloadable file.

How to use the Image to Data URI

  1. 1Drop in your images, or click to choose them.
  2. 2Pick per image how to paste it: the raw URI, a CSS background or an HTML img tag.
  3. 3For an SVG, choose between the URL-encoded and the Base64 encoding.
  4. 4Copy each snippet, or copy and download the whole batch as text.
  5. 5To go the other way, switch to decode mode and paste a data URI, CSS or HTML that contains one.

When a data URI is the right call

A data URI saves an HTTP request by embedding the image in the document itself. That pays off for small things like icons, logos and tiny background patterns. It stops paying off quickly as images grow: Base64 adds about 33% to the size, the data is re-downloaded with every document that contains it, and the browser cannot cache it as a separate file. The tool warns you when a URI crosses a few hundred kilobytes, because at that size a normal image file is almost always the better choice. Shrinking the image first with the JPG Image Compressor or the Image Converter keeps the URI small.

Why SVGs get special treatment

SVG is text, so it does not need Base64 at all. The URL-encoded form only escapes the characters that would break a URL, which keeps the markup readable and usually shorter than the Base64 version. The tool shows both sizes so you can compare, and running the file through the SVG Optimizer first makes either form smaller.

Decoding a data URI

Decode mode accepts a bare data URI, or a chunk of CSS or HTML with one inside, and pulls the URI out for you. You get the declared type, the decoded size against the URI size, a preview of images and text, and a download of the decoded bytes as a file. For Base64 that is not a data URI at all, the Base64 Encoder & Decoder tool is the better fit.

Related tools

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Color Converter

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

convertercolordev

Config Converter

Convert config and data between JSON, YAML, TOML, JSON5, INI, XML, CSV and .env. Type or paste on the left, pick the output format on the right, and copy the result. Includes a format button and a minify toggle.

devconverterconfigjsonyaml

CSS Unit Converter

Convert between px, rem, em, percent, pt and viewport units with a configurable root font size. Type into any field and the others update as you go, set the parent font size for em math, and read a conversion table for common sizes.

devconvertercalculator