エンコード
Data URI / Base64 画像
画像を Data URI(data:image/…;base64,…)にエンコードして CSS/HTML に埋め込み、また Data URI や生の Base64 をファイルにデコード — すべてブラウザ内で完結。
ここに画像のプレビューが表示されます。
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
よくある質問
Data URI はどんな場面で使いますか?
小さなアイコンやスプライトなどをCSSやHTMLに直接埋め込み、追加のHTTPリクエストを減らしたいときに便利です。ただしファイルとしてはキャッシュされないため、更新頻度の高い画像や大きな画像には向きません。
Data URI にはサイズ制限がありますか?
URI自体に明確な上限があるわけではありませんが、ブラウザやメールクライアントによっては実用上の制限があり、大きな画像を埋め込むとHTML/CSSファイル自体が肥大化しページの読み込みが遅くなります。数KB程度の小さな画像向けと考えてください。
選択した画像はサーバーにアップロードされますか?
いいえ、エンコード・デコードともにブラウザ内の処理だけで完結しており、画像ファイルがサーバーに送信されることはありません。
SVGをBase64を使わずにData URIにできますか?
できます。SVGはテキスト(XML)なので、Base64の代わりに特殊文字をpercent-encodingするだけで十分です: data:image/svg+xml,%3Csvg...%3E。この方法はより小さくなり、CSSファイル内でそのまま編集可能な状態を保てます。
Data URIをhref属性やbackground-imageに埋め込めますか?
はい、Data URIはリソースへの参照が想定される場所——src、href、CSSのbackground-image、さらには@import——どこでも機能します。構文やサイズの制約はimgタグの場合と同じです。