CSS Spritesで読み込む画像を減らそう

読み込む画像の量が多いとどうしてもサーバとの通信回数が増えるので、サーバの表示速度が落ちてしまいます。よって今回は、CSS Spritesというテクニックをつかって、1つの画像を分割して使用することにチャレンジしてみました。

CSS Spritesのサンプル


今回はこちらの画像をサンプルとして使わせて頂きたいと思います。素材は、http://usui.moo.jp/rpg_tukuru.htmlからお借りしました。

導入方法

  1. 切り取りたい画像の縦横のサイズを図る
  2. 切り取りたい画像は左上から何ピクセルの位置にあるかを計算する
  3. CSSでbackground-positionの設定

1.切り取りたい部分の縦横のサイズを図る

今回は下の右から2番目の画像を切り取って表示させたいと思います。少し困った顔の画像ですね。
画像全体のサイズが、384×192pxなので、1つの大きさは96×96pxですね。

2.切り取りたい画像は左上から何ピクセルの位置にあるかを計算する

1つが96×96pxなので、切り取りたい画像の位置は(96×2),(96×1)pxの位置、すなわち(192,96)pxの位置にありますね。

3.CSSでbackground-positionの設定

あとは、CSSを書くだけです。以下のようになります。

#chara1{
    width:96px;
    height:96px;
    background-position:-192px -96px;
    background-repeat: no-repeat;
    background-image:url(http://horicdesign.com/archives/001/201409/5420d33f3080d.png);
}

実行結果

こんなかんじでサイト上で使う画像が小さければ、1つの画像にまとめて位置をづらして表示するのもありなのではないでしょうか?それでは。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →