画像 Base64 変換 - ローカルで Data URI を生成

無料のオンライン画像Base64変換ツール。PNG、JPG、SVG、WebP、またはGIF画像を、CSSの背景やHTMLのimgタグ用のData URIにローカルでエンコードします。アップロードは不要です。

クリックでシアターモード

変換結果

画像をアップロードすると、Data URI、CSS、HTMLコードが表示されます。

使い方

  1. PNG、JPG、SVG、WebP、またはGIF画像をアップロードエリアにドラッグするか、クリックしてファイルを選択します。
  2. 画像のプレビュー、MIMEタイプ、元のサイズ、およびData URIの出力サイズを確認します。
  3. 完全なData URI、生のBase64文字列、CSSの background-image、またはHTMLの <img> スニペットをコピーします。
  4. コードをCSS、HTML、メールテンプレート、またはJSON構成に貼り付けます。

例：「SVGサンプルを読み込む」をクリックして、ローカルのSVGアイコンをData URIとして生成し、CSSまたはHTMLスニペットをコピーします。

主な機能

  • 即時の Data URI 生成: 画像をドロップするだけで、data:image/...;base64,... というData URIをブラウザ内で直接生成します。
  • そのまま使えるCSS＆HTML: Data URIのプレフィックスを手書きすることなく、CSSの background-image やHTMLの <img> スニペットをコピーできます。
  • ウェブ画像フォーマットに対応: PNG、JPG、SVG、WebP、GIF、AVIF、およびお使いのブラウザが読み取り可能なその他の画像形式で動作します。
  • 一括処理キュー: 複数のアイコン、電子メール素材、またはUI画像をドロップし、ファイルごとに必要なスニペットをコピーできます。
  • 100%プライベートな処理: 画像はブラウザの FileReader APIを使用してローカルで読み込まれます。アップロードされることはありません。

関連ツール

Base64エンコード・デコード | テキスト・画像・ファイルのローカル処理

テキスト、画像、ファイルをBase64形式に相互変換します。100%ローカル（アップロードなし）で、文字列デコード、Data URL生成、およびファイルダウンロードに対応。
Base64 画像 変換 - ローカルでプレビュー

ブラウザ内でBase64またはData URI画像をデコードし、即座にプレビューして、元のファイル形式、PNG、JPG、またはWebPとしてダウンロードできます。
安全な JSON 整形＆型生成 - ローカルで型を作成

安全なJSON整形ツール。JSONの整形、検証、修復をローカルで行います。美化/圧縮、エラー箇所ハイライト、TypeScriptやZodの自動生成、XMLへの変換にすべてローカルで対応。
JSONPathオンラインテストツール | ローカルでリアルタイム検証

無料のJSONPathテスター・評価ツール：APIのJSONを貼り付けて、合致するノードの抽出、パスの確認、および結果JSONのコピーが簡単に行えます。解析とクエリ実行はすべてブラウザ上でローカルに行われます。
JSON CSV 変換 - ローカルでスプレッドシート用にエクスポート

JSONオブジェクトや配列をブラウザ内でローカルにCSVに変換します。ネストされたフィールドをフラット化し、結果をプレビューして、データをアップロードすることなくコピーまたはCSVとしてダウンロードできます。
CSV JSON 変換 - ローカル・リアルタイム処理

CSVテキストやファイルをブラウザ内でローカルにJSON配列に変換します。ヘッダーの有無、カンマ/セミコロン/Tabの区切り文字、ファイルのドラッグ＆ドロップ、コピー、ダウンロードに対応。アップロードは不要です。
JSON 差分比較ツール (JSON Diff) - ローカルセマンティック比較

ブラウザ内でローカルに2つのJSONドキュメントを比較します。セマンティック（意味的）な差分比較のためにオブジェクトのキーをソートし、順序の違いによるノイズを無視して、追加・削除・変更されたフィールドをマーク。アップロードは不要です。
JSON圧縮・ミニファイツール

JSONを1行に圧縮し、インデントや改行を削除します。元のサイズ、圧縮サイズ、削減されたバイト数および割合を比較できます。

計算ロジック

Base64エンコーディングは、バイナリの画像データをASCII文字列に変換します。これにより、画像をHTML、CSS、またはJSONに直接埋め込むことができます。Data URIは data:[mime-type];base64,[encoded-data] という形式になり、ブラウザはこれを画像リソースとして読み取ることができます。

重要なトレードオフ：Base64は画像の圧縮技術ではありません。エンコードされた出力は通常、元のファイルよりも約33%大きくなるため、小さなアイコン、ロゴ、メール画像、または少数のHTTPリクエストの削減に最適です。大容量の写真や大量のアセットは、通常は通常の画像ファイルのまま維持し、別途圧縮する必要があります。

よくある質問

なぜ画像をBase64に変換するのですか？

小さなアイコン、メール画像、または設定用画像をコードに直接埋め込み、外部リクエストを削減したり、リモートメール画像のブロックを回避したりしたい場合に便利です。

Base64は画像サイズを削減しますか？

いいえ。Base64は通常、エンコードされたサイズを約33%増加させます。これは埋め込みやリクエストの削減には役立ちますが、ストレージの圧縮には役立ちません。

サポートされている画像フォーマットは何ですか？

PNG、JPG、JPEG、SVG、WebP、GIF、AVIF、およびお使いのブラウザが読み取り可能なすべての画像フォーマットです。

画像はアップロードされますか？

いいえ。変換にはブラウザネイティブの FileReader.readAsDataURL APIを使用するため、ファイルはデバイス内にとどまります。

CSSやHTMLを直接コピーできますか？

はい。各画像ごとに、完全なData URI、生のBase64文字列、CSSの background-image、およびHTMLの <img> スニペットが生成されます。