🖼️ 画像 to Base64

画像 to Base64 変換ツールについて

このツールは画像を Base64 エンコード文字列に変換し、HTML、CSS、JSON に直接埋め込めるようにします。画像ファイルを選択すると、FileReader API でローカルに読み込み、Base64 出力を表示します。アップロードは一切なく、すべてのエンコードはブラウザ内で行われます。

データ URI を使う場面

• 小さな画像のインライン埋め込み —— アイコン、スプライト、サムネイルを HTML や CSS に直接埋め込み、余分な HTTP リクエストを削減。
• メール署名やテンプレート —— 一部のメールクライアントはデータ URI としてエンコードした画像の方が確実に表示されます。
• 単一ファイルの成果物 —— デモ、プロトタイプ、オフラインドキュメント用にすべてを1つの HTML ファイルにまとめる。
• JSON ペイロード —— バイナリアップロードが不便な JSON API 内で画像データを送信。

Base64 画像のメリットとデメリット

メリット：HTTP リクエストの削減、自己完結型ファイル、アセット管理が不要、小さな画像に適している。

デメリット：Base64 エンコードでファイルサイズが約33%増加、HTML/CSS ファイルが大きくなると解析に時間がかかる、大きな画像はパフォーマンスに悪影響。データ URI は主に小さなアセットに使用してください。

よくある質問

データ URI と Raw Base64 の違いは何ですか？ データ URI は data:image/...;base64, プレフィックスを含み、src 属性や CSS url() に直接使用できます。Raw Base64 はプレフィックスなしのエンコード文字列のみです。

「CSS としてコピー」とは何ですか？ background-image: url('data:image/...;base64,...'); としてコピーするので、そのままスタイルシートに貼り付けられます。

画像はサーバーにアップロードされますか？ いいえ。変換はすべて FileReader API でブラウザ内で行われ、画像がデバイスから外に出ることはありません。

ファイルサイズ制限はありますか？ 唯一の制限はブラウザの使用可能メモリです。最適なパフォーマンスのために、画像は数メガバイト以下に保ってください。