Image to data URI

The file is read with FileReader inside this page and its bytes are written out in base64, the encoding that turns three bytes into four characters of plain text. That is where the cost comes from: a data URI is about a third larger than the file it carries, before any compression the server adds. The type in front of the comma — data:image/png;base64, — is the browser's own reading of the file, not the extension on its name, so a PNG saved as .jpg still says PNG here.

SVG is handled differently, because it does not need base64 at all. An SVG is text, so the page percent-encodes it instead, which is both smaller than base64 and still readable in the stylesheet. Shrink the SVG source first drops XML comments, the <?xml?> declaration and repeated whitespace before encoding — it never touches the drawing itself, so the image is unchanged. If the SVG carries a script, it is left in place: this page does not edit your file, and a data: URI in img or CSS cannot run it anyway.

Data URIs are worth it for small, unchanging images — an icon, a texture, a one-pixel gradient stop. They are a bad deal for anything big: the bytes are copied into every file that mentions them, they cannot be cached separately, and a stylesheet that carries a photograph blocks the page until it has finished loading. The page prints the encoded size so that trade is visible, and warns past about 10 kB. Files above 4 MB are refused, because the text would be larger than most editors like to hold.

Nothing is uploaded: the file is read in this tab and the page makes no network requests. Nothing you drop is stored; the Dark button keeps its own setting in this browser's local storage.