画像→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 双方向変換をブラウザ内で瞬時に行います。
こんなシーンで使えます
【1. CSS 内への小さなアイコン埋め込み】HTTPリクエスト数を減らしたい時、小さな画像を Base64 化して CSS に埋め込めます。
【2. メール HTML 内画像の埋め込み】HTMLメールで外部画像読み込みがブロックされる対策として、画像をBase64化してメール本文に埋め込めます。
【3. API レスポンスの画像確認】API が画像を Base64 で返してきた時、ブラウザ内で実際の画像として表示確認できます。
他の方法とこのツールの違い
コマンドラインの base64 コマンドや、プログラミング言語のライブラリでも変換可能ですが、ブラウザですぐ確認したい時に手間です。本ツールはブラウザ内で完結し、サーバー送信なしで瞬時に変換できます。会員登録もログインも不要です。
よくある失敗と注意点
1つ目の失敗は、大きな画像を Base64 化することです。Base64 はバイナリデータより約33%サイズが増えるため、大きな画像は CSS / HTML を肥大化させます。一般に 5KB 以下の小さな画像にのみ使うのが推奨です。
2つ目は、ブラウザ互換性です。データURI は古いブラウザ（IE7以前）では動作しません。レガシーブラウザ対応が必要な場合は外部画像を使ってください。
3つ目は、キャッシュの恩恵がないことです。Base64 で埋め込んだ画像は HTML / CSS と一緒にロードされるため、ブラウザキャッシュが効きません。何度も使う画像は外部ファイルとして配置するほうが効率的です。