• WEB

CSSスプライトでサイト速度高速化!画像最適化テクニック2!!

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加
CSSスプライトでサイト速度高速化!画像最適化テクニック2!!

つっつです。

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

さて今回は、、

CSSスプライト

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

CSSスプライトとは

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

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

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

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

GoogleのCSSスプライトのサンプル

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

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

Stitchesの操作説明

Stitchesの操作説明

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

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

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で画像の表示位置をずらしてあたかも一枚の画像のように表示してるのです。

Background-positionの説明

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

実践編

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

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

ノーマル

ノーマルの計測結果
サンプル確認はこちら

CSSスプライト

CSSスプライトの計測結果
サンプル確認はこちら

インラインイメージ

インラインイメージの計測結果
サンプル確認はこちら

まとめ

どうでしょうか?

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

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

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

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

インラインイメージ+CSSスプライトの計測結果

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

このエントリーをはてなブックマークに追加

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ