Um die Anzahl der Anfragen auf dem Server zu reduzieren, habe ich einige Bilder (PNG & SVG) als BASE64 direkt in das CSS eingebettet. (Es ist im Erstellungsprozess automatisiert)
so was:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);Ist das eine gute Praxis? Gibt es einige Gründe, dies zu vermeiden? Gibt es einen großen Browser, der keine Unterstützung für Daten-URLs bietet?
Bonusfrage: Ist es sinnvoll, dies auch für CSS & JS zu tun?
Antworten:
Dies ist normalerweise nur für sehr kleine CSS-Bilder empfehlenswert, die zusammen verwendet werden (z. B. CSS-Sprites), wenn die IE-Kompatibilität keine Rolle spielt und das Speichern der Anforderung wichtiger ist als die Cachefähigkeit.
Es hat eine Reihe von bemerkenswerten Nachteilen:
Funktioniert in IE6 und 7 überhaupt nicht.
Funktioniert in IE8 nur für Ressourcen mit einer Größe von bis zu 32 KB . Dies ist die Grenze, die nach der Base64-Codierung gilt. Mit anderen Worten, nicht länger als 32768 Zeichen.
Es speichert eine Anfrage, bläst aber stattdessen die HTML-Seite auf! Und macht Bilder nicht zwischenspeicherbar. Sie werden jedes Mal geladen, wenn die enthaltene Seite oder das Stylesheet geladen wird.
Die Base64-Codierung erhöht die Bildgröße um 33%.
Wenn
data:Bilder in einer komprimierten Ressource bereitgestellt werden, werden sie mit ziemlicher Sicherheit die Ressourcen des Servers schrecklich belasten! Bilder sind traditionell sehr CPU-intensiv zu komprimieren, wobei die Größe nur sehr wenig reduziert wird.quelle
Häufige Antworten hier scheinen darauf hinzudeuten, dass dies aus einer Reihe legitimer Gründe nicht erforderlich ist. All dies scheint jedoch das Verhalten und den Erstellungsprozess moderner Apps zu vernachlässigen.
Es ist nicht unmöglich (und eigentlich ganz einfach), einen einfachen Prozess zu entwerfen, der durch Ordnerbilder läuft und ein einziges CSS mit allen Bildern dieses Ordners generiert.
Dieses CSS wird vollständig zwischengespeichert und reduziert Roundtrips zum Server drastisch, was von @MemeDeveloper als einer der größten Performance-Hits richtig angesehen wird.
Klar, es ist Hack. kein Zweifel. genauso wie Sprites ein Hack sind. In einer perfekten Welt wird dies nicht benötigt. Bis dahin ist es eine mögliche Übung, wenn Sie Folgendes beheben müssen:
meine Sicht.
quelle
Es ist keine gute Praxis. Einige Browser unterstützen keine Daten-URIs (z. B. IE 6 und 7) oder die Unterstützung ist begrenzt (z. B. 32 KB für IE8).
Ausführliche Informationen zu den Nachteilen der Daten-URI finden Sie auch in diesem Wikipedia-Artikel:
quelle
Ich habe ungefähr einen Monat lang Daten-URLs verwendet, und ich habe sie einfach nicht mehr verwendet, weil sie meine Stylesheets absolut enorm gemacht haben.
Daten-URLs funktionieren in IE6 / 7 (Sie müssen diesen Browsern nur eine HTML- Datei bereitstellen ).
Der einzige Vorteil, den ich durch die Verwendung von Daten-URLs erhielt, war, dass meine Hintergrundbilder gerendert wurden, sobald das Stylesheet heruntergeladen wurde, im Gegensatz zu dem allmählichen Laden, das wir sonst sehen
Es ist schön, dass wir diese Technik zur Verfügung haben, aber ich werde sie in Zukunft nicht mehr zu oft verwenden. Ich empfehle es jedoch auszuprobieren, nur damit Sie es selbst wissen
quelle
Ich würde eher CSS Sprites verwenden, um die Bilder zu kombinieren und bei Anfragen zu speichern. Ich habe die base64-Technik noch nie ausprobiert, aber sie funktioniert anscheinend nicht in IE6 und IE7. Wenn sich Bilder ändern, müssen Sie den gesamten Verlust erneut ausliefern, es sei denn, Sie haben natürlich mehrere CSS-Dateien.
quelle
Ich habe keine Ahnung von allgemeinen Best Practices, aber ich würde so etwas nicht gerne sehen, wenn ich helfen könnte. :) :)
In Webbrowsern und Servern ist eine ganze Menge Caching-Funktionen integriert. Ich hätte also gedacht, dass Sie am besten Ihren Server dazu bringen, den Client anzuweisen, Bilddateien zwischenzuspeichern. Wenn Sie nicht viele wirklich kleine Bilder auf einer Seite haben, hätte ich nicht gedacht, dass der Aufwand für mehrere Anfragen so groß ist. Browser verwenden im Allgemeinen dieselbe Verbindung, um viele Dateien anzufordern, sodass keine neuen Netzwerkverbindungen hergestellt werden. Wenn das Verkehrsaufkommen über HTTP-Header im Vergleich zur Größe der Image-Dateien nicht erheblich ist, würde ich mir keine Sorgen über mehrere Anforderungen machen .
Gibt es Gründe, warum Ihrer Meinung nach derzeit zu viele Anfragen an den Server gehen?
quelle
Ich würde es für winzige Bilder empfehlen, die sehr häufig verwendet werden, zum Beispiel allgemeine Symbole einer Webanwendung.
Support-Probleme mit älteren Browsern müssen natürlich berücksichtigt werden. Es kann auch eine gute Idee sein, die Fähigkeit eines Frameworks zu verwenden, um die Bilder automatisch in Daten-URLs wie GWTs ClientBundle zu integrieren oder zumindest CSS-Klassen zu verwenden, anstatt sie direkt dem Stil des Elements hinzuzufügen.
Weitere Informationen finden Sie hier: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/
quelle