Base64画像とは？

Base64画像とは、Base64エンコード方式を使用してバイナリ画像データをプレーンテキストとして表現する方法です。外部ファイルを参照する代わりに、画像全体がASCII文字のstringとして直接埋め込まれます。これはデータURI（data:image/png;base64,...）を介してHTMLやCSSで広く使用されており、別途HTTPリクエストを行うことなく画像をインラインで含めることができます。Base64エンコードはデータサイズを約33%増加させますが、追加のファイルホスティングやネットワークのラウンドトリップが不要になります。

ツールの説明

このツールは、カスタマイズ可能なパターンとサイズでランダムな画像を生成し、結果をBase64エンコードされたstringとして出力します。ノイズ、矩形、円、グラデーション、ラインの5種類のビジュアルパターンから選択し、幅と高さを最大2048×2048ピクセルまで調整して、出力フォーマット（PNG、JPEG、またはWebP）を選択できます。画像はCanvas APIを使用してブラウザ上で完全に生成され、サーバーへのアップロードや外部依存関係は一切ありません。

使用例

ランダムノイズを256×256で生成すると、すべてのピクセルにランダムなRGB値が割り当てられたカラフルな静的パターンが作成されます。テレビのノイズに似ていますが、フルカラーで表示されます。

ランダム円を512×512で生成すると、ランダムな背景の上にさまざまなサイズと色の半透明の円が10〜40個描画され、抽象的なバブル状のコンポジションが作成されます。

ランダムグラデーションを800×400で生成すると、ランダムな角度の線形グラデーションに沿って2〜6色のランダムなカラーがブレンドされ、背景に適したなめらかなカラートランジションが生成されます。

機能

  • 5種類の異なるパターンタイプ：ノイズ、矩形、円、グラデーション、ライン
  • 1×1から最大2048×2048ピクセルまでの設定可能なサイズ
  • 3種類の出力フォーマット：PNG、JPEG、WebP
  • ワンクリックでコピーおよびダウンロード可能な即時Base64出力
  • ブラウザ上で完全に動作 — データがデバイスの外に送信されることはありません

オプションの説明

  • 幅 / 高さ：画像のサイズをピクセル単位で設定します（1〜2048）。変更はデバウンス処理されるため、スライダーを調整しても画像がスムーズに再生成されます。
  • パターン：生成するランダムなビジュアルパターンの種類を選択します。各パターンは、ランダム化されたシェイプ、カラー、透明度を使用して独自のアーティスティックなスタイルを生成します。
  • 画像フォーマット：PNG（ロスレス、サイズ大）、JPEG（ロッシー、サイズ小）、またはWebP（モダン、効率的）から選択します。これはダウンロード可能な画像とBase64出力の両方に影響します。

ユースケース

  • 別途ファイルをホスティングすることなく、プレースホルダーや装飾用の画像をHTMLやCSSに直接埋め込む
  • さまざまなビジュアルコンテンツを必要とする開発およびQAワークフロー向けのテスト画像の生成
  • デザインモックアップ用のユニークなプロシージャルアートや抽象的な背景の作成