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

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

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

有名なところだと、
amazon
CSSスプライト

google
CSSスプライト

などがやってますね。

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

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

とかとか

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

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

関連したページ

    None Found

nexia access map
x