Data URI Snippet Generatorという再発明を晒してみる

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とか

ドロップするとData URI文字列ほか、コメントつきのimg要素とかstyleとか


DataURIの生成めんどい

個人的にはCSS Spriteよりずっとマシというか、Data URIはStylusでガンガン生成しちゃってるので、言うほど困ってはないのですが。諸事情でブラウザツールをちょろっと用意した次第。若干の今更感と共にFileReaderとDrag&Drop周りを触っただけ。

ほんとはStylusで自動化しちゃうのが一番ラクです、いまのところ。


Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search