ファイルをBase64に変換

仕組み

Base64は、バイナリファイルをテキストに変換して、テキストしか許されない場所に持ち運べるようにします。HTMLページ、CSSファイル、JSONのペイロード、設定ファイル、メールなどです。リモートのサーバーでエンコードするには、テキストを得るためにファイルをアップロードすることになりますが、ブラウザなら一瞬でできることに対して、奇妙な取引です。

データURIか、プレーンか

データURIは、メディアタイプをプレフィックスとして持つため、ブラウザは中身が何かを判断できます。img srcやCSSのbackgroundに貼り付ければ、別のファイルなしで機能します。プレーンなBase64は、パイプラインの別の部分が型を提供する場合に適しています。

約3分の1大きくなります

Base64は3バイトを4文字で表すため、約33%の増加に、わずかなオーバーヘッドが加わると考えてください。これは形式のコストで、避ける手立てはありません。そのため、インライン化は、アイコン、小さなロゴ、フォントのサブセットなど、小さな素材に限るのが最適です。

インライン化すべきでないとき

大きな画像をインライン化すると、HTMLやCSSのファイルが大きくなり、個別にキャッシュできなくなり、解析も遅くなります。目安は数キロバイトです。それ未満ならインライン化でリクエストを1つ節約できますが、それを超えるなら、通常のファイル参照のほうが高速です。

元に戻す

このサイトのBase64デコードで、テキストを元のファイルに戻せます。画像の場合は、プレビューも表示されます。