画像をBase64に変換

Base64はRFC 4648(2006年)で定義されており、バイナリの3バイトを、A–Z、a–z、0–9、+、/ の64文字からなる4文字に対応させます。その結果は、テキスト用のどんな経路でも壊れずに届きます。1998年にLarry MasinterがRFC 2397として記したデータURIスキームにより、ブラウザはそのテキストをファイルとして扱えます。

フロントエンド開発者は、小さなアイコン、ローディング表示、プレースホルダー画像をインライン化し、追加リクエストなしでページを表示します。バックエンド開発者は、画像認識やOCRサービスなど多くのAPIがBase64フィールドで画像を受け付けるため、JSONに画像を入れて送ります。テスターはソースコード内にフィクスチャを保持し、単一ファイルのHTMLレポートやMarkdownメモを作る人は、メール送信やアーカイブ時にファイルが自己完結するようスクリーンショットを埋め込みます。

インライン化するとリクエストを1つ減らせます。ブラウザがサイト1つにつき少数の接続しか開かなかったHTTP/1.1の時代には、特に効果がありました。HTTP/2やHTTP/3の多重化では小さな追加リクエストの負担は小さく、利点は薄れる一方、欠点は残ります。エンコードされた画像は個別にキャッシュできず、HTMLやCSSが変わるたびに再ダウンロードされ、含まれるファイルの解析も遅らせます。

目安として、ロゴやアイコンスプライトのように全ページに出る数KB程度の画像だけをインライン化し、それ以外はファイルとして配信するのが妥当です。写真をインラインにすることはほとんどありません。テキストではなく別のファイル形式が必要な場合は、画像変換をご利用ください。