OpenReplay Logo
12k
12k

画像 → Base64 変換ツール

画像をBase64に変換したり、その逆を行ったりします。ファイルをドラッグ、ドロップ、または貼り付けると、生の文字列、data URI、CSSおよびHTMLのスニペットが得られ、すべてブラウザ上でローカルに処理されます。

お使いのブラウザー内でローカルにエンコードされます — 画像がアップロードされることはありません。

このツールについて

Base64は、バイナリデータの3バイトごとを64記号のアルファベットから取った4つのASCII文字に対応付け、末尾を「=」で埋めるバイナリからテキストへのエンコードです。data URIはそのペイロードを「data:<mime>;base64,」というプレフィックスで包むため、画像を別個のネットワークリクエストとしてではなく、HTML、CSS、JSONの中にインラインで配置できます。出力4文字が入力3バイトを表すため、エンコードによりサイズはおよそ33%増加します。

小さなアイコン、スプライト、SVGをスタイルシートやマークアップに直接インライン化してHTTPの往復を減らしたり、メールや自己完結型のHTMLレポートにロゴを埋め込んだり、画像のバイトをJSON APIのペイロードに貼り付けたり、単一ファイルのプロトタイプに手早くファビコンを入れたりするのにお使いください。逆方向のモードは、CSS、データベースのカラム、ログから取り出した画像を復元する必要があるときに、data URIや生のBase64文字列をダウンロード可能なファイルに戻します。

すべてがブラウザ上で実行されます。画像はFileReaderで読み込まれ、決してアップロードされないため、機密性の高いアセットでさえあなたのマシンに留まります。

よくある質問

なぜBase64画像は元のファイルより大きくなるのですか?

Base64はバイナリの3バイトを4つのASCII文字にエンコードするため、エンコード後のテキストはソースファイルよりおよそ33%大きくなります。data URIのプレフィックスや行の折り返しがその上にもう少し追加されます。

画像はBase64のdata URIとしてインライン化すべきですか、それともファイルにリンクすべきですか?

アイコンやSVGのような小さく頻繁に再利用されるアセットはインライン化してHTTPリクエストを節約しますが、大きな画像は別個のファイルとして提供してください。data URIは独立してキャッシュできず、HTMLやCSSを肥大化させ、約33%のサイズオーバーヘッドが節約されるリクエストを上回ってしまいます。

Base64文字列を画像ファイルに戻すにはどうすればよいですか?

Base64 to Imageモードに切り替えて、完全なdata:image/... URIまたは生のBase64文字列のいずれかを貼り付けてください。ツールがそれをデコードし、結果をプレビューし、MIMEタイプを検出し、本物のファイルとして保存するDownloadボタンを提供します。