Ich habe mir die Quelle eines Greasemonkey-Benutzer-Skripts angesehen und in ihrem CSS Folgendes festgestellt:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
Ich kann verstehen, dass ein Greasemonkey-Skript alles, was es kann, in der Quelle bündeln möchte, anstatt es auf einem Server zu hosten, das ist offensichtlich genug. Da ich diese Technik zuvor noch nicht gesehen hatte, habe ich über ihre Verwendung nachgedacht und sie scheint aus mehreren Gründen ansprechend zu sein:
- Dadurch wird die Anzahl der HTTP-Anforderungen beim Laden der Seite verringert und somit die Leistung verbessert
- Wenn kein CDN vorhanden ist, wird der Datenverkehr reduziert, der durch Cookies generiert wird, die neben Bildern gesendet werden
- CSS-Dateien können zwischengespeichert werden
- CSS-Dateien können GZIPPED sein
Wenn man bedenkt, dass IE6 (zum Beispiel) Probleme mit dem Cache für Hintergrundbilder hat, scheint dies nicht die schlechteste Idee zu sein ...
Also, ist dies eine gute oder schlechte Praxis, warum würden Sie es nicht verwenden und welche Tools würden Sie verwenden, um die Bilder mit base64 zu codieren?
Update - Testergebnisse
Testen mit Bild: http://fragged.org/dev/map-shot.jpg - 133.6Kb
Test-URL: http://fragged.org/dev/base64.html
dedizierte CSS-Datei: http://fragged.org/dev/base64.css - 178.1Kb
GZIP-Codierungsserverseite
resultierende Größe an Client gesendet (YSLOW-Komponententest): 59,3 KB
Speichern von an den Client-Browser gesendeten Daten von: 74,3 KB
Schön, aber für kleinere Bilder ist es etwas weniger nützlich, denke ich.
UPDATE: Bryan McQuade, ein Softwareentwickler bei Google, der an PageSpeed arbeitet, hat auf der ChromeDevSummit 2013 zum Ausdruck gebracht, dass data: uris in CSS während seines Vortrags als Render-Blocking-Anti-Pattern für die Bereitstellung von kritischem / minimalem CSS angesehen wird
#perfmatters: Instant mobile web apps
. Siehe http://developer.chrome.com/devsummit/sessions und denken Sie daran - tatsächliche Folie
quelle
PRO:
Cache-Beschränkungen auf Mobilfunkgeräten ...CON:
Einige Bilder sollten eher als Inhalt als als einfache Präsentation behandelt werden und eignen sich daher besser für HTML-IMG-Tags als für CSS-Hintergrundbilder.Antworten:
Es ist keine gute Idee, wenn Ihre Bilder und Stilinformationen separat zwischengespeichert werden sollen. Wenn Sie ein großes Bild oder eine erhebliche Anzahl von Bildern in Ihre CSS-Datei codieren, dauert es länger, bis der Browser die Datei herunterlädt, die Ihre Site ohne Stilinformationen verlässt, bis der Download abgeschlossen ist. Für kleine Bilder, die Sie nicht oft ändern möchten, ist dies eine gute Lösung.
Soweit die base64-Codierung generiert wird:
quelle
Diese Antwort ist veraltet und sollte nicht verwendet werden.
1) Die durchschnittliche Latenz ist 2017 auf Mobilgeräten viel schneller. Https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network
2) HTTP2-Multiplexe https://http2.github.io/faq/#why-is-http2-multiplexed
"Daten-URIs" sollten auf jeden Fall für mobile Websites berücksichtigt werden. Der HTTP-Zugriff über Mobilfunknetze ist mit einer höheren Latenz pro Anforderung / Antwort verbunden. Es gibt also einige Anwendungsfälle, in denen das Jammen Ihrer Bilder als Daten in CSS- oder HTML-Vorlagen für mobile Webanwendungen von Vorteil sein kann. Sie sollten die Nutzung von Fall zu Fall messen. Ich befürworte nicht, dass Daten-URIs überall in einer mobilen Web-App verwendet werden sollten.
Beachten Sie, dass mobile Browser Einschränkungen hinsichtlich der Gesamtgröße der Dateien haben, die zwischengespeichert werden können. Die Limits für iOS 3.2 waren ziemlich niedrig (25 KB pro Datei), werden jedoch für neuere Versionen von Mobile Safari immer größer (100 KB). Behalten Sie also Ihre gesamte Dateigröße im Auge, wenn Sie Daten-URIs einschließen.
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
quelle
Wenn Sie nur einmal auf dieses Bild verweisen, sehe ich kein Problem beim Einbetten in Ihre CSS-Datei. Wenn Sie jedoch mehr als ein Bild verwenden oder es in Ihrem CSS mehrmals referenzieren müssen, können Sie stattdessen eine einzelne Image Map verwenden, aus der Sie dann Ihre einzelnen Bilder zuschneiden können (siehe CSS-Sprites ).
quelle
[emoji] {background-image: url(data:image/png;base64,qwedfcsfrtgyu/=);} [emoji=happy] {background-position: -20px 0px;}
Eines der Dinge, die ich vorschlagen würde, ist, zwei separate Stylesheets zu haben: eines mit Ihren regulären Stildefinitionen und eines, das Ihre Bilder in Base64-Codierung enthält.
Sie müssen das Basis-Stylesheet natürlich vor dem Bild-Stylesheet einfügen.
Auf diese Weise stellen Sie sicher, dass Ihr reguläres Stylesheet so schnell wie möglich heruntergeladen und auf das Dokument angewendet wird. Gleichzeitig profitieren Sie von reduzierten http-Anfragen und anderen Vorteilen, die Data-Uris Ihnen bieten.
quelle
Base64 erhöht die Bildgröße nach GZipped um etwa 10%, aber das überwiegt die Vorteile, wenn es um mobile Geräte geht. Da es bei Responsive Web Design einen allgemeinen Trend gibt, wird dies dringend empfohlen.
W3C empfiehlt diesen Ansatz auch für Mobilgeräte. Wenn Sie die Asset-Pipeline in Rails verwenden, ist dies eine Standardfunktion beim Komprimieren Ihres CSS
http://www.w3.org/TR/mwabp/#bp-conserve-css-images
quelle
Ich bin mit der Empfehlung nicht einverstanden, separate CSS-Dateien für nicht redaktionelle Bilder zu erstellen.
Angenommen, die Bilder dienen der Benutzeroberfläche, dann handelt es sich um das Styling der Präsentationsebene. Wie oben erwähnt, ist es auf jeden Fall eine gute Idee, das gesamte Styling in einer einzigen Datei zu speichern, damit es einmal zwischengespeichert werden kann.
quelle
In meinem Fall kann ich ein CSS-Stylesheet anwenden, ohne mir Gedanken über das Kopieren der zugehörigen Bilder machen zu müssen, da diese bereits darin eingebettet sind.
quelle
Ich habe versucht, ein Online-Konzept für das CSS / HTML-Analysetool zu erstellen:
http://www.motobit.com/util/base64/css-images-to-base64.asp
Es kann:
Kommentare / Vorschläge sind willkommen.
Antonin
quelle
Sie können es in PHP codieren :)
Quelle
quelle
Für Benutzer von Sublime Text 2 gibt es ein Plugin, das den Base64-Code enthält, mit dem wir die Bilder in den ST laden.
Aufgerufenes Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64
PS: Speichern Sie diese vom Plugin generierte Datei niemals, da sie die Datei überschreiben und zerstören würde.
quelle
Danke für die Information hier. Ich finde diese Einbettung nützlich und insbesondere für Mobilgeräte, insbesondere wenn die CSS-Datei der eingebetteten Bilder zwischengespeichert wird.
Um das Leben zu erleichtern, habe ich einige einfache Skripte für die Bearbeitung von Laptops / Desktops erstellt, die hier geteilt werden, falls sie für andere Personen von Nutzen sind, da meine Datei-Editoren dies nicht von Haus aus tun. Ich habe mich an PHP gehalten, da es diese Dinge direkt und sehr gut handhabt.
Sagen Sie unter Windows 8.1 ---
... dort können Sie als Administrator eine Verknüpfung zu einer Batchdatei in Ihrem Pfad erstellen. Diese Batch-Datei ruft ein PHP (CLI) -Skript auf.
Sie können dann im Datei-Explorer mit der rechten Maustaste auf ein Bild klicken und an die Batchdatei senden.
Ok Admiinstartor-Anfrage, und warten Sie, bis die schwarzen Befehls-Shell-Fenster geschlossen sind.
Fügen Sie dann einfach das Ergebnis aus der Zwischenablage in Ihren Texteditor ein ...
oder
Das Folgende sollte für andere Betriebssysteme anpassbar sein.
Batch-Datei ...
Und mit php.exe in Ihrem Pfad ruft das ein PHP (CLI) -Skript auf ...
quelle
Soweit ich recherchiert habe,
Verwendung: 1. Wenn Sie ein SVG-Sprite verwenden. 2. Wenn Ihre Bilder eine geringere Größe haben (max. 200 MB).
Nicht verwenden: 1. Wenn Sie größere Bilder haben. 2. Symbole als SVGs. Da sie schon gut sind und nach der Komprimierung gezippt werden.
quelle