HTML / XHTML ブログ記事 一覧

インターネットを利用していて、ページの表示が遅いと嫌になりませんか？
統計では、表示待ち時間が平均３秒以上でそのサイトへの訪問者数が激減するそうです。
 

普段見ているサイト（=Webページ）は、画像がよく使われていると思います。
企業のロゴであったり、広告であったり、小さい飾りの画像であったり。
 

実は、画像をどれだけ使っているか、もページの表示時間に
与える影響のひとつとして挙げられるんですね。
 

｢これの画像が必要だから送って。｣という（HTML文書から）注文がくると、
ネット上のサイト専用の箱から、必要な画像を注文ごとにデリバリーします。
お店から荷物を小出しに配送（分割配送）しているようなものですね。
荷物（画像）が多ければ多いほどすべての荷物がそろうには時間がかかり、
つまりはページの表示が遅れる要因に。
もちろん荷物の重さ（画像情報）にもよりますので一概にはいえませんが。
 

画像に注目してお話をすると、
実はこの分割配送を一括配送する方法が誕生しました。
「CSS Sprites（CSSスプライト）」というテクニックになります。
 

■　CSS Spritesとは？
 

実は、新しい技術というわけではなく、ちょっとした"小技"的なことだったりします。
なので、一括配送するための便利なソフトが誕生した、と言うほうが的確かもしれません。
 

方法は実に単純で、
個々の画像をまとめて一枚の画像にして、必要な部分だけを
CSS（スタイルシート）で位置を座標チックに指定して使う…というもの。
 

実はこの方法、Googleで採用されています。
ちょっと見てみますか？
Googleの検索結果ページにて、左上のロゴを保存しましょう。
（ロゴの上で右クリック⇒｢名前を付けて背景を保存｣⇒保存）
保存した画像をダブルクリックして開いて見てみると、
ロゴ以外にも小さいイラストがありませんか？
でも検索画面で表示されていたのはロゴだけでしたよね？
これはロゴの部分だけを座標のように位置を指定して表示していただけなんですね。
 

Google以外でもYahoo!やYouTubeなどでも採用しているようです。
 

■　実際の作り方とは？
 

画像を一枚にし、CSS側で必要な部分のbackgroundに設定し、
background-positionで位置を指定します。
 

方法は２通りあります。
 

（1）ソフトを使用する。
◎ メリット ： 指定した個々の画像を自動的に一枚にし、個々の位置を示したCSSを自動生成する。
△ デメリット ： 画像容量が決められている場合がある。画像に無駄な余白ができてしまう。
 

☆ソフト紹介（フリーソフト）
　　　・CSS Sprites Generator　※ シンプル
　　　・CSS Sprite Generator　 ※ 詳細設定可能
 

（2）あくまで自力で。
◎ メリット ： 無駄な余白を作ることなく、処理能力を上げられる。
△ デメリット ： 画像の作成や位置の把握に手間がかかる。
 

■　サイト高速化への挑戦！
 

このように個々の画像を一枚ずつ読み込むよりも、一枚の画像にまとめることで
リクエスト（注文）数を減らし、ページ読み込みをスムーズに行うことができます。
 

デメリットとしては画像サイズの修正が一ヶ所でもあった場合、
すべての画像位置に影響する可能性があることです。
 

画像が多く、ページ表示が遅い場合の解決策のひとつとして
知っておくのもいいかもしれません。ページ表示の負担が減れば、
ユーザーにとってストレスフリーなネット環境になり、相乗効果も期待？！
 

ひと手間はかかりますが、けっこう楽しいので是非試してみて下さい♪