Data URL Generator — Inline Text, HTML, CSS, JSON, SVG
Encode text, HTML, CSS, JSON, XML, SVG, or JavaScript into a data URL using base64 or URL encoding. Live re-encode as you type, copy or download in one click. Useful for inlining tiny assets in CSS background-image rules, HTML <img> src attributes, or browser extension manifests.
Paste or type the text/HTML/CSS/JSON/SVG you want to embed.
Output data URI
About Data URL Generator
Encode text, HTML, CSS, JSON, XML, SVG, or JavaScript into a data URL using base64 or URL encoding. Live re-encode as you type, copy or download in one click. Useful for inlining tiny assets in CSS background-image rules, HTML <img> src attributes, or browser extension manifests.
Encoding happens entirely in your browser using FileReader and btoa() for base64 or encodeURIComponent() for URL encoding. Nothing is uploaded, nothing is stored — closing the tab erases everything from memory. Data URIs are great for inlining small assets (icons, SVGs, short HTML snippets), but for files larger than around 100KB they bloat your HTML/CSS more than they help.
Related tools
About Data URL Generator
Data URL Generator is a free, in-browser image tool. Encode text, HTML, CSS, JSON, XML, SVG, or JavaScript into a data URL using base64 or URL encoding. Live re-encode as you type, copy or download in one click. Useful for inlining tiny assets in CSS background-image rules, HTML <img> src attributes, or browser extension manifests. The page exposes a small surface — input, controls, output — so a first-time visitor can complete the job without reading documentation.
The engine behind the page is standard browser APIs. It reads your file in-memory and writes the result back into the browser. For 0 MB and below the work usually completes in seconds; larger files mostly depend on how much spare RAM your device has.
Common audiences for Data URL Generator include developers preparing UI screenshots and e-commerce owners cleaning product shots, but plenty of people land on the page through a one-off search and never come back — that is also fine. The tool is built to be useful even when you only ever need it once.
The architecture is local-first by design. Once the page is loaded, you can disconnect from the network and the tool still completes the job. The processing stack — standard browser APIs and the small UI shell wrapping it — ships with the page itself, so the tool keeps working in offline conditions, on a captive-portal Wi-Fi, or behind a corporate proxy that limits what the tab can reach.
Reach for Data URL Generator when you need a predictable result on a single file. The page works on the first visit, the controls are visible without a menu, and the output is delivered the moment the engine finishes.
When the job finishes, Data URL Generator hands you the result as a sensibly named file. Filenames are derived from your input where possible, so a quick batch of jobs leaves you with a tidy folder rather than a pile of generic "output (3)" files. Nothing is auto-saved on Favtoo's side because nothing was ever sent there.
The 0 MB ceiling on input size is the only fixed limit. Output files are produced in standard formats that every common viewer recognises, and the tool runs the same way regardless of how many times you have used it during the session.
As a workflow component, Data URL Generator is the part you reach for when a single, well-defined image editing and conversion step needs to happen. It performs that step and returns a standard file you can carry into the next part of your pipeline.
Data URL Generator is built around steady iteration on a small set of options rather than feature creep. Every additional setting attracts a slightly different audience, but a long settings panel makes the common case slower for everyone. The current controls reflect what users of the tool actually use.
Data URL Generator is one example of a broader pattern: utility software increasingly works as single-page, client-side experiences. Every page in the catalog is shaped that way, which keeps each tool fast to load and easy to recommend in a single link.
Data URL Generator runs as a regular web page, so there is no install step or permission grant before the first run. The page can be audited by viewing the source or by watching the developer-tools Network tab while a job runs.
Pro tip: Data URL Generator works just as well in a private/incognito window as in a normal one, which is occasionally useful when you want zero browser-history footprint of the job. Another tip: if the tool ever feels slow, it is almost always because the browser tab is competing for CPU with another tab — pausing or closing the heavy ones gives the engine room to work.
If Data URL Generator appears to hang, the engine is almost certainly still working — large inputs simply take longer to process inside a browser than they would on a server with multi-core scheduling. For inputs near the 0 MB cap, give it up to a minute on a typical laptop before assuming something is stuck.
That is the whole tool. Use Data URL Generator for as long as it stays useful to you, and if it does, the catalog has many more tools built the same way. Each applies the same single-purpose discipline, so the way you used this page transfers to the next one you try.
How it works
- 1Land on the Data URL Generator page. The tool is ready to use the moment the page renders.
- 2Select the image file you want to process — drag-and-drop and the file picker both work.
- 3Tweak the controls if the defaults are not quite right for your input. The options are kept short and labelled in plain language.
- 4Hit the run button. standard browser APIs does the work in your browser tab.
- 5Grab the output as soon as the run completes. You can also copy the result instead of downloading if the next tool in your workflow accepts pasted input.
- 6Repeat the process for additional inputs whenever you need to. The page stays loaded, so subsequent runs are quick.
Common use cases
- Generate a square thumbnail from a wide marketing photo using Data URL Generator.
- Strip EXIF data from a photo before posting it publicly.
- Crop an image down to the section you actually want to share.
- Optimise a product photo so it loads quickly on a slow connection.
- Resize a hero image for a landing page without losing crispness.
- Convert a phone screenshot into a CMS-friendly format.
- Prepare a transparent logo for use over different backgrounds.
- Sharpen a slightly soft photo before sending it to print.
- Compose a mockup banner without bouncing between three different apps.
- Produce a printable flyer from a single source image.
FAQ
What exactly is a data URL?
A data URL is a URL whose content is embedded directly in the URL itself rather than fetched from a server. Browsers and most apps treat it just like any other URL — you can use it as the src of an <img>, the value of CSS background-image, or the href of a link. The format is data:[mime];[encoding],[content].
Base64 vs URL encoding — which should I pick?
URL encoding is more compact for plain text and easier to read when debugging (you can still see the original content). Base64 is required for binary data and is also safer for content that contains characters that would otherwise need lots of escaping (e.g. SVG with quotes and angle brackets). For SVG specifically, URL encoding usually wins because the result is shorter than base64.
Are there size limits?
Modern browsers technically accept data URLs of several megabytes, but performance suffers quickly. Best practice: keep individual data URLs under ~10KB. Past that, the bandwidth cost of inlining outweighs the latency saving and it inflates your HTML/CSS files.
When should I use a data URL?
Inline tiny SVG icons, single-pixel transparent images for CSS hacks, short HTML snippets in browser-extension popups, configuration JSON in URLs, etc. Anything that is small, doesn’t change often, and would otherwise require an extra HTTP request.
Can I encode images here too?
For raw text content, this tool is perfect. For binary image files (PNG, JPG, etc.) use our dedicated Data URI Image Encoder, which knows how to read the file as binary and base64-encode it correctly.
Why is in-browser image processing slower than online editors?
Server-side editors run on dedicated CPUs and GPUs with native code paths and parallel workers. Our engine uses the HTML5 Canvas API running single-threaded inside your browser tab, which is typically 2–5× slower than a backend pipeline. The trade-off is total privacy: your image is never uploaded, never logged, never stored on a third-party server. Closing the tab erases everything from memory immediately. For most photos, screenshots, and graphics the wait is small, and for sensitive material — work documents, ID scans, private photos — the privacy gain is well worth the few extra seconds.
Is my image uploaded to a server?
No. Everything runs entirely inside your browser tab using the HTML5 Canvas API and JavaScript. The file is decoded into local memory only, processed in the same tab, and the result is offered as a direct download. Nothing is transmitted to any server, no account is required, no analytics are tied to your file, and closing the tab discards every byte from memory.
How big a file can I process?
Up to 25MB and roughly 64 megapixels by default. The limit exists because every pixel needs to fit inside your tab's memory. Most phone photos, screenshots, and design exports sit comfortably under that ceiling. If your image is larger, resize or compress it first (try our Resize Image or Compress Image tools) before re-running the effect.
Which input image formats work?
JPG, PNG, WebP, GIF, BMP, AVIF, HEIC, and most other formats your browser can decode natively are supported. Output is typically PNG (lossless, preserves transparency) or JPG (smaller file size for photos). Some tools expose a format picker so you can match the file type your downstream app expects.
Does the effect lose quality?
PNG output is lossless — every pixel the canvas wrote out is encoded exactly as drawn. JPG output is recompressed (visually near-lossless above 85% quality). The effect itself works on raw pixels, so there is no double-encoding penalty as long as you keep the default PNG output.
Which browsers are supported?
Recent Chrome, Edge, Firefox, Safari, and other Chromium-based browsers all work. The tool only relies on the standard HTML5 Canvas API, which has been universally supported for over a decade. Mobile browsers work too, although large images may take noticeably longer because phone CPUs are weaker than desktop CPUs.
Is there a watermark or sign-up wall?
No. The tool is completely free, requires no account, attaches no watermark, applies no rate limits, and shows no popup ads on your output. The download is the file you would get from running the same canvas operation locally — nothing more, nothing less.
Can I self-host Data URL Generator for my team?
Data URL Generator is a static page running an open-source engine in your browser, so a typical corporate firewall does not get in the way as long as it allows JavaScript to load from Favtoo. For teams that need to host it themselves on an internal network, the underlying engine (standard browser APIs) is open-source and can be packaged into a private build with the same behaviour. Reach out via the Contact page if that is something you are exploring.
Is Data URL Generator lossless?
Data URL Generator is built to preserve quality wherever the underlying image format allows it. Operations that are mathematically lossless (e.g. structural transformations, lossless re-encoding) round-trip with no perceptible change. Operations that involve a lossy codec inevitably introduce small artefacts at the byte level, but the defaults aim at the sweet spot where output looks or sounds the same to a normal viewer or listener while still being meaningfully smaller or faster than the input.
How do I run Data URL Generator over a folder of files?
Data URL Generator processes one input at a time by design — it keeps memory usage predictable on lower-end devices and makes results easier to verify. To handle a folder, run the tool once per file; the page stays loaded between runs and remembers your last-used settings, so the second run is essentially instant.
What does Data URL Generator do that command-line tools do not?
Desktop apps usually have more advanced features but require installation, maintenance and (often) a licence. Paid online tools are convenient but route your file through their servers and gate downloads behind accounts. Data URL Generator sits in between: free, instant, and private, but intentionally narrow in scope. For one-off jobs and the common image editing and conversion operations, it is usually the lowest-friction choice; for highly specialised work, a dedicated app is still the right answer.
Will Data URL Generator keep working if my Wi-Fi drops mid-task?
Once the page is loaded, Data URL Generator can complete jobs without an active internet connection — the engine is bundled with the page, so there is no per-job network call. The initial page load does require a connection (to fetch the static assets), but after that you can disconnect entirely and the tool will still work. This is a side-effect of the local-first architecture, not a deliberate "offline mode" feature.
Does Data URL Generator work with screen readers?
Data URL Generator uses native HTML controls wherever possible, which means keyboard navigation, focus rings, and screen-reader labels work the way the platform expects. The drop zone accepts files via the keyboard-accessible file picker as well as drag-and-drop, and result downloads use standard browser download flows. If you spot an accessibility gap, Favtoo treats it as a bug worth fixing.
Does Data URL Generator have an API?
Data URL Generator is a browser-only tool by design and does not expose a hosted API. The reason is the same as the privacy story: there is no Favtoo backend doing the work, so there is no service to call. If you need to script the same transformation, the underlying engine (standard browser APIs) is open-source and can be used directly from your own code.