image Base64 画像変換ツール star

仕組み

このツールは双方向で動作します。画像 → Base64モードでは、ブラウザのネイティブなファイル選択ダイアログでファイルを選ぶと、ツールがFileReader.readAsDataURL() APIでファイルを読み込み、data:image/png;base64,iVBORw0KG...のような完全なデータURIを生成します。これは1つのボックスに表示され、プレフィックスを除いた純粋なBase64データだけがもう1つのボックスに表示されるので、用途に応じて必要な形式を選んでコピーできます(それぞれにワンクリックのコピーボタンが付いています)。Base64 → 画像モードでは、完全なデータURIまたは純粋なBase64テキストのみをテキストエリアに貼り付けます。プレフィックスなしの純粋なBase64を貼り付けた場合、ツールは自動的にdata:image/png;base64,ヘッダーを追加してブラウザが表示できるようにし、その後デコードされたバイトを実際の画像ファイルとして保存できるダウンロードボタン付きのライブ<img>プレビューを表示します。

Base64エンコーディングは、バイナリデータを印刷可能なASCII文字64種類(A–Z、a–z、0–9、+、/)のみで表現する方式で、これによって本質的にバイナリであるはずの画像を、HTML、CSS、JSON、URLのようなテキスト専用の形式に埋め込むことができます。この仕組みは固定的かつ数学的です。元のファイルの3バイト(24ビット)ごとに、入力の長さが3の倍数でない場合は=で埋められながら、正確に4文字のBase64文字(4 × 6ビット)に変換されます。この「3バイト入力、4文字出力」という比率こそが、Base64出力が元のバイナリよりも常に約33%大きくなる理由です — 4を3で割ると約1.333になります — これは近似値や品質設定ではなく、固定された数学的なオーバーヘッドです。

知っておくと便利なこと

画像をデータURIとしてHTMLやCSSに直接埋め込むことには実質的な利点があります。それは、別途のHTTPリクエストをなくせることです。これはアイコン、小さなスプライト、外部画像がブロックされる可能性のあるメールテンプレートに焼き込む極小のロゴのような、非常に小さく頻繁に再利用されるアセットにとって重要です。しかし、これより大きなものについてはトレードオフが逆転します。データURIは、リンクされた.pngや.jpgファイルのようにブラウザが独立してキャッシュすることができず、それを含むHTML/CSSファイルのサイズを(同じく約33%)膨らませ、エンコードされたブロック全体がダウンロードされるまでそのファイルのレンダリングをブロックします。目安として、データURIは数キロバイト未満のアセットには適していますが、写真やヒーロー画像、あるいはページ読み込みをまたいでキャッシュされてほしいものには不向きです。

MIMEタイププレフィックス — data:image/png;base64,...の中のimage/png、image/jpeg、image/webpの部分 — は装飾ではありません。これはブラウザ(または文字列を読み取る他のプログラム)に、続くバイト列をどのデコーダーに渡すべきかを伝えるものです。これがない、あるいは間違っている場合、本来は有効なBase64データであってもレンダリングに失敗したり、まったく異なるファイル形式として表示されたりすることがあります。まさにこの理由から、このツールはプレフィックスなしの純粋なBase64が貼り付けられた際に自動的にPNGプレフィックスを追加します — これは妥当なデフォルトですが、元のファイルが実際にはJPEGやWebPだったと分かっている場合は、それに合わせて変更する必要があります。