Pictures as text: when embedding beats linking
This guide explains the thinking behind data URIs, walks each of the six output formats, shows a real icon being embedded into a stylesheet, and covers the decode direction too. Along the way it gives you the arithmetic to decide when embedding helps a page and when it quietly hurts.
The problem this solves
Web pages normally reference images as separate files, and every separate file is another round trip to a server. For a tiny icon that trip can cost more time than the icon itself. There are also places where a second file simply cannot go: a JSON payload, a single-file HTML report, an email template, a code snippet you want to hand somebody whole.
Encoding turns the image bytes into a block of ordinary characters, so the picture can live inside the text of your CSS, HTML or data. The browser reads it in place with no extra fetch. That is the entire trick, and this page does it in both directions.
Encoding: drop, inspect, choose
The first tab takes your file by drag, by file picker, or by pasting from the clipboard, and several at once are fine since a filmstrip appears for switching between them. Nothing is redrawn or recompressed at any point. The exact bytes on disk are what get encoded, so quality is untouched by definition.
Above the output sits a row of four numbers worth reading: the pixel dimensions, the file size on disk, the size once encoded, and how much bigger that is. The last figure hovers around a third, and the section on arithmetic below explains why it can never be less.
Six shapes of the same string
The Output format menu wraps the identical encoded data in different packaging, so you rarely have to assemble anything by hand.
- Data URI is the ready-to-use form, complete with its type prefix. Paste it anywhere a URL is accepted.
- Raw Base64 only gives the bare characters, for APIs that add their own prefix.
- CSS background rule produces a complete style rule. Swap in your own selector name and done.
- HTML img tag wraps the string in an image element ready for a page.
- Markdown emits the image syntax used by readme files and wikis.
- JSON quotes and escapes the string safely for a data field.
Copy, or save when it is huge
For most icons the Copy button is the whole story: one click, then paste into your editor. The length readout under the box tells you what you are about to put on the clipboard.
Past a certain length, pasting a single monster line into an editor becomes unpleasant, and some tools choke on it. That is what Save as .txt is for. You get the string as a file, and you can open it wherever handles large text gracefully. The page also warns you outright when a source file is over 100 KB, because at that size embedding is usually the wrong engineering call, not just an inconvenience.
The decode direction
The second tab, reached by the switch at the top, goes backwards. Paste a data URI, or the bare characters without any prefix, and press Decode. The picture appears with its details underneath, and a Save image button appears once decoding succeeds.
This is surprisingly handy in real work. You inherit a stylesheet with a mystery blob in it and want to see what the icon actually is. Somebody sends you an API response with an embedded image. A backup contains pictures only in encoded form. Paste, decode, look, save.
Worked example: an arrow into a stylesheet
Say you have arrow.png, a 1.4 KB chevron used on every dropdown of a site. Drop it on the first tab. The stats read 24 by 24 pixels, 1.4 KB on disk, about 1.9 KB encoded, roughly a third bigger, exactly as expected.
Choose CSS background rule from the format menu. The output box now holds a full rule with the image inline. Click Copy, paste it into the stylesheet, and rename the selector to .dropdown-toggle. Reload the site: the chevron renders with one less network request, and the icon can never 404 again because it travels inside the CSS itself.
The arithmetic of a third
Encoding maps every 3 bytes of the original into 4 text characters, because it must express arbitrary bytes using only 64 safe symbols. Four for three is a growth factor of about 1.33, and no setting can change it. A 9 KB image becomes roughly 12 KB of text, always.
That overhead is rented, not free. You pay it to save a request and to make the asset self-contained. For a 2 KB icon the rent is trivial and the benefit real. For a 400 KB photo you would bloat your stylesheet by over half a megabyte and block it from being cached separately from the page. The break-even sits somewhere around 10 KB, which is why the page nags above 100.
Working through a set of icons
Drop two or more files and a row of thumbnails appears under the stats. Click any thumbnail and the whole panel switches to that file: its name in the heading, its own four numbers, its own string in the box below. With a single file the row stays hidden, because there is nothing to switch between.
That makes a set of icons a pleasant few minutes rather than a chore. Load all eight at once, pick the output shape once, then click along the row copying each string in turn. The format menu keeps its setting as you move, so you are not reselecting CSS eight times.
The Save as .txt button follows the same rule. It saves the string for whichever thumbnail is selected, and names the file after the picture, so cart.png leaves as cart-base64.txt. Eight saves give you eight clearly labelled text files instead of one confusing pile.
A second run: a logo in a single file report
Here is the other common shape of this job. You have written a one page HTML report that has to be emailed as a single attachment, and it needs your team logo at the top. A linked image would arrive broken, since the picture would not travel with the file.
Drop logo.png in. Suppose the stats read 180 by 60 pixels, 6.2 KB on disk, 8.4 KB encoded, plus 37 percent. Under the 100 KB line, so no warning appears and embedding is a sound choice.
Choose HTML img tag from the format menu. The box fills with a complete element, and the readout under it says something like 11,400 characters. Press Copy, paste it where the logo belongs, and save the report. The file grows by a few kilobytes and becomes genuinely self contained: no folder of assets, nothing to lose in a forward.
Where the string travels well
Embedded pictures suit some destinations and annoy others. A quick sense of which is which saves an afternoon.
- Good: small icons in a stylesheet, a report or slide deck exported as one HTML file, an image field in a JSON message, a placeholder in a demo with no server behind it.
- Workable but noisy: a readme on a code host, where the picture shows but the raw file becomes hard to read.
- Poor: anything version controlled that changes often, since every edit rewrites a huge block of text and the history swells.
- Poor: large photographs, which lose the ability to be cached on their own and make the page carrying them slower to arrive.
Mistakes people actually make
Embedding a photo because it worked for an icon is the classic one, covered above. A few others come up repeatedly.
Pasting the raw string where a data URI was needed, or the reverse. If the destination shows a broken image, check whether the prefix is doubled or missing. Editing the string by hand, which corrupts it, since every character carries data. And re-encoding something that was already encoded, which balloons it by a third again while achieving nothing. When in doubt, decode on the second tab and inspect what you truly have.
When the decode tab pushes back
The decode side gives two different complaints, and they mean different things. If it says the text does not look like Base64 or a data URI, the paste is not encoded data at all. Usually a stray line of code came along with it, or quotation marks and a semicolon from the stylesheet are still attached. Trim back to the string itself and try again.
The second message says the text is not a valid image and suggests checking that you copied the whole thing. That one is almost always literal. Long strings get cut off by a text box that scrolled, by a chat window that trimmed the message, or by a line wrap in an editor. Go back to the source and select from the very first character to the very last.
When it works, the picture appears with its pixel size printed underneath and a Save image button turns up beside Decode. That size line is worth a glance: it is the quickest way to tell a real logo from a tiny tracking dot somebody embedded in a template.
For icons, consider SVG first
One honest aside. If your small graphic exists as an SVG, pasting the SVG markup straight into your HTML is often better than encoding anything. The markup tends to be smaller than an encoded PNG, it scales to any resolution, and you can restyle its colours with CSS. Encoding earns its keep for raster images, for JSON payloads, and for contexts where markup cannot go.
Reading your file, not receiving it
A quiet point about how this page operates: your browser opens the file straight from your disk, encodes it in memory, and shows you the result. No copy travels to any server, in either direction, and the decode tab works the same way. You could load the page, pull the network cable, and both tabs would carry on working exactly as before. For company logos, unreleased product shots and anything under an agreement, that property is worth more than convenience.