作業用メモ：CSS 複数の画像を1枚にまとめて表示速度アップ

作業用メモ

 ボタンやアイコンやロールオーバー画像など、1枚のウェブページを構成するために沢山の画像ファイルを使うことになる。細かいアイコンやボタンの類は、一つ一つは軽量なものだが、数が多いというだけでロードに時間がかかったりする。

そこで、複数の画像を1枚にまとめて、CSSで特定の部分だけを表示して使うテクニックを使うと、表示速度を向上させることができたりする。

CSSプロパティ background-position と width 、 height で部分的に表示する。

div.icon{
    background-image:url("sample.gif");
    background-position:-10px 0px;
    width:11px;
    height:13px;
}

この例では、sample.gif の、上から0px、左から10pxのポイントを基点に、幅11px、高さ13px分だけ切り取って使用する。background-positionは背景画像の表示位置を指定するので、横方向に -10px を指定したら、画像の左から10px分は隠れて表示されなくなり、つまり左から10pxのポイントからが画面に表示されることになる。

この方法で画像をまとめると、次のようないいことがあると思われる。

• サーバへのリクエストの回数が減るので、サーバ負荷が軽くなる。
• リクエスト数が減り、HTTPヘッダーの分が軽くなって、通信コストも軽減。
• ロールオーバー画像を事前にロードする手間が省ける。JavaScriptがオフでも平気。

だけど、次のようなよくないことも起こる。

• 画像の管理が煩雑になる。ちゃんと考えて作らないと、リソースの管理がぐちゃぐちゃに！
• no-repeatを前提にしなきゃならないような画像には適用できない。

だけどこの先、handheldメディアなど処理能力や通信速度が低い端末も意識するようになると、こういう取り組みは地味に重要になってくるんだろう。

これと似た方法で、clipというCSSプロパティがある。これは背景画像とかではなく、要素の部分表示を可能にするもの。<img>タグを使って、clipで部分表示みたいなのもできるので、参考までに。

<img src="xxxx.gif" alt=""
 style="
   position:absolute;
   clip:rect(10px,20px,20px,10px);
" />

rect(上端,右端,下端,左端)が書式。これは画像だけじゃなくて、<div>タグとか他のタグでも同じように切り取って表示することができる。ただし、position:absolute;とセットじゃないと使えないのが残念なところ。