CSS スプライトを使用して画像リクエストを減らす

「ユーザーエクスペリエンス」が中心となるインターネット時代、ウェブページを開くのが遅すぎるという理由で閉じてしまったことがありますか? 多くの人にとっての答えは「はい」だと思います。高速インターネットの時代、広東省のネットユーザーの忍耐力に挑戦しないでください。そうでないと、ネットユーザーがあなたの Web サイトから遠ざかるだけです。

ウェブページを高速化する方法はたくさんありますが、その 1 つは http リクエストを減らすことです。すべての Web サイトで画像が使用されます。Web サイトに 10 個の個別の画像がある場合、Web サイトを閲覧するときに、画像をロードするためにサーバーに対して 10 回の http リクエストが行われることになります。画像リクエストを減らす方法は次のとおりです。

CSS スプライト: ほとんどの Web サイト フロントエンド開発者は、これを「CSS スプライト」と呼んでいます。一般的な理解は、複数の小さな画像を 1 つの大きな画像に結合し、http リクエストの数を減らし、Web ページを高速化することです。 CSS スプライトがどのように実装されるかを説明するために、タオバオを例に挙げてみましょう。たとえば、Web ページに「今日の淘宝活動」という画像を表示したいとします。