Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。DisplaysCSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。実装例は、4つのそれぞれ異なるクラスを定義した要素です。HTMLHTMLはイメージしやすいようダミーです。class="fav-link>fav-link</a></span>CSSスプライトに使用する画像を用意します。左は通常ディスプレイ用、右はRetinaディスプレイ用です。}}参考までに、JavaScriptでRetinaディスプレイを判別する際は下記のようになります。Posts関連記事が見つかりませんでした。