2.画像はサイズを指定せよ！
画像サイズは必ずHTMLのwidth属性とheight属性、もしくはCSSのプロパティで指定する。サイズを指定することによって、ブラウザーは画像ファイルのダウンロードが完了する前にレイアウトを計算できる。結果、ページの表示にかかる時間は短縮される。
●記述例：HTMLのwidth属性、height属性を利用した場合
<img src="web+directions+east.png" alt="画像 Web Directions East ロゴ" width="100" height="100" />
●記述例：CSSのwidthプロパティとheightプロパティ利用した場合
img{
width: 100px;
height: 100px;
}
このとき、画像自体のサイズとHTMLで指定するサイズを一致させることが大切だ。たとえば、200×200ピクセルの画像を100×100ピクセルで 表示したい場合は、画像自体を必ず100×100ピクセルにリサイズしておく。画像の表示サイズを小さくする目的でwidth属性やheight属性を指定すると、ブラウザーに余計な処理が発生し、表示スピードが低下する。
3.HTTPリクエストは最小にせよ！
HTTPリクエストを少なくすれば、Webページの表示スピードは改善できる。ではどうすればいいのだろうか？ 代表的なのが「CSS Sprite」と呼ばれるテクニックだ。CSS Spriteとは、ページ内で使う背景画像を1枚の大きな画像ファイルにまとめ、CSSのbackground-positionで表示位置をコントロールするテクニック。Yahoo!やYouTubeなど、大規模サイトでは当たり前のように使われている。以下は、YouTubeでのCSS Spriteの利用例だ。
CSS Spriteを使うと、Webサイトのパフォーマンスを飛躍的に改善できる。このCSS Spriteを簡単に作成できるツールが「CSS Sprite Generator」だ。
●CSS Sprite Generator
http://spritegen.website-performance.org/
まず、まとめたい画像ファイルをzipファイルにしてアップロードする。
次に、同じ画像が含まれていた場合（重複していた場合）の処理方法を選択する。「Ignore duplicate images」は、同じ画像があっても無視して別のCSS（background-position）を出力する。「Remove duplicate images but merge CSS rules」は同じ画像があった場合、片方の画像を取り除く。
続いて、画像の拡大／縮小サイズを選択する。「Build Directions」は画像を並べる方向で、「vertical」なら縦、「horizontal」なら横に配置する。「Offset」はそれぞれの画像同士の間隔だ。「Opera bug」はOperaで発生するバグを回避するためのオプションだが、Opera10以降では特に気にしなくていいだろう。「background color」は背景色、「Output format」は画像の出力形式を指定する。
うれしいことに、画像を最適化してくれる「Optipng」というチェックボックスもついている。Optipngにチェックを入れれば、同時に画像を最適化できる。
あとは、「Create Sprite Images & CSS」ボタンを押せば完成だ。CSSと画像ファイルが出力される。
