画像 Base64 変換

画像とBase64エンコードの相互変換、ドラッグアップロードとリアルタイムプレビュー対応

画像アップロード

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

JPG、PNG、GIF、WebP、SVGなどのフォーマットに対応

Base64画像エンコードとは?

Base64は、64個の印刷可能文字を使用してバイナリデータを表すエンコード方式です。画像Base64エンコードは、画像のバイナリデータをASCII文字列に変換し、HTML、CSS、JSONなどのテキストフォーマットに直接埋め込めるようにします。

Data URLフォーマット:data:image/[フォーマット];base64,[エンコードデータ]

使用方法

画像 → Base64

  1. 画像をアップロードエリアにドラッグ、またはファイル選択ボタンをクリック
  2. 出力フォーマットを選択:Data URLプレフィックス付きまたは純粋なBase64
  3. 「Base64をコピー」ボタンで結果をコピー
  4. コピーした内容を必要な場所に貼り付け

Base64 → 画像

  1. Base64文字列を入力ボックスに貼り付け
  2. 「画像に変換」ボタンをクリック
  3. 変換結果をプレビュー、画像をダウンロード保存可能

使用例

HTMLでの使用

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="image description">

CSSでの使用

.background {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...');
}

JSON APIでの送信

{
    "image": "iVBORw0KGgoAAAANSUhEUgAAAAUA...",
    "format": "png"
}

よくある質問 (FAQ)

Q: 画像をBase64に変換する理由は?

A: Base64エンコードはHTTPリクエスト数を削減でき、小アイコン、背景画像などに適しています。画像をコードに直接埋め込めるため、追加のファイルリクエストが不要です。

Q: Base64エンコード後、画像は大きくなりますか?

A: はい、Base64エンコードはデータを約33%増加させます。小さな画像(通常10KB未満)のみBase64エンコードを使用することをお勧めします。

Q: 大きな画像にBase64は適していますか?

A: 非推奨です。大きな画像をエンコードすると文字列が非常に長くなり、HTML/CSSファイルサイズが増加し、読み込みパフォーマンスに影響します。画像CDNやレイジーロード技術の使用をお勧めします。

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

A: いいえ。すべての変換はブラウザでローカル完了し、画像データはサーバーにアップロードされず、プライバシーを保護します。