Data URI 生成ツール

Data URI の構文

RFC 2397 で定義されている data URI は、URL そのものの中に小さなファイルを格納します。

data:[<mediatype>][;base64],<data>

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

メディアタイプは、データをどのように解釈するかをブラウザに伝えます。省略した場合は text/plain;charset=US-ASCII と見なされます。;base64 フラグは、カンマ以降の部分が Base64 であることを示します。このフラグがない場合、データは特殊文字をパーセントエンコードしたプレーンテキストになります。

Base64 とパーセントエンコードの使い分け

PNG、JPEG、WebP、フォント、PDF などのバイナリファイルには Base64 が適しています。Base64 ではサイズが必ず約 33% 増えます。テキスト形式の場合は、パーセントエンコードのほうが小さくなることがよくあります。ほとんどの文字はそのまま残り、エスケープが必要なのは <、>、#、%、二重引用符などごく一部だけだからです。そのため SVG アイコンに適しており、読みやすい結果は gzip や Brotli でも圧縮されやすくなります。ただし、ASCII 以外のテキストは 1 バイトごとに 3 文字になるため、日本語や中国語、キリル文字のテキストでは、通常 Base64 のほうが短くなります。迷ったときは両方を試し、短いほうを使ってください。

/* CSS でパーセントエンコードした SVG：内側は単一引用符、# は %23 と記述 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

インライン化が効果的な場合

data URI を使うと HTTP リクエストを 1 回減らせますが、データはそれを含むドキュメントの一部になります。

• 個別にキャッシュされない。HTML にインライン化した画像は、ページを読み込むたびに改めてダウンロードされます。スタイルシートにインライン化した画像はそのファイルと一緒にキャッシュされますが、画像を変更するとスタイルシート全体のキャッシュが無効になります。
• 初回の描画が遅くなる。ブラウザはまずスタイルシート全体をダウンロードして解析する必要があるため、CSS 内の大きな data URI はレンダリングを遅らせます。
• サイズのオーバーヘッド。Base64 ではサイズが 3 分の 1 増え、HTML や CSS を圧縮しても一部しか取り戻せません。

HTTP/2 や HTTP/3 では追加のリクエストのコストが小さいため、インライン化するのはアイコン、小さなプレースホルダー、重要な背景画像など、数 KB 程度の小さなアセットだけにして、それ以外は通常のファイルとして配信しましょう。コンテンツセキュリティポリシー（CSP）を設定しているサイトでは、インライン化した画像やフォントを読み込むために、img-src や font-src で data: を許可する必要があります。