画像読み込みの高速化に使える！「CSS Sprite Generator」

本日は、一日中このブログの表示の高速化に努めていました。近頃、以前よりブログに対する検索トラフィックが増えてきたからです。

これ以上どこをいじったら、ブログの表示を高速化出来るのか、いまいち分からなかったので GTmetrix というサービスを使い、ブログのどこがネックになっているのか、確認してみました。

すると、診断結果で「CSS スプライト」を使いなさいと表示されました。な、なるほど～画像をまとめて読み込んで高速化しろってことですね。CSSスプライトは今まで使ってきたことがなかったので思いつきませんでした。

CSS スプライトで表示の高速化

CSSスプライトとは、Webデザインにおける技法の一種で、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示する手法のことである。

――　CSSスプライトとは (CSS Sprites) シーエスエススプライト： – IT用語辞典バイナリ　より

要するに、複数の画像を分けて読み込まず、ひとつの画像として読み込んで、CSSによって分けて表示しようという方法です。Google や Facebook はアイコンなどをまとめてこの方法で読み込ませることでサイトの表示の高速化を実現しています。

私のサイトで、CSSスプライトでまとめて画像が読み込めそうな部分は、ソーシャルメディア系のアイコンを表示している部分ですね。

ブログのこのヘッダーのアイコンが並んだ部分や、

サイドバーのソーシャルメディアのアイコン表示部分。

この2箇所は、それぞれ、一つずつ画像を読み込んでいました。なので、これをそれぞれ画像をまとめて読み込んで、CSSスプライトで表示すれば高速化出来ます。

このような感じで、今まで複数の画像で表示していた部分を1つの画像ファイルで読み込むということです。

この時、アイコンをまとめた画像を作ったり、CSSスプライト用のCSSを作る際に役立つのが「CSS Sprite Generator」というサイトです。

CSS Sprite Generator

CSS Sprite Generator | Project Fondue

こちらのサイトを使うことで、CSSスプライト用の画像を作ることが出来ます。CSSスプライト用のCSSも同時に生成されます。

まず、CSSスプライトにしたい画像を zip 形式でまとめて保存しこのサイトにアップロードします。

次に、オプションなどで画像を縦に連結するのか、横に連結するのか決め、画像同士の配置の間隔などの細かいパラメータを入れて、一番下の「スプライト画像とCSSを生成」というボタンを押せば、画像が連結されたCSSスプライト用の画像とそれを分けて表示するためのCSSが出力されます。

このサイトを使うことで、CSSスプライトを作る手間がグッと短縮されました！

CSSスプライトの効果

現在、ブログのソーシャルメディアのアイコン表示部分はCSSスプライトによって表示しています。見た目が変わってないので分かりにくいですが。（表示がおかしくなる方はブラウザのキャッシュを消してください）

CSSスプライトを使い始めたのが功を奏して、GTmetrix での評価が両方A判定になりました。（トップページ）　やったね！

画像を分けて読みこむよりまとめて読み込んだほうが、HTTPリクエストも少なくなり間違いなく速度が出るので余裕のある方はやってみましょう。