為什麼用這個工具
05Free in-browser image / file to data URL generator. Drop a file (image or any binary), and the tool produces the full <code>data:[mime];base64,...</code> URL ready to paste into CSS, HTML, JSON config, or anywhere a URL is expected. Image MIME types are previewed inline. All processing uses the browser's built-in FileReader — nothing is uploaded.
Drag and drop a file (image, JSON config, font, anything) and the tool reads it via the browser's FileReader, returning a complete data:<mime>;base64,<encoded> URL. Copy the result and paste it where a URL is expected: CSS background-image, HTML img src, JSON config, an email signature, or anywhere else.
For images, a live preview confirms the encoding worked, and the tool emits CSS and HTML usage snippets ready to copy. Other MIME types (fonts, generic binary, JSON, plain text) work too — you just won't get an inline preview.
Use this when you want to inline a tiny asset to eliminate a separate HTTP request. Practical rule of thumb: data URLs make sense for assets under ~4 KB. Above that, the bloat of inlining (HTML/CSS gets bigger; data URL contents can't be cached separately from the page) outweighs the saved request.
Everything happens locally in your browser: no upload, no server, no logging. Pair with our Base64 Encoder / Decoder when you need the raw Base64 of plain text input (no MIME wrapping), or Image Optimizer to compress the image first so the resulting data URL is smaller.
怎麼使用
03複製前快速檢查
03先確認輸入格式符合您的預期。
在把結果用於文件、連結、設定或訊息前快速掃一眼。
只複製您真正需要的輸出。
使用場景
Generate a data URL for a small SVG or PNG icon (~1-2 KB) and use it as a CSS background-image. Removes one HTTP request, which can matter for above-the-fold rendering.
Email clients often block external images. Inlining a small profile photo or logo as a data URL ensures recipients see it regardless of the client's external-image policy.
When you need a self-contained HTML page (offline doc, single-file demo, screenshot of a UI), inlining the assets as data URLs is the cleanest way to keep everything in one file.
When prototyping in CodePen, JSFiddle, or a single-file demo, data URLs avoid the need to host the asset somewhere. Paste the URL inline and the asset is part of the page.
Want to see the raw Base64 of an unknown binary file (maybe to inspect headers or hash it)? Drop it in and the data URL gives you the encoded bytes you can feed to other tools.
使用技巧
- 01Data URL size is roughly 33% larger than the file
Base64 encoding adds ~33% overhead. So a 3 KB image becomes ~4 KB data URL. Plus a small MIME header. Always check the resulting URL length against the original file size to decide if inlining is worth it.
- 02Cache-busting cuts both ways
Inlined assets are part of the parent file, so they don't have their own cache entry. If multiple pages share an asset, separate hosting (with proper cache headers) is more efficient. If only one page uses the asset, inlining wins.
- 03SVG can be smaller than its data URL — try inline SVG instead
For SVG specifically, pasting the SVG markup directly in HTML (<code><svg>...</svg></code>) is usually smaller than the equivalent data URL (no Base64 overhead, no MIME header). Use data URL for SVG only when you specifically need a URL (e.g., CSS background).
- 04Some MIME types matter for browser behavior
Browsers use the MIME prefix to decide how to render the data URL. <code>image/svg+xml</code> as a CSS background renders as an image; <code>text/html</code> in an iframe renders as a page. Verify the MIME guess matches your intent — the browser uses the file extension as a hint but isn't always right.
常見問題
07
Does my file get uploaded?
No. The browser's FileReader API reads files from your device into memory and runs the Base64 encoding in JavaScript. No network call is made — your file content stays on your device. Safe for sensitive images, internal documents, or proprietary assets.
What file types are supported?
Any file. Images (PNG, JPEG, SVG, WebP, GIF, AVIF) get an inline preview plus CSS/HTML usage snippets. Other types (fonts, PDFs, JSON, plain text, binary) work too — you'll see the data URL but no preview. The MIME type comes from the file's reported type.
How big can the file be?
Technically unlimited — browsers handle hundreds-of-megabyte files via FileReader. Practically, data URLs above a few MB make the resulting HTML/CSS unwieldy and slow to render. For larger assets, hosting them as separate files is almost always the right call.
What's the difference between this and the Base64 Encoder?
Base64 Encoder takes plain TEXT input and produces Base64 output (or vice versa). Data URL Generator takes a FILE and produces a complete <code>data:mime;base64,...</code> URL ready to paste. Different use cases: Base64 Encoder for tokens / credentials / JSON-embedded binary; Data URL Generator for inline images and other asset URLs.
Why is my data URL not rendering as an image?
Most common cause: MIME type mismatch. Check that the file's reported MIME (shown above) actually matches the binary content. Saving a JPEG with a .png extension fools the OS but the actual bytes are still JPEG; browsers may render it correctly anyway, or refuse. Re-save the file with the correct extension to fix the MIME tag.
Can I generate a data URL from a remote URL?
Not directly in this tool — you'd need to first download the remote file (via browser save, curl, or a download tool) and then drop the local copy into the dropzone. CORS rules prevent in-browser fetching of arbitrary remote URLs from a public site.
Should I use data URLs everywhere?
No. The rule of thumb is: data URLs work great for tiny assets (under ~4 KB) where saving an HTTP request outweighs the inlining cost. For larger assets, separate hosting with proper caching is more efficient. For very small assets that appear on every page, definitely inline; for one-off page-specific images, also inline; for shared larger assets, host separately.
相關工具
03Base64 編解碼→
在純文字與 Base64 之間雙向轉換。
圖片壓縮與格式轉換→
在瀏覽器裡壓縮 JPEG/PNG/WebP 圖片並調整尺寸，全程不上傳。
HTML 跳脫字元→
將文字轉換為 HTML 實體，或將實體還原為文字。