Was sind die Nachteile der Verwendung von Daten-URI anstelle von Sprite-Bildern?

Question

diese Bedingungen für meine Website vor:

• Ich unterstütze IE8 nicht und unten so Browser-Unterstützung ist kein Problem.

• Ich verwende auch gzip, die Datenüberladung in CSS in Fällen vermeiden würde, die ich kopieren und Daten-URI-Bilder in meine CSS-Datei einfügen.

• Ich habe nur eine CSS-Datei, die von LESS generiert wird.

• Um es einfach zu machen, verwende ich LESS-Variable für jeden Bilddaten-URI.

• Ich habe Bilder Variablen in einer separaten Datei WENIGER meine Codebasis sauber

Damit zu halten alles, was ich bin immer noch nicht sicher, ob es am besten Ansatz ist für das Laden von Bildern. Das Laden kleiner Bilder mit diesem Ansatz reduziert die Anzahl der HTTP-Anfragen und außerdem müssen wir kein Sprite-Bild pflegen.

Gibt es einen Nachteil in diesem Ansatz, den Sie sich vorstellen können?

Answer 1

Wenn sich ein Bild ändert, muss die gesamte CSS-Datei geändert werden. Dies unterbricht den HTTP-Cache. Bei einem Sprite-Bild würde die CSS-Datei selbst aus dem Cache bereitgestellt und nur das geänderte Bild müsste erneut heruntergeladen werden.

Es kann besser sein, eine CSS-Datei nur für die Daten zu generieren: URI-Bilder und eine andere für die regulären CSS-Dateien. Auf diese Weise müssen regelmäßige css-Aktualisierungen die Daten: uri images nicht erneut herunterladen.

Das zweite Problem ist mit Vordergrundbildern, denen, die mit Tag in der HTML serviert werden. Wenn es ein häufig verwendetes Bild ist, wird es unnötig die Größe des HTML erhöhen.