普通のブラウザならサポートしている便利なやつで data: っていうのがあるわけです。意外と知らない人もいたりいなかったり。たびたびこの話は出る感じ。以下 RFC:2397 のメモ。
data:[<mediatype>][;base64],<data>
セミコロンとカンマを逆にしたりする。
data:text/plain,foobar data:,foobar 上と同じ data:text/html,<html><body style="background:#fff"></body></html> data:text/plain;charset=utf=8,%E3%81%BB%E3%81%92%E3%81%BB%E3%81%92 data:image/gif;base64,R0lGODlhEAAQALMNADAwMBAQEO/v78/Pz0BAQCAgIN/f37+/v2BgYJ+fnwAAAP///4CAgP///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAAANACwAAAAAEAAQAAAEObDJieq8uFVEer5bR3xZFxQFiaGpOrHSIqtP3cgLbeP6IxlA1wRoEP4MgsPB2FAeElCXE5pgUpmuCAAh+QQJAAANACwAAAAAEAAQAAAEPrDJSaulKF+bUV1glQEEMYHLVZoSqpaSIW9NYTeyQdsFPm88yWF4eRgnw0PxKDwMEomK8VGBRmkTK3bLpUUAACH5BAkAAA0ALAAAAAAQABAAAAQ6sMlJK13Yarw0NQZXIeQEGhqJmGBaNkfsNUQNy15N3MesS4mgpkCcBBPDIlBIeTiVM+dj1nRSr9hJBAAh+QQJAAANACwAAAAAEAAQAAAEN7DJueq80+i6MNYG50nHIWjjVR4ptrZTIrdI3cgJbeM6AkuE4A8ohBUKgaLnwTwWYMyHE8oc/iIAIfkECQAADQAsAAAAABAAEAAABDiwyWnqvPPoapbHknZw3oIlyaBN5YmCMJrAdG3feN4gfM4jmIdwQiAAehfho8AsEmBKZsFpk+pqEQAh+QQJAAANACwAAAAAEAAQAAAENrDJeeq8M+l6jMeSlnCeATbi5C3sCbKLi8Fybd/yo+P6w+uFwgRBPAULhCQRYQwmCcvaE1eLAAAh+QQJAAANACwAAAAAEAAQAAAEObDJmeq8uNV0er5bd3xZJxgGiaGpOrHSI6tL3cgPbeP6IhVA1wRYEP4KAQLB2FASEFCXE4pgUpmuCAAh+QQJAAANACwAAAAAEAAQAAAEPrDJSaulKV+bU31glQ3HMYHPVZoSqpZSIW+NYTdyQdsGPm88CWF4WRgnQ0LxKCQAEIiKcVGBRmkTK3bLpUUAACH5BAkAAA0ALAAAAAAQABAAAAQ6sMlJK33Yavw0LQVXJeQEFhqZmGBaNkTsNUcNy1593MSsS4igxkCcBBHDIlBIWTiVM+di1nRSr9hJBAAh+QQJAAANACwAAAAAEAAQAAAEN7DJ+eq8s+j6MNYF50kEEWjjVRIptrYTIrdJ3cgIbeN6AkuH4A8ohBkMgqJnwTwaYMyFE8oc/iIAIfkECQAADQAsAAAAABAAEAAABDiwyVnqvJPoWp7HkkZw3oMhCKBN5YmCMIrAdG3feN4kfM4nmIVwcjgMehfhwsAsHmBKpsFpk+pqEQAh+QQJAAANACwAAAAAEAAQAAAENrDJSeq8E+lKiseShnBeATbi5D3sCbKPi8Fybd/youP6wusGwyRBPAUNhyQxYQwmD8vaE1eLAAA7
もちろん image/* のときは base64 を使わないといけないという規則があるわけじゃない。% エンコーディングで普通に書いてもいい。クソ長いけど。
ユーザ CSS とか JS とかを配布するとき、一つのファイルに纏めたいときは便利。