多くのアイコンをロードする必要があるアプリに取り組んでいます。現時点では、 が正しい URL に設定された<img>タグを使用しています。srcそれは多くの要求を引き起こします。キャッシングが適切に設定されていても、まだ多くの HEAD リクエストがあります。
必要なアイコンをすべて受け取るために、最小限のリクエスト (1 が最適) のみをトリガーするソリューションを探しています。しかし、この概念ではアイコンを変更/置換/追加するのが難しいため、スプライトの概念は好きではありません。
他の解決策はありますか？
たとえば、すべての画像をサーバー上の 1 つのファイルに base64 エンコードし、それらをブラウザーに送信し、JavaScript で分割し、base64 src を img タグに設定すると遅くなりますか?
誰かがこれまたは別のアプローチをテストしていますか?
Base64データURIを使用してCSSで画像をインライン化します。
background-image: url('data:image/png;base64,.......');
カスタムPHP/node.js /…スクリプトを使用して画像を変換するか、http： //www.greywyvern.com/code/php/binary2base64などのオンラインコンバーターを使用できます。
または https://www.useotools.com/image-to-base64
これにより、HTTPリクエストが1つだけ（CSSファイルに対して1つだけ）作成されますが、インライン化された各リソースのキャッシュを個別に制御することはできません。CSSファイルのキャッシュHTTPヘッダーを設定する必要があります。
CSSファイルのリクエストごとにサーバーにアイコンをエンコードさせることができるため、アイコンを変更するたびに手動でアイコンを再変換する必要はありません。変換のためのいくつかの単純なキャッシュをサーバー側に含める必要があります。
代替案として、アイコンフォントを試してみませんか? ここにいくつかの良い無料のものがあります：
CSS スプライトを使用して、その場でCSSスプライトの作成を自動化できます
リクエストごとにスプライト シートを生成すると不要なオーバーヘッドが増えるため、クライアントがリクエストする前に、または最初のクライアント リクエスト時にスプライトを作成してサーバーに保存してください。
これにより、画像を個別のファイルとして保持し、サーバー上でスクリプトを実行して厄介なスプライト シートを作成するだけで、元の画像をそのまま残し、簡単に更新することができます。(imagemagick ライブラリでビルドされた PHP が必要です)
注:画像 CSS スプライトの配布がどれほど効率的かはわかりません。