画像をBase64に変換
画像をBase64でエンコードされた文字列に変換します
入力画像
画像を選択またはドラッグ
10 MiB以下の画像ファイル。JPG、PNG、GIF、WebP、SVGなどの画像形式。
ファイル情報
- 名前
- —
- サイズ
- 0 B
- MIMEタイプ
- —
- 画像の寸法
- —
Base64エンコードについて
- 外部ファイルを使わず、HTML、CSS、JSONに画像を直接埋め込み
- メールテンプレート、データURI、APIレスポンスに便利
- Base64エンコードにより、ファイルサイズは約33%増加します
- アイコン、ロゴ、サムネイルなどの小さい画像に最適
Base64の結果
画像をアップロードすると、Base64の結果を確認できます。
0文字
画像をアップロードすると、Base64の結果を確認できます。
使用例
表示用に例を短縮しています。コピーボタンではHTMLまたはCSS全体をコピーできます。
画像をBase64に変換について
無料の画像をBase64に変換は、画像ファイルをBase64エンコードされた文字列に変換し、HTML、CSS、JavaScript、JSONに直接埋め込めるようにします。画像をアップロードするかドラッグ＆ドロップするだけで、コードですぐに使える完全なデータURIを生成します。
Base64エンコードは、64文字の文字集合を使って画像のバイナリデータをテキスト形式に変換します。これにより、テキスト形式の文書内に画像を直接含められ、別の画像ファイルへのリクエストが不要になります。Base64エンコードでデータ量は約33%増えますが、アイコン、ロゴ、サムネイルなどの小さな画像では、HTTPリクエストの削減によってページの読み込み性能が向上するため、有益な選択肢です。
この変換ツールはFileReader APIを使い、ブラウザー内で画像を処理します。画像データがサーバーにアップロードされることはなく、独自のグラフィック、機密のスクリーンショットなど、機密性の高い画像を安全にエンコードできます。サイズが10MB以下の主要な画像形式すべてに対応しています。
主な機能
- JPG、PNG、GIF、WebP、SVGなどの画像形式に対応
- ドラッグ＆ドロップまたはクリックしてアップロードするファイル選択
- サーバーへのアップロードなしで、クライアント側で即座に変換
- Base64出力と並べて画像をライブプレビュー
- MIMEタイプのヘッダーを含む完全なデータURIを出力
- Base64文字列全体をワンクリックでクリップボードにコピー
- Base64文字列をテキストファイルとしてダウンロード
- ファイル情報（名前、サイズ、種類）の表示
- そのまま使えるHTMLとCSSのコード例
- 形式検証付きで最大10MBのファイルに対応
画像をBase64に変換の使い方
- 画像をアップロード: アップロード領域をクリックするか、画像ファイルをドラッグ＆ドロップしてください。10MB以下のJPG、PNG、GIF、WebPなどに対応しています。
- プレビューを確認: アップロードした画像のプレビューとファイル情報（名前、サイズ、種類）が表示されます。
- Base64文字列をコピー: 「コピー」ボタンをクリックして完全なデータURIをクリップボードにコピーすると、コードに貼り付けられます。
- テキストとしてダウンロード: 「ダウンロード」ボタンをクリックし、後で使えるようにBase64文字列をテキストファイルとして保存してください。
- コード例を利用: 出力の下に表示されるHTMLとCSSの使用例を参考にして、エンコードした画像をプロジェクトに組み込んでください。
- クリアして別の画像を変換: ファイル情報カードのXボタンをクリックし、現在の画像を削除して新しい変換を開始してください。
活用例
- HTMLへのアイコン埋め込み: 小さなアイコンやロゴをBase64に変換し、データURI付きのimgタグを使ってHTMLに直接含めることで、追加のHTTPリクエストをなくします。
- CSSの背景画像: 装飾用画像をエンコードしてCSSのbackground-imageの値に直接使用し、外部ファイルへの依存を減らします。
- メールテンプレートのデザイン: HTMLメールのテンプレートに画像を直接埋め込み、メールクライアントが外部画像をブロックしても表示されるようにします。
- APIとJSONのペイロード: ファイルアップロード用のエンドポイントがない場合、JSON APIのレスポンスやリクエストに画像データを含めます。
- 単一ファイルのアプリケーション: すべての画像をBase64で埋め込んだ、自己完結型のHTMLファイルを作成します。ドキュメント、レポート、オフラインツールに適しています。
- 設定ファイル: 小さな画像をエンコードして、設定ファイル、環境変数、コードでインフラを定義するテンプレートに含めます。
- プログレッシブウェブアプリ: 重要な画像をBase64文字列としてサービスワーカーやローカルストレージにキャッシュし、オフラインですぐに表示します。
よくある質問
画像のBase64エンコードとは何ですか？
Base64エンコードは、画像のバイナリデータをASCII文字列に変換します。HTMLのimgタグやCSSの背景プロパティでデータURIとして使ったり、JSONペイロードに含めたりでき、画像をプレーンテキストとして送信・保存できます。
Base64エンコードでファイルサイズは増えますか？
はい。Base64エンコードはバイナリデータの3バイトごとに4文字を使って表すため、データ量が約33%増えます。このため、Base64による埋め込みは主にアイコンやロゴなどの小さな画像に推奨されます。
通常の画像ファイルではなくBase64画像を使うべきなのはどのような場合ですか？
HTTPリクエストの削減が有効な小さな画像（10-20KB未満）、外部画像がブロックされる可能性のあるメールテンプレート、自己完結型のHTML文書が必要な場合にBase64を使用してください。大きな画像では、通常のファイル参照のほうが効率的です。
このツールは無料ですか？
はい、画像をBase64に変換は完全無料です。変換回数の制限や登録はなく、出力に透かしや制限が加わることもありません。
データは安全ですか?
はい。画像はJavaScriptのFileReader APIを使い、ブラウザー内で処理されます。画像データがサーバーにアップロードされたり保存されたりすることはなく、機密画像や独自の画像にも安全に使えます。
最大ファイルサイズはいくつですか？
このツールは10MB以下の画像に対応しています。実用上、Base64エンコードが最も有効なのは20KB未満の画像です。大きな画像は通常のファイルとして配信すると、HTMLやCSSの肥大化を避けられます。
ヒントとベストプラクティス
- 先に画像を最適化: Base64に変換する前に画像を圧縮し、サイズを変更してください。元ファイルが小さいほど、Base64文字列も短く効率的になります。
- 小さな画像だけに使用: Base64は10-20KB未満のアイコン、ロゴ、サムネイルに最適です。大きな画像では外部ファイル参照のほうが性能に優れています。
- データURI全体をコピー: 出力にはdata:image/[format];base64,という接頭辞全体が含まれるため、変更せずにHTMLやCSSに直接貼り付けられます。
- コード例を確認: 提供されるHTMLとCSSの例をテンプレートとして使い、Base64画像をプロジェクトに組み込んでください。
- キャッシュを考慮: HTMLやCSSに埋め込んだBase64画像は文書と一緒にキャッシュされますが、外部画像は個別にキャッシュできます。キャッシュ戦略に最も合う方法を選んでください。
- バックアップをダウンロード: 特に複数のプロジェクトで使う画像では、「ダウンロード」ボタンでBase64テキストファイルをバックアップとして保存してください。