CSS入門 | CSS応用 | 画像スプライト (image sprite)

Tags:

• CSS
• WEB

CSS画像スプライト (image sprite)

画像スプライト(image sprite)とは、複数の画像を1つの画像にまとめて管理する画像のことである。

Webページで画像を使用する場合、Webブラウザーはその画像をダウンロードするためにサーバーへリクエストを送る。
しかし、使用している画像が多い場合、Webブラウザーは画像の数だけサーバーへリクエストを送る必要があるため、Webページの読み込み時間が長くなる。

画像スプライト(image sprite)を使用すると、画像をダウンロードするためのサーバーリクエストを数回に減らすことができる。
モバイル環境のように限られたリソースを使用するプラットフォーム(platform)では、Webページの読み込み時間を短縮する効果がある。
また、多数の画像ファイルを管理する代わりに、少数のスプライト画像(sprite image)ファイルだけを管理すればよいため、とても便利である。

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>