今まで不真面目だったのか？ってわけじゃないですけど、自分なりにそろそろまとめようかなと。
スマフォのHTMLってさfooterとか使えるからいいよね！って思うんですが、これが画像になるとAndroidのdpiとかiPhoneのRetinaとかの都合で超絶に面倒なんですよね。
まぁ、img属性のは倍の大きさのものを用意してwidhtとheightを1/2にすればいいんだけどさ、これがcssspriteを使うとなるとね…
で、これを色々調べると「@2x.css」を用意しましょうとか平気で言ってるわけですよ。
んな、バカな！
cssと元の画像ファイルを複数用意し、ただでさえメンテナンス性の悪いcssspriteなのに4ファイル更新とか鬼畜すぎるわけですよ。
大体ね、このフロントエンドエンジニアってのはさ、変だよね、通常言語ってなると１つの言語とSQLとかでどうにかなるわけじゃないですか？
それをやれ、HTMLだのjavascriptだのcssだの最低3個を扱わないといけないですからね。
これにサーバーサイドの言語にプラスして画像を作るとｗ
こんなことしてると、「@2x.css」の為に「cssと画像の作り直しなんてできるかい！」ってなります。
本当に作業してる人ならviewportのinitial-scale/minimum-scale/maximum-scaleを0.5にして倍で作って行くわ！ってなるはずなのにね…
いや、最初ねtransform:scale(2.0);でボタンを倍にしたんですけどね、iPhoneじゃぁクリックできないわけですよ。表示はされるのに（2013/4/25現在ね）
じゃぁ、どうするかって？
つまり元々Retinaに最適化してるcssspriteの画像はそのままで、cssでcssbackground-position、background-size、width、heightを半分にすればいいわけ。
ところがですよ、通常のcssspriteのオーサリングツールなんてAdobeのFireWorksや各種webサイトのを見回っても、そんなもんないわけですよ。
一応cuiでwindows専用ですが、mac版も元のRuby scriptを配布すればいいだけなんで、もうちょい機能を付けたり、windowsはGUIにしてもいいかな？って思ってます。
まぁ、興味のある方はデバッグを含めてDLのコーナーからDLして使ってみてください。