画像→Base64変換無料・登録不要
画像ファイルをBase64エンコードされた文字列に変換。HTMLやCSSへの画像埋め込みに使えます。
ここに画像をドラッグ&ドロップ
またはクリックしてファイルを選択（最大10MB）
PNG, JPG, WebP, GIF, SVG
良い画像→Base64変換の判断基準
画像をBase64の文字列に変換して、HTMLやCSSに直接埋め込みたいときに使うツールです。Base64化は便利な一方でファイルサイズが増えるため、変換した結果を使う前に下の基準で使いどころを確認します。
対象は小さい画像に限定しているか
Base64に変換すると、元のファイルよりサイズがおおむね3割ほど増えるのが定説です。小さなアイコンやテスト用画像に向いた手法で、大きな写真には不向きです。
埋め込み先で実際に表示されるか確認したか
変換した文字列をHTMLやCSSに貼ったら、必ずブラウザで開いて画像が表示されるかを確認します。文字列の貼り間違いや欠けは、表示してみるまで気づけません。
使い回す画像ではないか
Base64で埋め込んだ画像はHTMLやCSSと一緒に毎回読み込まれ、ブラウザのキャッシュが効きません。複数ページで使い回すロゴなどは、外部ファイルとして置くほうが効率的です。
文字列を欠けなくコピーできているか
Base64文字列は非常に長く、一部だけコピーすると画像が壊れます。先頭の形式部分から末尾まで全文をコピーし、貼り付け後に表示確認します。
コードに埋めてよい画像か確認したか
Base64化した画像は、そのコードを見られる人全員に中身が見えます。機密情報や個人情報を含む画像を、共有されるコードに埋め込んでいないかを確認します。
ありがちな失敗例（NG → 改善）
NGサイズの大きい写真をBase64化してHTMLに貼り、ページの読み込みが極端に重くなる。
改善Base64で埋め込むのは小さなアイコン類に限定し、大きな画像は通常のファイル参照にする。
→ Base64は元よりサイズが増えるうえ、HTMLやCSS本体を肥大化させます。大きい画像ほど不向きになる手法です。
NG長いBase64文字列の一部だけをコピーして貼り付け、画像が表示されない。
改善文字列は先頭から末尾まで全文コピーし、貼り付け後にブラウザで表示確認する。
→ Base64は1文字欠けても画像として成立しません。長い文字列の扱いでは、コピー漏れがいちばん起きやすい失敗です。
NG全ページで使う共通ロゴを、各ページのコードに毎回Base64で埋め込む。
改善使い回す画像は外部ファイルとして1か所に置き、各ページから参照する。
→ Base64埋め込みはキャッシュが効かず、同じデータを毎回読み込むことになります。使い回す画像ほど外部ファイルが有利です。
画像→Base64変換の使い方
- 1変換したい画像ファイルを選択またはドラッグ&ドロップします
- 2画像がBase64文字列に変換されます
- 3変換結果をコピーしてHTMLやCSSに貼り付けます
画像→Base64変換の例文・サンプル
画像→Base64変換の例
元ファイル: icon.png（2 KB）
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...（省略）...AAElFTkSuQmCC
※ HTML/CSS/JSON内に画像を直接埋め込むのに便利
よくある質問
画像→Base64変換は無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
📘 関連ガイド記事
関連ツール
画像→Base64変換について
画像をコードに直接埋め込むためのBase64変換
画像を Base64 形式（データURI）に変換すると、HTML や CSS 内に直接埋め込めるようになります。小さなアイコン・SVG・テスト用画像などをサーバーに置かずにコード内に含めたい場面で重宝します。逆に、Base64 文字列を画像として確認したい場合（メールヘッダの画像確認・APIレスポンスの画像確認）にも、デコード機能が役立ちます。本ツールは画像 ⇔ Base64 の双方向変換をブラウザ内で瞬時に行い、画像をサーバーへ送りません。会員登録もログインも不要です。
3枚の画像を変換して文字数がどれだけ増えたか
変換すると文字列がどれくらいの長さになるのか、大きさの違う3枚の画像を実際に Base64 化して文字数を数えました。以下はいずれもツールが実際に出力した結果です。
【1. 64×64 の小さなPNG】 小さなアイコン（PNG）を変換すると、Base64 文字列は 1,390 文字、元の 1.357 倍になりました。先頭は「data:image/png;base64,iVBORw0KGgoAAAANSU」で始まります。
【2. 透過PNG（512×512）】 透過の入った 512×512 の PNG では、29,022 文字、元の 1.334 倍でした。こちらも先頭は「data:image/png;base64,iVBORw0KGgoAAAANSU」です。
【3. 250 KB の写真JPEG】 250 KB ほどの写真（JPEG）を変換すると、341,983 文字、元の 1.333 倍になりました。先頭は「data:image/jpeg;base64,/9j/2wBDAAIBAQEBA」で、PNG とは始まり方が変わります。
3枚とも、変換後の文字数は元の 1.33〜1.36 倍の範囲に収まりました。
PNGとJPEGで文字列の始まり方が変わる
実際の出力から分かったクセがあります。Base64 文字列の先頭は、元画像の形式によって変わります。PNG を変換したときは2枚とも「data:image/png;base64,iVBORw0KGgoAAAANSU」から始まり、写真の JPEG を変換したときは「data:image/jpeg;base64,/9j/2wBDAAIBAQEBA」から始まりました。この先頭部分（データURIのヘッダ）を見れば、元が PNG か JPEG かが判別できます。
また、変換後の文字数は元のサイズにほぼ比例して増えました。今回の3枚では 1.33〜1.36 倍に収まっており、元画像が大きいほど文字列も長くなります。これは今回試した3枚で観測された範囲で、すべての画像で必ず同じ倍率になるとは限りません。実際に使う画像で一度変換し、貼り付け先に収まる長さかを確かめてください。
写真を変換すると34万文字になる
最大の注意点は、大きな画像を Base64 化すると文字列が非常に長くなることです。250 KB の写真JPEGを変換したときは 341,983 文字、34万文字を超える1本の文字列になりました。これを HTML や CSS にそのまま書き込むと、画像1枚でファイルが大きく膨らみ、コードが読みにくくなります。
Base64 埋め込みが向いているのは、64×64 のアイコンのような小さな画像です。今回試した中でも、小さな PNG は 1,390 文字で済みました。逆に、写真や大きなバナーのような画像は、Base64 に変換せず外部ファイルとして配置するほうが無難です。一般に 5KB 以下の小さな画像にのみ使うのが推奨とされています。
なお、Base64 で埋め込んだ画像は HTML / CSS と一緒に読み込まれるため、ブラウザキャッシュが効きません。何度も使い回す画像は、外部ファイルにしておくほうが効率的です。
Base64を貼り付ける前に確認すること
変換した Base64 文字列を実際に使う前に、次の点を確認しておくと安全です。
1つ目は、貼り付け先に対して文字列が長すぎないかです。前述のとおり写真では34万文字を超えることもあるため、埋め込むのは小さなアイコンにとどめ、大きな画像は外部ファイルにします。
2つ目は、ブラウザの対応です。データURI は古いブラウザ（IE7以前）では動作しません。レガシーブラウザ対応が必要な場合は、Base64 埋め込みではなく外部画像を使ってください。
本ツールが向いているのは、HTTPリクエスト数を減らすために小さなアイコンを CSS に埋め込む場面、外部画像がブロックされやすい HTML メールに画像を含める場面、API が Base64 で返してきた画像をブラウザ内で表示確認する場面などです。コマンドラインの base64 コマンドやプログラミング言語のライブラリでも変換できますが、ブラウザですぐ確認したいときは手間がかかります。本ツールはブラウザ内で完結し、サーバー送信なしで瞬時に変換でき、会員登録もログインも不要です。
---