Image to Data URL Generator
Convert any image or file to a Base64 data URL. Drag and drop, preview, copy CSS / HTML usage snippets. No upload.
このツールを使う理由
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コピー前のクイックチェック
03Confirm the input is the format you intended.
Scan the result before using it in a document, URL, config, or message.
Copy only the output you need.
ユースケース
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形式に変換したり、Base64文字列を元のテキストに復元します。
画像最適化ツール→
JPEG・PNG・WebP画像をブラウザ上で圧縮・リサイズします。
HTMLエスケープ／アンエスケープ→
HTMLエンティティへのエスケープとその逆変換を行います。