画像をBase64に変換

画像をここにドラッグ、またはクリックして選択

PNG、JPG、GIF、WebP に対応

PNG/JPG/WebP/GIF/SVG/BMP/AVIF などに対応した無料オンライン画像Base64エンコードツールです。ブラウザーの Web Worker でローカル処理し、アップロード不要でUIをブロックしません。CSS インライン、HTML 埋め込み、メールテンプレート、API 送信用の Data URL を生成できます。

関連おすすめ

Base64を画像に変換

Base64→テキスト変換

Base64 DataURL 変換

JSON 圧縮

JavaScript フォーマッター

URL解析

画像をBase64に変換とは？

画像をBase64に変換とは、バイナリ画像データを ASCII テキスト文字列へエンコードする技術です。Base64 は 64 個の印字可能文字（A-Z、a-z、0-9、+、/）でバイナリデータを表し、3バイトごとに4つの Base64 文字へ変換し、末尾に = のパディングを付けます。処理全体は RFC 4648 標準に準拠しています。

**エンコード原理**：Base64 は3バイト（24ビット）を4つの6ビットグループに分割し、それぞれを Base64 アルファベットの1文字に対応させます。バイト数が3の倍数でない場合、末尾に1〜2個の = パディング文字を追加します。これによりファイルサイズは約33%（4/3 ≈ 1.33）増えます。

**Web Worker 最適化**：このツールは Web Worker を使い、メインスレッドから独立したブラウザースレッドでエンコードを実行します。ArrayBuffer.transfer() により Worker へゼロコピー転送でき、メインスレッドのブロックを避けます。数MBの画像でもUIは滑らかに応答し、進捗をリアルタイム表示します。

**プライバシーと安全性**：画像をサーバーへアップロードするツールとは違い、このツールは完全にブラウザー内で動作します。画像データは第三者サーバーを通らないため、身分証や契約書などの機密画像を扱う場合に特に重要です。

**利用シーン**：Base64 画像は CSS Sprites（HTTPリクエスト削減）、HTMLメールテンプレート（メールクライアントの画像ブロック回避）、APIでのバイナリデータ送信、外部リソースを参照できないブラウザー拡張機能や単一ファイルアプリでよく使われます。

ユースケース

  • CSS Sprites：小さなアイコンや画像を CSS background にインライン化し、HTTP リクエストを削減して初回描画を高速化
  • HTML 画像埋め込み：ロゴ、プレースホルダー、UIリソースを HTML img タグに直接埋め込み、画像リクエストを削減
  • メールテンプレート：メールクライアントは外部画像を既定でブロックすることがあるため、Base64 インラインで許可なしに即時表示しやすくします
  • API 送信：画像バイナリを Base64 文字列に変換し、JSON リクエストボディに埋め込んで API に送信
  • フロントエンド性能最適化：ファーストビューの重要リソースをインライン化し、HTTP リクエスト数を削減
  • ブラウザー拡張機能や単一ファイルアプリ：外部リソースを参照できない場面で、すべての画像を Base64 で埋め込み

使い方

  1. エンコードしたい画像ファイルを選択またはドラッグ＆ドロップします（PNG/JPG/WebP/GIF など）
  2. ツールがブラウザーの Web Worker 内で画像を自動的に Base64 に変換し、進捗をリアルタイム表示します
  3. 結果を確認します：純粋な Base64 文字列、完全な Data URL、HTML img タグから必要な形式をコピーします
  4. 結果を CSS、HTML、JSON 設定ファイル、API リクエストなどに貼り付けます

特徴

  • 幅広い形式に対応：PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF など一般的な画像形式の MIME を自動判別
  • Web Worker 高速化：大きなファイルのエンコードを別スレッドで実行し、進捗バーをリアルタイム表示。メインUIスレッドをブロックしません
  • ブラウザー内ローカル処理・アップロード不要：画像は ArrayBuffer のゼロコピーで Worker に渡され、データはサーバーを経由しません
  • Data URL 自動生成：data:image/xxx;base64, プレフィックスを自動作成し、HTML img や CSS background にそのまま貼り付け可能
  • 双方向変換：画像から Base64、Base64 から画像の両モードに対応し、互いに干渉しません
  • ワンクリックコピーとダウンロード：純粋な Base64、完全な Data URL、HTML img タグをコピー、または .txt ファイルとして保存可能

よくある質問

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

PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF など一般的な形式に対応しています。ツールが MIME タイプを自動判別し、data:image/png;base64,... のような対応する Data URL プレフィックスを生成します。

Web Worker 高速化はどのように動作しますか？

Web Worker はメインUIスレッドとは独立したブラウザーのバックグラウンドスレッドです。従来の画像エンコードはページを固めることがありますが、このツールは ArrayBuffer 転送と進捗コールバックを使って Worker 側で処理するため、大きなファイルでもUIが応答し続けます。

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

いいえ。変換は ArrayBuffer ゼロコピー技術により、ブラウザーの Worker スレッド内で直接完了します。画像データはサーバーを一切経由しません。「ブラウザー処理」と言いながら実際にはアップロードするツールとは根本的に異なります。

Base64 エンコード後、ファイルサイズはどれくらい増えますか？

Base64 エンコード後のサイズは元のバイナリの約 133%、つまり約 33% 増加します。3バイト（24ビット）ごとに4つの Base64 文字（各6ビット）へ変換し、必要に応じて末尾に = を付けます。インライン化する画像は1枚あたり10KB未満を推奨します。

どのような画像が Base64 インラインに適していますか？

10KB未満の小さなアイコンや画像に適しています。小さな画像のインライン化はHTTPリクエストを減らせますが、大きな画像はHTML/CSSサイズを増やし読み込み性能を悪化させます。大きな画像は独立したURL参照がおすすめです。

Data URL と純粋な Base64 の違いは何ですか？

Data URL は data:image/png;base64, の後に Base64 内容が続く形式で、HTML img の src 属性に直接指定できます。純粋な Base64 はエンコード済み文字列だけなので、利用には MIME プレフィックスが必要です。

API 連携テストに使えますか？

はい。画像を Base64 に変換した後、JSON リクエストボディのフィールド値としてバックエンドAPIへ送信できます。ワンクリックコピーに対応し、多くのAPIドキュメント例の形式と互換性があります。

通常の画像参照ではなく Base64 インラインを選ぶ理由は？

Base64 インラインは小さなファイル（<10KB）でHTTPリクエストを減らすのに適しています。大きな画像では、ブラウザーが並列ダウンロードやキャッシュを活用できるため、独立URLのほうが高速に読み込めます。