2012年10月25日木曜日

CSSスプライト画像を作成するものすごく簡単な方法

ウェブサイトにとってページの表示速度は重要で、ウェブサイトを見ていて表示速度が遅いと、ページを閲覧していくのが億劫に感じます。SEO的観点から考えても、ページの表示速度が遅いことが不利に作用することをGoogle自身が言っています。
ページ表示速度が遅い原因は、サーバーのスペックや回線速度など様々ですが、ページ内に画像がたくさんあるような場合には、それらのダウンロードに時間がかかっている可能性があります。サーバースペックやネットワークインフラが悪ければ、なおのこと遅くなります。
動的に作成されるような画像は、簡単に対策のしようのない面があるのですが、静的に配置されているアイコンやバナー、ボタン等の画像については、ひとつにまとめることでダウンロードを一回かぎりにして高速化することができます。ひとつひとつのダウンロードのたびに、サーバーとのHTTP通信が起こり、TCPセッションを作ることを考えると、オーバーヘッドが画像数に比例して削減されることが理解できます。

こうした画像をまとめて高速にページを表示する手法をCSSスプライトと言います。
GoogleがYouTubeのページで行ったりして、現在ではウェブページの高速化手法として一般的になっています。

具体的にはテーブルやリスト等のエレメントの背景に画像を設定できることを利用します。
背景画像の表示オフセット座標を指定することで、画像中の左上基点座標を移動します。そして表示する幅と高さを画像サイズに限定することで、画像中の一部分だけをトリミングして表示できる仕組みです。

HTMLやCSSの知識のある方は、ウェブページで使う画像をひとまとめにした大きな画像を作成して、いろいろ試行錯誤すればできるのではないかと思います。
画像をまとめるためのツールもあるようですが、私はウェブのサービスで作成してます。HTMLも自動生成してくれます。
そのような中で一番簡単にできる、普段使っているサイトでのCSSスプライトの使い方をご紹介します。

・画像をアップロードする
「参照」をクリックしてCSSスプライト座標に含める画像をアップロードします。
PNG、GIF、JPEGの各ファイルか、それらをまとめてZIPに圧縮したファイルをアップロードできます。
次々と追加アップロードしていくと、下の枠の中にアップロードした画像が追加表示されていきます。
スプライト画像は最終的にソートされて作られるので、アップロードする順番は意識しなくてもかまいません。

・アップロードした画像を確認する
アップロードした画像の中で不要なものがあったときは、削除して取り除くことができます。

・CSSスプライトを作成する
「CSSスプライト作成」をクリックします。
画像間隔はCSSスプライト画像中のひとつひとつの画像の間隔です。Safariの不具合やユーザーがフォントサイズを変更した時の対応用だと思われますが、通常はデフォルトのままで特に問題ありません。
作成するCSSスプライト画像の保存形式をPNG、GIF、JPEGから選べますが、オールマイティなデフォルトのPNGを使うのがいいのではないかと思います。

・画像をダウンロード
生成されたCSSスプライト画像をダウンロードします。
また、同時に生成されるHTMLコードを使うためにダミー画像もダウンロードします。これはIMGタグで必須となるSRC属性にダミーとして指定するためのもので、縦横1ピクセルサイズの透過色画像です。これがないと、IMGタグで表示した位置に画像のプレースホルダーが出てしまいます。
←生成されたCSSスプライト画像
生成できるHTMLは「1画像1行」「クラス定義に分ける」の2種類あります。
「1画像1行」は、ひとつひとつの画像を一行のHTMLで記述されていますので、シンプルで分かりやすく、使いやすいHTMLになっています。
「クラス定義に分ける」を選ぶと、スタイル設定を別の場所に記述するHTMLが生成されます。こちらは、CSSファイルに外出しして使いまわすような用途や、HEAD内に書いてBODY内の記述をシンプルにしたいときに使えます。

以上ですが、普通は何も考えなくても、画像をアップロードして、作成ボタンをクリックするだけで使えます。
CSSスプライト作成サイト

ウェブサイトの表示を速くしたいような方には、CSSスプライトは効果の表れやすい検討する価値のある手法だと思います。

0 件のコメント: