おはようございます。佐伯です。
今回はCSSスプライトのお話です。
CSSスプライトとは、サイトの読み込みを高速化する目的で使われているCSSのテクニックです。最近ではYahoo!やGoogleなどでも使われており、画像とCSSだけで高速化が実現できる大変便利な技術です。
1.CSSスプライトとは？
具体的にどんなことをやっているか。一言で言ってしまうと「サイト内で使用する画像を一枚の画像にまとめて、サーバへのリクエスト回数を少なくする」ということをしています。
一つのファイルに多数のイメージをマージすることで、多くのサイトでHTTPリクエストの数を減らすことができます。たいていのブラウザは一つのドメインに対して二つの同時接続を行い、個別のファイルは大きくなりますが全体的なリクエストとレスポンスはかなり改善されます。
2.CSSスプライトのメリットとデメリット
メリット
- サイトの読み込みが速くなる
- スライスが一枚で書き出せるので手間がかからない
- HTMLソースの記述が減り、見やすくなる
デメリット
- 画像の管理が大変になり、更新が面倒
- CSSソースの記述が増える
- SEO的な懸念
このようにいいところだけではないんですね。ですから、使い所をよく選ぶ必要があります。
3.CSSスプライトは画像置換
CSSスプライトとは画像置換の応用です。画像置換とは「テキストを非表示にしたところに背景画像を表示させる」という事をしています。画像置換には様々な方法があり、こちらのページで方法と原理が詳しく説明されています。
4.CSSスプライトの使い所
ファイルサイズの肥大化やスピードに関しては、ユーザーの利用しているPC、インターネットの回線などハードウェアが向上することで解決すると考えるかもしれません。レイアウトが複雑になるにつれ、より多くのファイルが必要とされ、制作者にとってはそれがスプライトであるにしても、より多くのイメージを使用するようになります。
さて、ではどういうところに使うのが最も適当なのでしょうか。まず、CSSスプライトを使う際に気をつけなければならないのは、全てが一枚の画像になるので背景色が統一されていなければならないという点です。
背景色が透過できるpng画像を使うのが一般的ですが、IE６等の透過pngが効かないブラウザもあります。png画像のIE６対応については様々なサイトで紹介されていますが、いずれもJavaScript等を使用することとなり、結果的にページの表示に時間が掛かってしまいます。
これでは本末転倒なので、私のオススメとしてはスマートフォンサイト等の全ブラウザがpngに対応しているものやナビゲーションなどの共通部分に使うのが効果的と考えています。
5.画像置換の問題
画像置換には避けて通れない問題があります。それは、スパムとして判断されがちということです。この問題に対してGoogleは一貫して「NG」を主張しています。いかなる場合であっても隠しテキストである事が見受けられれば「スパムの疑いがあるとして要注意マークを付けられやすい」とのことです。
これについては、賛否両論ですが、Googleの見解もやや一方的のような気がします。実際の表示とテキストが同じであれば、問題無いという意見もありますし、最近では画像で表示されている文字も検索側で判別できるようになってきているようです。
できることなら画像とテキストは完全に分けてしまったほうが良いと言えます。WEBフォントというブラウザ上でデザイン性のあるフォントを使える機能がありますが、現状日本語のフォントはほとんどありません。WEBフォントが充実してくればテキストに画像を使わなくても良い日がやってくるかもしれません。
次回はWEBフォントについて詳しく説明していきます。
