CSSスプライトっていう考え方

CSSスプライトって言葉、最近よく聞きますよね？

簡単に言うと、アイコンとかロゴとかよく使う画像は、
ひとつのファイルにまとめて、CSSで表示させてあげたらいいんじゃね？という考え方。

有名なところだと、
amazon

google

などがやってますね。

CSSスプライトのメリット
１、1枚の画像なので、Webサーバにやさしい。画像のリクエスト数が単純に減りますからね。
２、トータルのファイルサイズが小さくなる。画像のメタデータは馬鹿にならないもの。

CSSスプライトのデメリット
１、CSSに位置を記述して配置するので、ソースの見通しが悪い。何の画像配置したんだっけ？とか。
２、画像を変更した場合のサイズ管理が大変。

とかとか

CSSでbackgroundにしてbackground-positionで位置を決めるのが一般的な使い方でしょうか。

使いどころさえ間違わなければ、かなり良い考え方だと思います。

関連したページ

None Found