CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。

さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。

イメージスプライトとは？

イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのbackground-positionプロパティを使って、必要な部分だけを切り出して表示します。小さな画像が多数あるページほど、その効果を実感しやすい手法です。

実装例

以下は、CSSでイメージスプライトを利用するコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力になります。

CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

コードの解説

この例では、TwitterとFacebookの2つのアイコンを、1枚のスプライト画像「sprites_64.png」から表示しています。.twitterと.facebookに共通のスタイルとして背景画像・表示サイズ・余白を指定し、Facebook側だけbackground-positionで表示位置をずらしています。

.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}

background-positionの値を調整すれば、1枚の画像から任意のアイコンを取り出して表示できます。画像ファイルの数が減ることでサーバーへの負荷が軽減されるだけでなく、ファイル管理もシンプルになり、サイト全体の表示速度向上に大きく貢献します。

  1. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ