javascript - ウェブサイトを構築するとき、複数の小さな画像を組み合わせて大きな画像にする方法は?

Question

こんにちは、Chrome 開発者ツールで Google フロント ページを開くと、複数のアイコンが大きな png ファイルにバンドルされており、(上記のように) 一緒にダウンロードされていることがわかりました。これは、ページの読み込みを高速化するためのやや一般的なアプローチだと思います。誰かが私にそれを行う方法を教えてもらえますか? さらに良いのは、バンドル/デバンドルを処理するライブラリがありますか?

(私はこれをオンラインで検索するのにかなりの時間を費やしましたが、必要なものを正確に見つけることができません。どんな助けも大歓迎です!)

Answer 1

ここにjsfiddleがあります。以下のコードは 1 つのアイコン用です。で大きな画像を移動できますbackground-position

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

欲しいものを手に入れる方法をよりよく理解するための、w3Schools からの良い投稿があります。