画像Base64変換ツール
画像をBase64やData URLに変換し、HTML imgタグ・CSS background用コードも生成できます。Base64から画像への復元確認にも対応しています。
入力
またはクリックして画像を選択・複数選択可
対応形式：PNG / JPG / JPEG / WebP / GIF。SVG、PDF、HEICは非対応です。
Data URL形式、または画像のBase64文字列のみでも復元できます。純粋なBase64の場合はPNG画像として扱います。
出力設定
Web制作ではData URL、HTMLに直接貼る場合はimgタグ、CSSに使う場合はbackground-imageが便利です。
Base64から画像に戻す場合のダウンロード名に使います。通常は自動判定で問題ありません。
プレビュー・変換結果
| 表示 | ファイル名 | 画像サイズ | 元サイズ | Base64文字数 | 増加目安 |
|---|---|---|---|---|---|
| 画像を変換すると、ここに結果一覧が表示されます。 | |||||
使い方のヒント
- 小さなアイコンや装飾画像をHTML/CSSに埋め込む場合は、Base64化が便利です。
- 大きな画像をBase64化すると文字列が非常に長くなり、HTMLやCSSが重くなります。
- Base64は元画像より容量が増える傾向があります。Web表示速度を重視する場合は、画像圧縮やWebP変換も検討してください。
- WordPress記事本文に長いBase64を直接貼ると管理画面が重くなることがあります。必要最小限の利用がおすすめです。
画像Base64変換ツールは、PNG、JPG、WebP、GIFなどの画像ファイルをBase64文字列やData URLに変換できる無料ブラウザツールです。HTMLやCSSに画像を直接埋め込みたいとき、メールテンプレートや小さなアイコン画像をコード化したいとき、開発中に画像ファイルを外部に置かずに確認したいときに便利です。
Base64とは、画像やファイルなどのバイナリデータをテキストとして表現するためのエンコード方式です。通常、画像はPNGやJPGなどのファイルとして扱いますが、Base64に変換すると、文字列としてHTML、CSS、JavaScript、JSONなどに埋め込めます。たとえば、data:image/png;base64,... のようなData URL形式にすると、画像ファイルを別途読み込まずに、HTMLのimgタグやCSSのbackground-imageで表示できます。
このツールでは、画像をドラッグ＆ドロップするだけでBase64へ変換できます。出力形式は、Data URL、純粋なBase64文字列、HTMLのimgタグ、CSSのbackground-image用コードから選べます。Web制作やWordPressカスタマイズでそのまま使いやすい形に変換できるため、初心者でも迷わず利用できます。また、Base64から画像へ戻す復元確認にも対応しているため、受け取ったBase64文字列が正しく画像として表示できるか確認したいときにも役立ちます。
WordPressやSWELLでサイトを運営している場合、小さな装飾アイコンや軽量な画像をコード内に埋め込みたい場面があります。たとえば、カスタムHTMLブロック内で小さなSVG風の画像やPNGアイコンを使いたい場合、画像ファイルを別途アップロードせず、Base64化したData URLを使うことで、1つのHTML内に画像を含められます。ただし、すべての画像をBase64化すればよいわけではありません。大きな画像をBase64にすると文字列が非常に長くなり、HTMLやCSSが重くなります。
Base64化した画像は、元の画像ファイルよりデータ量が増える傾向があります。そのため、ロゴ、アイコン、ボタン画像、小さな装飾画像など、比較的小さい画像に使うのが向いています。写真や大きなアイキャッチ画像、商品画像、OGP画像などは、通常の画像ファイルとして管理し、必要に応じて画像圧縮やWebP変換を行う方が適している場合が多いです。
開発用途では、Base64変換はテストや検証にも便利です。APIのレスポンスに画像データを含めたい場合、JSON内に画像を埋め込みたい場合、メールHTMLに小さな画像を入れたい場合などに使われます。また、外部ファイルへの参照を避けたい一時的なデモページやプロトタイプでも活用できます。CSSのbackground-imageにData URLを使えば、小さな背景画像をCSSだけで完結させることもできます。
この画像Base64変換ツールは、画像ファイルや入力したBase64文字列を外部サーバーに送信せず、ブラウザ内で処理します。公開前の画像、業務用素材、個人情報を含む可能性のあるスクリーンショットなどを扱う場合でも、できるだけ安心して利用しやすい設計です。ただし、Base64文字列を第三者に共有する場合は、その文字列自体に画像データが含まれている点に注意してください。Base64は暗号化ではなく、誰でも画像として復元できる形式です。
使い方は簡単です。画像をBase64に変換したい場合は、「画像 → Base64」を選び、画像をドラッグ＆ドロップして実行します。変換結果をコピーしたり、TXTファイルとして保存したりできます。Base64から画像に戻したい場合は、「Base64 → 画像」を選び、Data URLまたはBase64文字列を貼り付けて実行します。復元できた画像はプレビュー表示され、画像ファイルとしてダウンロードできます。
ブログ運営、Web制作、HTMLメール制作、CSSカスタマイズ、開発テストなど、画像をテキスト化して扱いたい場面で活用できるツールです。必要に応じて、画像圧縮ツールやWebP変換ツールと組み合わせると、より軽量で扱いやすい画像データを作成できます。
使い方
- 画像をBase64に変換する場合は「画像 → Base64」を選びます。
- 画像ファイルをドラッグ＆ドロップ、またはクリックして選択します。
- 出力形式をData URL、Base64のみ、HTML imgタグ、CSS background-imageから選びます。
- 「実行」を押すと変換結果が表示されます。
- 結果をコピー、またはTXTファイルとして保存できます。
- Base64から画像へ戻す場合は「Base64 → 画像」を選び、文字列を貼り付けて実行します。
活用シーン
- 小さなアイコン画像をHTMLに直接埋め込みたいとき
- CSSのbackground-imageにData URLを使いたいとき
- WordPressのカスタムHTMLブロック内で画像を完結させたいとき
- HTMLメールやテンプレート内で小さな画像を扱いたいとき
- APIやJSONで画像データをテキストとして扱いたいとき
- Base64文字列が正しく画像に戻せるか確認したいとき
FAQ
Q. Base64とは何ですか？
Base64は、画像などのバイナリデータをテキストとして表現する方式です。画像をBase64化すると、HTMLやCSSに文字列として埋め込めます。
Q. 画像はサーバーにアップロードされますか？
いいえ。画像はお使いのブラウザ内でBase64に変換されます。外部サーバーには送信されません。
Q. Data URLとは何ですか？
Data URLは、画像の種類とBase64データをまとめた形式です。data:image/png;base64,... のような形で、HTMLやCSSにそのまま使えます。
Q. Base64にすると画像容量は小さくなりますか？
基本的には小さくなりません。Base64化すると、元画像よりデータ量が増える傾向があります。容量を減らしたい場合は、画像圧縮やWebP変換がおすすめです。
Q. 大きな画像もBase64にできますか？
可能ですが、大きな画像をBase64化すると文字列が非常に長くなり、HTMLやCSSが重くなります。このツールでは実用性を考え、目安として8MB以下の画像を推奨しています。
Q. Base64は暗号化ですか？
いいえ。Base64は暗号化ではありません。文字列から元画像を復元できます。機密画像を共有する場合は注意してください。
Q. WordPressやSWELLでも使えますか？
はい。カスタムHTMLブロックやCSSカスタマイズで小さな画像を使う場合に活用できます。ただし、長すぎるBase64文字列を記事本文に貼ると編集画面が重くなることがあります。
Q. Base64から画像に戻せますか？
はい。このツールではData URLまたはBase64文字列を入力して、画像として復元・プレビュー・ダウンロードできます。