画像

画像を Base64 に変換

PNG、JPG、WebP、GIF、SVG、AVIF、BMP 画像を、ブラウザ内で Base64 に変換できます。出力形式は Data URL、raw Base64、CSS url、HTML img タグ、Markdown 画像構文から選べます。フロントエンドコードへの小さな画像の埋め込み、HTML メール、API payload の確認、ドキュメントへの画像埋め込みに向いています。

  • 主要な画像形式をローカルでエンコードし、元ファイルをアップロードしません
  • 同じ変換結果を Data URL、raw Base64、CSS、HTML、Markdown 形式に切り替えられます
  • そのままコピーできる出力に加え、受け渡しや監査用に TXT ファイルとして保存できます
  • ドラッグ＆ドロップ後に自動変換し、状態、文字数、テキストサイズを確認できます
  • プライバシーに配慮した画像や、オフライン環境でも使いやすい設計です
tools/画像を Base64 に変換
未選択

ここに画像をドロップ、またはクリックしてファイルを選択

画像を選択すると、Base64 出力が自動で生成されます。

data:image から始まるプレフィックス付きの形式です。src 属性や inline CSS にそのまま使えます。

未選択
形式
Data URL
文字数
-
テキストサイズ
-
画像を選択すると、Base64 の結果がここに表示されます。
コマンド

概要

画像を取り込み、出力形式を選び、コピーまたは書き出す。必要な流れだけに絞った Base64 変換ツールです。処理はすべてブラウザ内で完結します。

  1. 01

    幅広い形式に対応

    JPEG、PNG、WebP、GIF、SVG、AVIF、BMP を、追加設定なしで同じ流れで扱えます。

  2. 02

    複数の出力形式

    同じ結果を Data URL、raw Base64、CSS、HTML、Markdown に切り替え、連携先に合わせて使えます。

  3. 03

    状態とサイズを確認

    変換状態、文字数、テキストサイズを確認できるため、インライン化してよいサイズか判断しやすくなります。

  4. 04

    ローカルで実行

    エンコードはブラウザ内で行われます。コピーや書き出しをしない限り、ファイルが端末の外へ出ることはありません。

  5. 05

    コピーと TXT 書き出し

    ワンクリックで結果をコピーできます。成果物として残したい場合は TXT ファイルとして保存できます。

  6. 06

    長い出力も読みやすい

    全画面モードを使えば、長い Data URL もレイアウトに邪魔されず確認できます。

使い方

おすすめの流れは、画像を取り込み、出力形式を選び、内容を確認してからコピーまたは書き出すことです。

  1. 01

    画像をアップロードエリアへドロップするか、クリックしてファイルを選択します。

  2. 02

    結果を使う場所に合わせて出力形式を選びます。

  3. 03

    自動変換が完了するまで待ちます。出力パネルが準備完了になれば完了です。

  4. 04

    本番コードへ埋め込む前に、文字数とテキストサイズを確認します。

  5. 05

    結果をエディタへコピーするか、受け渡しや監査用に TXT としてダウンロードします。

詳細

画像の Base64 エンコード、Data URL 生成、インライン用アセット準備に必要な作業をまとめています。

  • エンコードはブラウザ内で実行され、元画像がサーバーへ送られることはありません
  • Data URL 出力は src 属性や inline CSS にそのまま使えます
  • CSS モードでは background-image に貼れる url(...) 形式を返します
  • HTML モードではすぐ使える img タグを生成します
  • Markdown モードでは README や社内ドキュメント向けの画像構文を生成します
  • 文字数とテキストサイズをリアルタイムで確認でき、インライン化前の判断がしやすくなります
  • コピー機能により、プレフィックスの付け忘れや手作業のミスを減らせます
  • TXT 書き出しは、受け渡し、バックアップ、監査用の記録に使えます
  • 外部サービスを使わず、プライバシーに配慮した画像を扱えます
  • 画像データを JSON フィールドに入れて送る API payload の検証にも便利です
  • 受け取り側の仕様に合わせて、Data URL と raw Base64 をすぐ切り替えられます
  • 長いエンコード文字列を確認しやすい全画面表示に対応しています

活用シーン

小さなインライン画像、メールテンプレート、API payload の検証、自己完結型ドキュメント、オフラインデモに向いています。

  1. 小さなアイコンをインライン化

    小さな画像を Data URL として埋め込み、クリティカルパス上のネットワークリクエストを減らせます。

  2. HTML メールの画像

    外部画像リンクがブロックまたは削除される可能性があるメール向けに、Base64 画像ソースを準備できます。

  3. API payload のテスト

    エンコード済み画像データを JSON フィールドに入れ、バックエンドのデコードや保存処理を検証できます。

  4. Markdown ドキュメント

    README、ナレッジベース、社内ガイドへ画像を直接埋め込み、持ち運びやすいドキュメントにできます。

  5. コンポーネントデモ

    sandbox やオフライン展示用に、画像データを含んだ自己完結型デモを作れます。

  6. プライバシー重視の作業

    機密性のある画像を、外部サービスへ送らずローカルで処理できます。

  7. 一時的なデザイン受け渡し

    一時的なアセットホストがまだない段階でも、エンコード済み画像 payload をフロントエンドへ渡せます。

  8. 一部の重要アセットだけ調整

    ページ全体は通常の静的 URL を使いながら、少数の小さな重要画像だけをインライン化できます。

関連情報

本番用アセットをエンコードする前に、まず 画像圧縮 で不要なバイトを減らしておくと、Base64 テキストの増加を抑えられます。長い Data URL や raw payload を別システムへ貼り付けた後は、 Base64 to 画像 で往復変換を確認し、途中で切れていないか、MIME が間違っていないか、エスケープが壊れていないかを早めに確認できます。

使い方のヒント

Base64 は、狙いを絞った小さなインラインアセットに向いています。大きい画像や何度も使う画像には、たいてい別の配信方法のほうが適しています。

  • まずは小さなアイコン、プレースホルダー、短期的なデモ用アセットに使うのがおすすめです。
  • 大きなコンテンツ画像は、CDN 配信、lazy loading、モダン形式を使うほうが適しています。
  • 長い Data URL をクリティカルパスに置く前に、first paint への影響を測定してください。
  • CSS 背景に使う場合は、各エンコード画像を小さく保ち、レンダリング経路への影響を確認してください。
  • CSS、HTML、Markdown に出力する前に、対象環境が data URI に対応しているか確認してください。
  • API テストでは raw Base64 を使い、MIME type やファイル名は別フィールドで渡すほうが扱いやすいことが多いです。
  • 受け渡し用の成果物は TXT として保存しておくと、バージョン管理や監査がしやすくなります。
  • 何をインライン化してよいか、何を静的 URL で配信するか、チームのルールを決めておくと安全です。

制限事項

Base64 はバイナリをテキストに変換する方式です。エンコードそのものがファイルサイズを小さくするわけではありません。

  • Base64 出力は元のバイト列よりおよそ 3 分の 1 大きくなり、HTML や CSS の payload にそのまま乗ります。
  • 非常に長い Data URL は読みづらく、手作業で保守するには扱いにくい形式です。
  • 古い環境では URL 長や埋め込みリソースの扱いに制限が残っている場合があります。公開前に確認してください。
  • アニメーション GIF や高解像度画像は出力が非常に長くなります。コピーや描画が遅くなることがあります。
  • このツールはエンコード専用です。画像のリサイズや圧縮は行いません。
  • 何度も再利用されるアセットでは、大きなインライン文字列より、CDN キャッシュ付きの静的 URL のほうが多くの場合きれいで速くなります。

よくある質問

出力形式、ローカル処理、対応形式、このツールの使いどころについて、よくある質問をまとめました。

Data URL と raw Base64 は何が違いますか？

Data URL は data:image/png;base64, のような MIME プレフィックス付きで、src や CSS にそのまま使えます。raw Base64 はエンコード本体だけです。プレフィックスは自分で付けるか、受け取り側のシステムが付けます。

なぜエンコード後の文字列は元ファイルより大きいのですか？

Base64 はバイナリデータを表示可能な文字として表すため、必ずオーバーヘッドが増えます。およそ 3 分の 1 増えるのは普通です。

どんなときに画像を Base64 にすると便利ですか？

小さなアイコンのインライン化、HTML メールへの画像埋め込み、API payload のテスト、自己完結型ドキュメントやオフラインデモに向いています。多くのコンテンツ画像の配信方法を置き換えるものではありません。

このツールは画像をサーバーへアップロードしますか？

いいえ。エンコードはブラウザ内で行われ、ファイルが第三者へ送信されることはありません。

CSS や HTML の出力をそのまま使えますか？

はい。CSS モードでは background-image に使える url(...) を返し、HTML モードでは完全な img タグを返します。

どの画像形式に対応していますか？

JPEG、PNG、WebP、GIF、SVG、AVIF、BMP に対応しています。

大きいファイルだとコピーやプレビューが重くなるのはなぜですか？

エンコード後の出力が元ファイルよりかなり長くなるため、コピー、描画、編集時にブラウザ側のメモリと処理時間が増えます。

SEO のためにすべての画像を Base64 でインライン化するのは良いですか？

おすすめしません。少数の重要な小さい画像なら問題ありませんが、ほとんどのコンテンツ画像はキャッシュ可能な静的 URL のままにするほうが適しています。

API の JSON 画像フィールドに使えますか？

使えます。通常は raw Base64 が向いています。MIME type やファイル名は別フィールドで渡すと扱いやすくなります。

Data URL 出力を CSS の background-image に入れられますか？

はい。CSS モードを使うと、background-image にそのまま貼り付けられる url(...) 形式を生成できます。

これは画像圧縮ツールと同じですか？

いいえ。このツールは画像データをテキストにエンコードするだけです。ピクセルを変更したり、元ファイルサイズを小さくしたりはしません。

Base64 より静的 URL のほうがよいのはどんなときですか？

大きい画像や複数ページで再利用されるアセットでは、ブラウザや CDN にキャッシュされる静的 URL のほうが、たいてい扱いやすく高速です。

関連ツール

画像圧縮、形式変換、Base64 から画像へのデコードと組み合わせると、画像処理フローを一通り整えられます。