フォントアイコンやスプライトイメージはどうすればいいですか？

Question

パフォーマンス向上のためにフォントアイコンやスプライト画像を使用する必要があるのは何ですか？ は、何をより速く軽く荷重するのでしょうか？

Answer 1

小さな独立したイメージがたくさんある場合は、フォントアイコンまたはスプライトイメージを使用します。基本的にイメージを1つのイメージにまとめて、すべてのイメージを取得するように1つの要求が行われます。

通常、これらのアイコンは、ナビゲーションバーのボタンやアイコンなどの小さなアイコンや同様のものに使用されます。例えばトップ（太字、イタリックなど）の上にStackOverflowのエディタボタンは、おそらくそのためのフォントの画像を使用します。

はあなただけで、そのために10種類の画像のようなものをロードするために持っていた場合を想像してみて非常に非効率的なボタンのバーです。

別の例は、emojiesです。そこに何千ものemojiesがありますが、別々のリクエストでそれらのそれぞれをロードする必要がある場合は想像してください。

現代のウェブサイトでは、通常、フォントアイコンがスプライト画像よりもはるかに多く使用されています。

これにより、サーバーの負荷も軽減されます。効率化のため、小さな画像を使用してテキストの代わりにボタンを表すことがあるためです。

Answer 2

私は、アイコンフォントが優位性を持つことができると感じ2つの重要なポイントがあります：あなたは」アイコンのセットを持っている場合は

• 全体のファイルサイズ
• Internet Explorerのサポート

は、特定のプロジェクトで使用するのが好きな場合、アイコンのセットが大きいほど、アイコンフォントのファイルフットプリントが小さくなる可能性が高くなります。

最近のテストでは、約30個のアイコンを使用して、アイコンフォントはスプライトイメージと比較して約240％のブーストに達することができます。 また、アイコンフォントはIE6と同じくらい元気に動作します。

一方、ベクトルアイコンは、品質を損なうことなく上下にサイズ変更可能で、網膜ディスプレイにはさらにシャープです。マルチカラーのアイコンもサポートしています。

さらに参考にするため、this投稿をおすすめします。これは助けることができる

希望、 L.