ファイルをdata URIとして埋め込む
data:image/svg+xml;base64,…は別リクエストなしでCSSやHTMLにアセットを埋め込めます。ローカルで生成できます。
このガイドで使う道具
やりたいこと
小さなアイコンや一過性のアセットは、別ファイルではなくスタイルシート内に置けます。デモ・メール・単一ファイル成果物に便利です。
エンコード
テキストを貼るかファイルをドロップ（8MBまで）。URIはMIMEタイプを前に付けたbase64です。CSSトグルでurl("…")に包み、コピーして貼ります。
- base64はサイズを約4/3に膨らませます。8KBのアイコンは約10.7KBのテキストに。
- MIMEタイプはブラウザの報告値。application/octet-streamと出たらテキスト欄で直してください。
具体例
2KBのSVGロゴは約2.7KBのdata URIになり、background-image: url("data:image/svg+xml;base64,PHN2Zy…")にそのまま入ります。追加リクエストなし。
対応範囲
入力は8MBまで。それ以上は埋め込みよりリンクが合理的です。すべてbase64で、パーセントエンコード版はありません。アップロードはなく、ファイルはページ内で読み・エンコードされます。