png スプライトは、隙間を開けよう

png スプライトを使うとき、
画像を隙間なく敷き詰めていると、
Retina 対応などで縮小した時、思わぬ自体になる。

上は、 background-size を 1/2 に縮小して、
スプライト画像として使っている例である。

環境によっては、青いアイコンの右側に、
細い線のようなノイズ出ているのが確認できると思う。

これ、勘の良い人はわかると思うが、
縮小した時に、ピクセルがバイキュービックで、補間がされてしまい、
スプライト上の隣の赤色が、拾われてしまっているのである。

特に Retina ディスプレイだと、起こりやすいため、
png スプライトを作るときは、隙間を 3,4 ピクセル開けておくのが安全かと思われる。