タイムゾーン変換
任意の画像ファイルをBase64エンコードされたデータURI文字列に変換します。
このツールについて
ドラッグ＆ドロップまたはファイルピッカーで画像をアップロードすると、Base64エンコードされたデータURIが即座に得られます。データプレフィックスを含めるかどうかを選択できます。HTMLとCSSのスニペットが自動的に生成されるため、画像をインラインで埋め込むことができます。
使い方
- 1 ステップ1：画像をアップロードエリアにドラッグ＆ドロップするか、クリックしてファイルを参照してください。
- 2 ステップ2：画像のプレビューとBase64出力が自動的に表示されます。
- 3 ステップ3：「データURIプレフィックスを含める」を切り替えて、出力がdata:image/...;base64,で始まるかどうかを制御してください。
- 4 ステップ4：「コピー」をクリックして文字列をコピーするか、下の既製のHTML/CSSスニペットを使用してください。
What Base64 encoding is and why images use it
Base64 is a way of writing binary data — like the bytes of a PNG or JPEG — using only 64 plain text characters (A–Z, a–z, 0–9, plus + and /). It exists because many systems were designed to carry text, not raw bytes: HTML, CSS, JSON, and email all expect printable characters. Base64 turns an image into a long string you can paste straight into those text-based formats. This tool reads your file with the browser's FileReader and produces a data URI — a string that begins with data:image/png;base64, followed by the encoded bytes — so the image effectively becomes part of your code.
Everything happens locally. The file is read in your browser and never uploaded, which makes it safe for screenshots, logos, or any image you'd rather not send to a server.
How the encoding works, with the math
Base64 takes the input three bytes at a time — that's 24 bits — and splits those 24 bits into four groups of 6 bits. Each 6-bit group (a value from 0 to 63) maps to one character in the Base64 alphabet. So every 3 bytes of image become 4 characters of text. When the file length isn't a multiple of three, the encoder pads the end with one or two = signs to signal how many bytes were real.
That 3-to-4 ratio is the key fact: Base64 output is about 33% larger than the original file. A 30 KB image becomes roughly 40 KB of text. The tool shows you the exact character count so you can see the size before you commit to embedding it.
A worked example
Drop in a small icon — say a 24×24 PNG that's 1,200 bytes on disk. The encoder processes 1,200 ÷ 3 = 400 groups, producing 400 × 4 = 1,600 Base64 characters, plus the data:image/png;base64, prefix. The tool then hands you three ready-to-paste outputs:
- The raw Base64 / data URI (toggle the prefix on or off).
- An HTML snippet:
<img src="data:image/png;base64,iVBORw0K..."> - A CSS snippet:
background-image: url('data:image/png;base64,iVBORw0K...');
It also reads the file's name, MIME type, on-disk size, and the image's pixel dimensions, so you can confirm you embedded the right asset.
When embedding an image is the right call
- Tiny, frequently used icons. Inlining a small icon removes one HTTP request, which can make a page feel faster on first load.
- Self-contained emails and documents. An HTML email or a single-file report displays its images even offline because they travel inside the file.
- CSS sprites and backgrounds for small decorative graphics that you don't want as separate downloads.
- Quick prototypes and demos where you want one file with no external dependencies.
When NOT to embed — the trade-offs
- Large images. The 33% size penalty plus the loss of caching make big embedded images a net loss. A normal
<img src="photo.jpg">can be cached by the browser and reused across pages; a data URI is re-parsed every time and bloats the HTML or CSS file it lives in. - Anything that changes. Inlined images can't be swapped without editing and redeploying the code that contains them.
- Gzip won't fully save you. Base64 text compresses somewhat, but already-compressed formats (JPEG, PNG) gain little, so the encoded version usually stays larger than the original binary.
A good rule of thumb: embed images under a few kilobytes; link to anything larger.
Tips and common mistakes
- Keep the prefix for browsers. The
data:…;base64,prefix tells the browser what kind of data follows. Strip it (with the toggle) only when a system expects pure Base64 — for example, a JSON field that stores just the encoded bytes. - SVGs don't need Base64. Because SVG is already text, you can often inline it directly or use
url("data:image/svg+xml,...")with URL-encoding, which is smaller than Base64. - Watch line wrapping. Some editors hard-wrap long lines; a data URI must stay on one unbroken line (or use proper continuation) or the image silently fails to load.
- MIME type must match. The prefix here is set from the file's real type. Hand-editing
image/pngonto JPEG bytes will break decoding in strict browsers. - It's encoding, not encryption. Base64 is fully reversible and offers no security. Anyone can decode it back to the original image.