CSS Sprite

CSS Spriteとは？

CSS Spriteとは、いくつかの画像を1つにまとめた画像を用意し、CSSのbackgroundプロパティを使って一部分のイメージだけを見せる事で、HTTPリクエスト回数を減らしてサイトの読み込みを高速化する目的で使われているCSSの小技です。Twitter,Facebook,Youtubeなどでも、小さいアイコンとかマークを表示するのに使われています。

活用場面

読み込みが速くなるからといって、何でもかんでも一枚画像にしちゃえばその後の更新作業などが手間なので、サイトに何度も登場する「アイコン」とか「マーク」など、汎用的な部分に使うのが良法だと思います。

CSS Spriteを使ってみる

使用方法はいくつかあるようなのですが、今回は<img>の代わりにbackgroundプロパティを使って画像を表示させる方法として、画像置換をしています。

HTML

<nav id="menu">
  <table>
    <tr>
      <td class="fair"><a href="fair/">fair</a></td>
      <td class="wedding"><a href="wedding/">wedding</a></td>
      <td class="chapel"><a href="chapel/">chapel</a></td>
    </tr>
    <tr>
      <td class="banquet"><a href="banquet/">banquet</a></td>
      <td class="items"><a href="item/">items"></a></td>
      <td class="cuisine"><a href="cuisine/">cuisine</a></td>
    </tr>
    <tr>
      <td class="report"><a href="report/">report</a></td>
      <td class="gallery"><a href="gallery/">gallery</a></td>
      <td class="access"><a href="access/">access</a></td>
    </tr>
  </table>
</nav>

css

/*----------------------------
        -  css sprite
----------------------------*/
#menu table td a {
  display: block;
  width: 107px;
  overflow: hidden;
  height: 104px;
  white-space: nowrap;
  text-indent: 100%;
  background: url(../images/menu.png) no-repeat 0 0;
}
#menu table td.fair a {
  width: 117px;
}
#menu table td.wedding a { background-position: -114px 0px; }
#menu table td.chapel a { background-position: -224px 0; }
#menu table td.banquet a { background-position: 0 -120px;; }
#menu table td.items a { background-position: -114px -120px; }
#menu table td.cuisine a { background-position: -224px -120px; }
#menu table td.report a { background-position: 0px -230px; }
#menu table td.gallery a { background-position: -114px -230px; }
#menu table td.access a { background-position: -224px -230px; }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    #menu td.fair a,
    #menu td.wedding a,
    #menu td.chapel a,
    #menu td.banquet a,
    #menu td.items a,
    #menu td.cuisine a,
    #menu td.report a,
    #menu td.banquet a,
    #menu td.gallery a,
    #menu td.access a{
        /* Reference the @2x Sprite */
        background-image: url(../images/menu@2x.png);
        background-size: 320px 320px;
        /* Translate the @2x sprite's dimensions back to 1x */
    }
}

検証

【メニューアイコンを<img>を使って直接表示させたページ】

【メニューアイコンをひとまとめにした画像を使って画像置換したページ】

まとめ

今回はCSS Spriteを試してみた結果、リクエスト数が減りファイルサイズも削減でき読み込み時間も早くなりました。しかし画像置換する際の注意点としては、隠しテキストがボトルネックとなりそうです。別に隠してるつもりが無くても、検索エンジンからは警戒され得るのでテキストを隠さない画像置換をテキストを必要としない画像だけにすることが賢明のようです。
テキストを隠さない画像置換テキストを必要としない画像というと、マークとかアイコン類になると思います。サイトをより良いものにする手段のひとつとして参考にしていただければと思いました。

2015/03/16

CSS Sprite