Soll ich Bilder als data / base64 in CSS oder HTML einbetten?

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?

Ist das eine gute Praxis? Gibt es einige Gründe, dies zu vermeiden?

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.

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:

1. Seite mit mehreren Bildern, die nicht leicht "spritable" sind.
2. Roundtrip zu Servern ist ein tatsächlicher Engpass (Think Mobile).
3. Geschwindigkeit (bis zur Millisekunden-Ebene) ist für Ihren Anwendungsfall wirklich so wichtig.
4. IE5 und IE6 sind Ihnen egal (wie Sie sollten, wenn Sie möchten, dass das Web vorwärts geht).

meine Sicht.

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:

• Daten-URI-Schema

Nachteile

• Daten-URIs werden nicht separat von ihren enthaltenen Dokumenten (z. B. CSS- oder HTML-Dateien) zwischengespeichert, sodass Daten jedes Mal heruntergeladen werden, wenn die enthaltenen Dokumente erneut heruntergeladen werden.
• Der Inhalt muss bei jeder Änderung neu codiert und eingebettet werden.
• Internet Explorer bis Version 7 (ca. 15% des Marktes ab Januar 2011) wird nicht unterstützt.
• Internet Explorer 8 begrenzt Daten-URIs auf eine maximale Länge von 32 KB.
• Daten sind als einfacher Stream enthalten, und viele Verarbeitungsumgebungen (z. B. Webbrowser) unterstützen möglicherweise nicht die Verwendung von Containern (z. B. multipart/alternativeoder message/rfc822), um eine größere Komplexität wie Metadaten, Datenkomprimierung oder Inhaltsverhandlung bereitzustellen.
• Base64-codierte Daten-URIs sind 1/3 größer als ihr binäres Äquivalent. (Dieser Overhead wird jedoch auf 2-3% reduziert, wenn der HTTP-Server die Antwort mit gzip komprimiert.)
• Daten-URIs erschweren es Sicherheitssoftware, Inhalte zu filtern.

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

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.

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?

Ich würde es für winzige Bilder empfehlen, die sehr häufig verwendet werden, zum Beispiel allgemeine Symbole einer Webanwendung.

• Winzig, weil die Base64-Codierung die Größe erhöht
• Wird häufig verwendet, da dies die längere anfängliche Ladezeit rechtfertigt

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/