画像をBase64に変換するツール

ブラウザ上で画像をBase64文字列やdata URIに変換したり、Base64を表示可能な画像にデコードしたりできます。

またはここにドロップしてください PNG、JPEG、GIF、WebP、SVGなどに対応しています。ファイルはアップロードされません。

使い方

Base64はバイナリ画像データをプレーンテキストに変換するため、別ファイルとしてリンクする代わりにHTML、CSS、JSONに直接埋め込むことができます。データURIには形式を識別する短いプレフィックスが付加されており、ブラウザが別のリクエストなしに描画できるようになります。

画像をドロップまたは選択
PNG、JPEG、GIF、WebP、SVGなど、ブラウザで表示できるほとんどの形式に対応しています。
データURIまたは生のBase64を選択
データURIはimgのsrcやCSSのbackground-imageとして直接使用します。独自のコードでプレフィックスを追加する場合は生のBase64を使用してください。
コピー、またはデコードに切り替え
もう一つのタブにBase64文字列またはデータURIを貼り付けると、プレビューして画像としてダウンロードできます。

Base64画像の利用場面

インラインBase64画像は、アイコンやロゴなどの小さな画像ごとに必要なHTTPリクエストをなくせるため、特定の状況で役立ちます。一方、Base64エンコードはデータ量を約33%増やし、埋め込んだHTML、CSS、JSONファイルのサイズを大きくします。また、ブラウザの通常の画像キャッシュを使わず、リンクされたファイルより更新も難しくなります。ほとんどのサイトでは、インラインで使う約2 KB以下の小さな画像に限って使用してください。

データがデバイスの外に出ることはありません

画像はブラウザのFile APIを使用して読み込まれ、JavaScriptのみでエンコードされます。ファイルデータは一切サーバーに送信されないため、スクリーンショット、デザイン素材、またはアップロードしたくないその他の画像でも安全に処理できます。

よくある質問

HTMLやCSSに埋め込むため、画像をBase64データURIに変換するにはどうすればよいですか？

アップロード領域に画像をドラッグ&ドロップするか、「画像を選択」をクリックしてファイルを選んでください。ツールがローカルで画像を読み取り、Base64にエンコードして、選択した出力形式に応じて完全なデータURI (data:image/png;base64,...) または生のBase64を表示します。データURIはimgタグのsrc属性やCSSのbackground-imageプロパティで直接使用してください。

Base64変換中に画像はサーバーにアップロードされますか?

いいえ。画像はブラウザのFile APIを使用して読み込まれ、デバイスのJavaScript上で完全にエンコードされます。ファイルデータは一切サーバーに送信されません。そのため、プライバシーを気にすることなく、スクリーンショット、デザイン素材、アイコン、その他の画像ファイルの変換にこのツールをご利用いただけます。

Base64エンコードされた画像と外部画像ファイルは、どのように使い分ければよいですか?

アイコン、ロゴ、データURIプレースホルダーなどの小さな画像をBase64でインライン化すると、HTTPリクエストが削減され、特定のシナリオでページの読み込み時間を短縮できます。ただし、Base64エンコードは画像サイズを約33%増加させ、HTMLやCSSファイルのサイズも大きくなり、ブラウザの画像キャッシュが機能せず、更新も困難になります。一般的には、インラインで使用する2 KB以下の非常に小さな画像にのみBase64を使用することが推奨されています。

Base64文字列を表示可能な画像にデコードするにはどうすればよいですか?

「Base64から画像」タブに切り替え、データURIプレフィックスの有無にかかわらずBase64文字列を貼り付け、「画像へデコード」をクリックしてください。ツールがデコードしてプレビューを表示します。その後、画像を確認したりダウンロードしたりできます。文字列が切り詰められているか破損している場合、プレビューの表示に失敗し、ツールから通知されます。

このBase64変換ツールはどの画像形式に対応していますか？

ブラウザで表示可能な画像形式であれば変換できます。一般的にはPNG、JPEG、GIF、WebP、SVG、AVIF、ICOが含まれます。ファイル選択ダイアログのフィルターはimage/*に設定されているため、デフォルトでは画像以外のファイルは除外されます。出力されるdata URIには、検出されたファイルタイプに基づいた正しいMIMEタイプが含まれます。