つっつです。

さてさて前回に引き続きWEBサイト高速化必須、画像最適化テクニックについて書かせてもらいます！
ちなみに何故必要かなどは、前回のインラインイメージの記事をご覧ください。

さて今回は、、

CSSスプライト

こちらを説明していきたいと思います。

CSSスプライトとは

各画像を一枚の画像に結合変換してCSSを使って一部だけ表示することで、あたかも一枚画像の様に表示するテクニックです。

こちら前回のインラインイメージの記事と同じでHTTPリクエストを減らすことでサイト表示速度を早くしようという考え方です。

インラインイメージより少々管理が面倒になるのがネックですが良く使われるテクニックです(筆者はインラインイメージ好きです)
※こちらはキャッシュが効くので初回以外は高速になるかと思います、ただしコードが全体的に複雑になる気がしてます。

↓グーグルさんのサンプル↓

早速CSSスプライトをやってみよう

まずはお好みの画像をこちらのサイト(←よく使う)にまとめてアップ変換！

こんな感で簡単に結合されると思います。

結合された画像とソースをダウンロード！

HTMLファイルにペタリと貼ってお好みのサーバーに上げてみてください画像が表示されるはずです。

面倒な方はこちらにサンプルがあります。

最適化前

<img src="img/1.png" alt="" />
<img src="img/2.png" alt="" />
<img src="img/3.png" alt="" />
<img src="img/4.png" alt="" />
<img src="img/5.png" alt="" />
<img src="img/6.png" alt="" />
<img src="img/7.png" alt="" />
<img src="img/8.png" alt="" />
<img src="img/9.png" alt="" />
<img src="img/10.png" alt="" />
<img src="img/11.png" alt="" />
<img src="img/12.png" alt="" />
<img src="img/13.png" alt="" />
<img src="img/14.png" alt="" />
<img src="img/15.png" alt="" />
<img src="img/16.png" alt="" />
<img src="img/17.png" alt="" />
<img src="img/18.png" alt="" />
<img src="img/19.png" alt="" />
<img src="img/20.png" alt="" />
<img src="img/21.png" alt="" />
<img src="img/22.png" alt="" />
<img src="img/23.png" alt="" />

サンプル確認はこちら

最適化後

サンプル確認はこちら

こちらChromeデベロッパーツールでソースを確認してみてください

要は空タグに高さと幅を設定、Background-imageで画像を表示、Background-positionで画像の表示位置をずらしてあたかも一枚の画像のように表示してるのです。

グーグル先生なんかで”CSSスプライト”で検索すると先人様の素晴らしいノウハウが沢山出てきます。
(インラインイメージより説明がやはり大変です汗 手抜きですいません)

実践編

※測定値ですがサーバーの状態などにも左右されるので今回のものが絶対ではありません

前回に引き続き速度テストをしたいと思います、定番の計測サイトです。
今回はノーマル、CSSスプライト、インラインの3種類を比較してみたいと思います。

ノーマル

サンプル確認はこちら

CSSスプライト

サンプル確認はこちら

インラインイメージ

サンプル確認はこちら

まとめ

どうでしょうか？

インライン、CSSスプライトどちらも効果ありと判断してもいいかと思います。
初訪問者にはインラインイメージ、リピート訪問者にはキャッシュが効くCSSスプライトが良さそうに感じますよねー

ではでは長所短所のバランスを考えつつ使い分けて、ハッピーなバリサクWEBサイトを作っていきましょう！

ちなみに、、、調子にのって

インラインイメージ+CSSスプライト

これは意味がありません。なぜ意味がないかは考えてみてくださいね。
ではでは失礼いたします。