このページの本文へ

Webサイトからユーザーを逃さない基本テクニック

30分でできる!Webサイトを高速化する6大原則

2009年09月09日 07時00分更新

Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

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の利用例だ。

YouTubeの例

 CSS Spriteを使うと、Webサイトのパフォーマンスを飛躍的に改善できる。このCSS Spriteを簡単に作成できるツールが「CSS Sprite Generator」だ。

●CSS Sprite Generator
 http://spritegen.website-performance.org/


 まず、まとめたい画像ファイルをzipファイルにしてアップロードする。

CSS Sprite

 次に、同じ画像が含まれていた場合(重複していた場合)の処理方法を選択する。「Ignore duplicate images」は、同じ画像があっても無視して別のCSS(background-position)を出力する。「Remove duplicate images but merge CSS rules」は同じ画像があった場合、片方の画像を取り除く。

CSS Sprite

 続いて、画像の拡大/縮小サイズを選択する。「Build Directions」は画像を並べる方向で、「vertical」なら縦、「horizontal」なら横に配置する。「Offset」はそれぞれの画像同士の間隔だ。「Opera bug」はOperaで発生するバグを回避するためのオプションだが、Opera10以降では特に気にしなくていいだろう。「background color」は背景色、「Output format」は画像の出力形式を指定する。

CSS Sprite

 うれしいことに、画像を最適化してくれる「Optipng」というチェックボックスもついている。Optipngにチェックを入れれば、同時に画像を最適化できる。

 あとは、「Create Sprite Images & CSS」ボタンを押せば完成だ。CSSと画像ファイルが出力される。

CSS Sprite

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング