画像をBase64に変換 - 即座に、プライベートに、コピー可能。
JPG、PNG、WebP、GIF、SVGファイルをBase64データURI、 生Base64文字列、埋め込み可能なHTMLのimgタグに変換。 複数ファイルのバッチ変換、ワンクリックでクリップボードに コピー。アップロード不要、サーバー不要、ブラウザで実行。
Drop your images here
or browse files or paste from clipboard
オンラインで画像をBase64に変換する方法。
画像をアップロード
JPG、PNG、WebP、GIF、SVGファイルをアップロードエリアに ドラッグします。バッチ変換用に複数ファイルを選択できます。 モバイルではタップしてフォトライブラリを参照します。 Ctrl+V(MacではCmd+V)でクリップボードからスクリーンショットを 貼り付けることもできます。
形式を選択
各画像に3つの出力タブがあります。データURIはCSSとHTML用の 完全なdata:image/...文字列を提供します。生Base64はAPIペイロード用 のプレフィックスなしのエンコード文字列を提供します。 HTMLタグはwidthとheight属性付きのすぐに貼り付け可能な img要素を提供します。
クリップボードにコピー
任意の出力の下にあるコピーボタンをクリックして、完全な 文字列をクリップボードにコピーします。ボタンは短い 「コピーしました!」確認を表示します。CSSファイル、 HTMLテンプレート、APIリクエストボディ、メールマークアップに 直接貼り付けてください。
Base64画像の用途。
10KB未満のCSS背景画像
小さなアイコン、ローディングスピナー、装飾的なドットを background-image: url(data:image/png;base64,...)でCSSに直接 埋め込みます。2KBのスピナーをBase64にすると2.7KBが スタイルシートに追加されますが、HTTPリクエストが1つ不要に なります。8-12個の小さなアセットを読み込むサイトでは、 インライン化で8-12回のラウンドトリップを節約し、3G接続で ファーストレンダーまでの時間を200-400ms短縮できます。 WebpackとViteはサイズしきい値未満のインポートを自動的に 行います(Viteのデフォルトは4KB)。
メールHTMLテンプレート
Gmail、Outlook、Apple Mailはデフォルトで外部画像をブロック し、ユーザーが「画像を表示」をクリックするまで表示しません。 Base64でインライン化した画像はそのプロンプトなしで即座に レンダリングされます。20KB未満のロゴ、ソーシャルアイコン、 区切りグラフィックはインラインで効果的です。Gmailの クリッピングを避けるためにメールHTMLの合計を102KB未満に 保ちましょう。Mailchimp、SendGrid、Amazon SESはすべて メールHTML APIでBase64インライン画像をサポートしています。
単一ファイルHTMLページ
すべての画像をBase64として埋め込むと、外部依存関係ゼロの 自己完結型HTMLファイルが作成されます。オフラインドキュメント、 ポータブルレポート、JupyterノートブックやGoogleドキュメント からのHTMLエクスポートに便利です。10個のインラインサムネイル 付き500KBのHTMLファイルは、サーバーなしでディスクから 読み込まれます。トレードオフはファイルサイズです - 外部画像と HTTP/2マルチプレキシングを使用した同じページは、ネットワーク 経由ではより速く読み込まれます。
APIペイロードとJSONフィールド
JSONボディフィールドで画像データを受け付けるRESTおよびGraphQL APIは、JSONが生のバイナリを含めないためBase64が必要です。 OpenAIのVision API、AnthropicのMessages API、Twilio MMS、 Stripe本人確認はすべてBase64エンコードされた画像を受け付けます。 ほとんどのAPIが期待するのはデータURIプレフィックスなしの生の Base64形式です。典型的なペイロード制限はエンコード済みで20MB、 これは元の画像データで約15MBに相当します。
Base64と外部ファイル - どちらを使うべきか。
判断はファイルサイズとコンテキストに依存します。Base64は すべての画像に33%のオーバーヘッドを追加します。10KBの アイコンは13.3KBのテキストになります。単一の小さなアセットの 場合、そのオーバーヘッドはHTTPリクエストのコスト(モバイル ネットワークで100-300msのレイテンシを追加)より小さいです。 大きな画像の場合、計算は逆転します - 100KBの写真は133KBの キャッシュ不可能なテキストとしてHTMLやCSSに埋め込まれます。
10KB未満 - Base64を使用
ファビコン、1x1トラッキングピクセル、小さなUIアイコン、 ローディングスピナー、シンプルなロゴ。Base64のオーバーヘッド (10KBファイルで3.3KB)は個別のHTTPリクエストのTCP+TLS ハンドシェイクコストより小さいです。Viteはデフォルトで 4KB未満のインポートをインライン化します。Webpackのurl-loaderは 8KBのしきい値を使用します。パフォーマンスの計算がその スケールではインライン化を有利にするため、両方とも存在します。
10KB超 - 外部ファイルを使用
写真、イラスト、ヒーロー画像、ブラウザキャッシュの恩恵を 受けるすべてのもの。50KBの外部PNGは最初のページ読み込み後に キャッシュされ、以降の訪問ではゼロバイトのコストです。同じ 画像をBase64でインライン化すると、インラインデータは独立して キャッシュできないため、毎回のページ読み込みに66.7KBが追加 されます。提供前に画像をリサイズする必要がある場合は、まずそれを行ってしきい値以下にファイルサイズを抑えましょう。
メールテンプレート - 常にBase64
メールクライアント(Gmail、Outlook、Yahoo Mail、Apple Mail)は デフォルトで外部画像の読み込みをブロックします。ユーザーには 「画像を表示」をクリックするまで壊れた画像アイコンが表示 されます。Base64でインライン化した画像はこれを完全にバイパス し、開封時にレンダリングされます。33%のサイズオーバーヘッドは 価値があります。メールにはキャッシュメカニズムがなく、開封 ごとに完全なHTMLを再ダウンロードするためです。個別の画像は 20KB未満、メール全体のサイズは102KB未満(Gmailのクリッピング しきい値)に保ちましょう。
他のツールとの組み合わせ
最良の結果を得るために、エンコード前に画像を最適化しましょう。Base64に変換する前にファイルサイズを削減するにはJPG圧縮ツールを使用します。先に形式を変換する必要がある場合は、JPGからPNGコンバーターが対応します。複数の画像をエンコード前に一つにまとめるには、JPG Joinerでまず結合してください。
よくある質問。
Base64エンコーディングとは何ですか?
Base64はバイナリデータを64個のASCII文字(A-Z、a-z、0-9、+、/)を使用してテキストに変換するエンコーディング方式です。バイナリデータの3バイトごとに4つのASCII文字に変換します。3KBのアイコンは4KBのテキスト文字列になります。多くのシステム - メール(SMTP)、JSON API、CSSのurl()値、HTML属性 - は生のバイナリではなくテキストのみを受け付けるため、このエンコーディングが存在します。Base64はあらゆるファイルを安全なテキスト表現に変換することでそのギャップを埋めます。
外部ファイルの代わりにBase64画像を使うべきタイミングは?
10KB未満の画像にBase64を使用します - ファビコン、小さなアイコン、シンプルなロゴ、1x1トラッキングピクセル、小さなUI要素。そのサイズでは、HTTPリクエストのオーバーヘッド(DNSルックアップ、TCPハンドシェイク、TLSネゴシエーション)がBase64による33%のサイズ増加よりコストが高くなります。10KBを超える画像には外部ファイルが適しています。ブラウザが独立してキャッシュでき、並行して読み込め、CSSやHTMLの肥大化を避けられるためです。メールHTMLテンプレートは例外で、メールクライアントがデフォルトで外部画像の読み込みをブロックするため、常にBase64でインライン化すべきです。
Base64文字列は元のファイルと比べてどのくらい大きくなりますか?
Base64はファイルサイズを正確に33%(4/3の比率)増加させ、さらに数バイトのパディングが追加されます。9KBのPNGは12KBのBase64文字列になります。30KBのJPGは40KBのテキストになります。Base64文字列がCSSやHTMLファイル内にあり、それがgzip圧縮されて転送される場合、gzipがいくらかの膨張を回復します(通常10-15%)が、ブラウザのDOMでのデコードサイズはフル33%大きいままです。データURIの場合、data:image/png;base64,というプレフィックスにさらに20-30バイト追加されます。
データURIと生のBase64の違いは何ですか?
データURIにはブラウザにデータの解釈方法を伝えるヘッダーが含まれます: data:image/png;base64,iVBORw0KGgo... ヘッダーはMIMEタイプ(image/png)とエンコーディング(base64)を指定します。生のBase64はヘッダーなしのエンコード文字列だけです: iVBORw0KGgo... CSSのbackground-imageのurl()値やHTMLのsrc属性にはデータURIを使用します。MIMEタイプが別途追跡されるAPIにペイロードを送信する場合や、データベースに保存する場合には生のBase64を使用します。
Base64エンコードする画像の最大サイズはどのくらいですか?
CSSへの埋め込みにはBase64画像を10KB(元のファイルサイズ)未満に抑えてください。Google LighthouseはレンダリングをブロックするCSSにフラグを立て、スタイルシート内の100KBのBase64画像は各ページ読み込みに133KBの非圧縮テキストを追加します。インラインHTMLのimgタグの場合、20-30KBが妥当な上限です。メールテンプレートは外部ファイルの代替手段がないためより大きく(画像あたり最大100KB)できますが、Gmailのクリッピングを避けるためにメール全体のサイズを102KB未満に保ちましょう。
すべてのブラウザがBase64データURIに対応していますか?
すべてのモダンブラウザがデータURIに対応しています - Chrome、Firefox、Safari、Edge、そして2012年以降のすべてのモバイルブラウザ。Internet Explorer 8はデータURIあたり32KBの制限付きで部分的なサポートを追加しました。IE 9以降ではその制限が撤廃されました。現在の唯一の実用的な制限は、一部のContent Security Policy(CSP)設定がデフォルトでdata: URIをブロックすることです。サイトが厳格なCSPを使用している場合、インラインBase64画像を許可するためにimg-srcディレクティブにdata:を追加してください。
このツールは安全ですか?画像はアップロードされますか?
画像がデバイスから外に出ることはありません。変換はブラウザのFileReader APIを使用してローカルでファイルを読み取り、Base64文字列を完全にJavaScriptで出力します。ブラウザの開発者ツール(F12)を開き、ネットワークタブに切り替えて画像を変換してみてください - 外向きのリクエストはゼロです。ツールはサーバーバックエンドなしの静的HTMLとJavaScriptで動作します。タブを閉じればすべてのデータがメモリから消去されます。
SVGファイルもBase64エンコードできますか?
はい。ただしSVGは既にテキストベースのXMLなので、SVGのBase64エンコーディングは不要な場合が多いです。Base64なしの生のSVGデータURI(data:image/svg+xml,...)は通常20-30%小さくなります。33%のエンコーディングオーバーヘッドをスキップできるためです。このツールはBase64を必要とするシステムとの互換性のためにBase64バージョンを提供しますが、CSSの背景画像にはパーセントエンコーディング付きのurl()で生のSVGの使用を検討してください。Base64バージョンはどこでも動作しますが、エンコードなしバージョンは一部の古いメールクライアントでは失敗します。