3

私は現在HTML/CSSテンプレートに取り組んでおり、次のソーシャルメディアアイコンを実装する予定です。

http://www.premiumpixels.com/freebies/41-social-media-icons-png/

それらは41個の個別の.pngファイルとして提供されます。次のように簡単に使用できるように、CSSクラスを使用してそれらをテンプレートに含めたいと思います。

<i class="icon-twitter"></i>
<i class="icon-facebook"></i>

ここで問題は、CSSクラスで各アイコンを個別のファイルとして参照する必要があるのか​​、それとも41個のアイコンすべてを1つのスプライトに統合して、各クラスの背景位置を調整する必要があるのか​​（CSSスプライト手法）です。

私のテーマを使用している人が、彼のWebサイトで41のソーシャルメディアアイコンを使用することはおそらくないでしょう（うまくいけば）。平均的なサイトでは、一度に3つか4つのアイコンが使われていると思います。したがって、これは、10分の1（41の4）しか使用されていないときにスプライト手法を使用することがまったく意味があるのか​​どうか疑問に思います。

単一ファイルのファイルサイズは、ファイルあたり平均約2kbです。私が作成したスプライトのサイズは42kbです。

このシナリオに最適なソリューションは何ですか？

また：スプライトのアイコンがどのように分散されているかは重要ですか？2列21行のアイコンを作成しました。1列41行、または6列7行の場合もあります。

乾杯

4

3 に答える 3

3

それらすべてをスプライトに入れる必要があります。非常に簡単に実行できるようにするために存在するジェネレーターもあります。

それらをスプライトに結合すると、HTTPリクエストの数が減ります。

http://spritegen.website-performance.org/

于 2013-02-28T15:29:33.783 に答える
2

これは作成しているテンプレートなので、ユーザーに2つのオプションを提供することをお勧めします。

Facebook、Twitter、YouTubeなどの最も人気のあるアイコンを含む1つのスプライトを使用できます。

そして、すべてのアイコンを含む別のスプライト。

次に、テンプレートのユーザーがテンプレートで使用するスプライトを選択できるようにします。

「最も人気のあるアイコン」をスプライトの上部と同じレイアウトに含め、それらの多くを含む場合、CSSはどのスプライトを使用しても同じにすることができます。

基本的な原則は、httpリクエストをできるだけ少なくすることです。このようにすると、1つのhttpリクエストのターゲットになりますが、ファイルサイズは小さくなり、オプションでファイルサイズは大きくなります。

于 2013-02-28T15:34:22.563 に答える
1

一般的なスプライトコンテナ用に1つのクラスを作成します。

スプライトを配置するための個別のクラスを作成します。それらがどのように配置されているかは実際には重要ではありません。アイデアはHTTPリクエストを減らすことです。

于 2013-02-28T15:27:27.250 に答える