画像からBase64への変換ツール

このツールは画像ファイルとBase64テキストを双方向に変換します。JPEG、PNG、GIF、WebP、SVGをドロップすると、完全なdata:URIが表示され、CSSやHTML、JSON、メールテンプレートなどにそのまま貼り付けられます。逆にデータURIや生のBase64文字列を貼り付ければ、プレビューしてダウンロードできる画像にデコードします。

画像形式はどうやって判定している?

完全なdata:URIを貼り付けた場合は、文字列の中にすでにMIMEタイプが含まれているのでそれを使います。一方、ヘッダーのない生のBase64データだけの場合は、デコードした先頭バイトを読み取り、PNG、JPEG、GIF、WebPそれぞれの既知の署名と照合します。これは拡張子に関係なくファイル形式を識別できる、いわゆる「マジックバイト」と呼ばれる仕組みです。SVGはバイナリではなくテキストなので特別扱いで、デコードした内容が<svgや<?xml宣言で始まっているかどうかで判定します。どれにも一致しない場合は、無理に推測せず判定できなかった旨を伝えます。

画像はどこかにアップロードされる?

いいえ。処理はすべてFileReader APIと標準のBase64エンコーディングを使ってブラウザ内で行われ、画像がサーバーに送信されることは一切ありません。データURI自体はただのテキストですが、スクリーンショットや外部に出したくない文書など、手元から出したくないものにも安心して使えます。

どんなときに使う?

Base64画像は、HTTPリクエストを1つずつ発生させたくない小さなアイコンを、スタイルシートに直接埋め込む用途でよく使われます。外部ファイルへのリンクが現実的でないメールや、単一ファイルのHTMLエクスポートに画像をインラインで含める際にも役立ちます。デコード側では、APIのレスポンスや設定ファイル、ログの1行に紛れ込んだBase64文字列が実際にはどんな画像なのか確認したいときに便利です。Base64エンコードは元のファイルサイズより約33%大きくなる点は覚えておくとよく、小さな画像向きで、フルサイズの写真には不向きです。構文や使いどころについては、MDNのデータURIのガイドを参照してください。