Data URI Snippet Generatorという再発明を晒してみる
Posted: Updated:
Data URI Snippet Generator
なるものをササッと書いた。諸般の事情で入り用だった為。Chromeしかロクに表示を確認してないけど、SafariやFirefoxも動きはするはず、たぶん。再発明のされすぎで、何番煎じか全く分からないような類のツールです。
SafariはFileReaderないんだね...。Firefoxは概ね動いてますけど色々アレでした ｺﾞﾒﾝﾈｺﾞﾒﾝﾈ(；´Д`)ﾉｼ 今度なおしておくよ...
以下の4種類を出力します。適当にコピペしてください。
- ナマのData URI
- img要素＋画像情報コメント
- backgrundプロパティ＋画像情報コメント
- contentプロパティ＋画像情報コメント
Data URIに変換したことで、どれぐらいサイズが増えたか（だいたい30%ぐらい増えると言われていますね）を概算表示します。ただ、スタイルシートとかに埋め込んだ場合、gzip圧縮を効かせて配信すると思うので、変換による増分はなんだかんだで多少相殺できるようです。
gzipの展開やら、DataURIを元にレンダリングするのやら、別種のオーバーヘッドとかはどんなもんでしょうね？
ドロップするとData URI文字列ほか、コメントつきのimg要素とかstyleとか
DataURIの生成めんどい
個人的にはCSS Spriteよりずっとマシというか、Data URIはStylusでガンガン生成しちゃってるので、言うほど困ってはないのですが。諸事情でブラウザツールをちょろっと用意した次第。若干の今更感と共にFileReaderとDrag&Drop周りを触っただけ。
ほんとはStylusで自動化しちゃうのが一番ラクです、いまのところ。
