スプライト画像とは？ #CSS

1. スプライト画像とは？

スプライト画像とは、使用する複数の画像を一つの画像にまとめて必要な部分を使用するテクニックです。

2. 従来の画像ファイルダウンロードの問題点

ウェブページに複数の画像が使用される場合、ウェブブラウザはサーバーにリクエストして全ての画像ファイルを一つづつ受け取る必要があり、この時にオーバーヘッドが発生します。これは、サーバーにリクエストして受け取る画像が多いほどウェブページのローディング速度が遅くなることを意味します。

3. どうやって解決するのか？

複数の画像を一つの画像にまとめて、画像をダウンロードするためのサーバーリクエストをできるだけ減らす。モバイル環境のように限られたリソースを使用するプラットフォームでは、ウェブページの読み込み速度を向上させる効果があります。また、多くの画像ファイルを管理する必要がなく、いくつかのスプライト画像ファイルだけを管理すればいいので、管理が楽になります。

4. スプライト画像の実装

1.background-positionを使用

CSSクラスを作成し、スプライトの背景画像を指定します。

.icons {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

スプライト画像で使いたい画像領域だけbackground-positionを指定して表示します。

#icon1 {
  background-position: -20px 0px;
}

#icon2 {
  background-position: -40px 0px;
}

2. object-positionを使用

imgタグに画像を読み込みます。

<img  src='sprite.png' alt='Icons'>

スプライト画像で使用したい画像領域だけをobject-positionを使って表示します。

img {
  object-fit: none;
  object-position: 0 0;
  width: 100px;
  height: 100px;
}

スプライト画像とは？

目次