Ist die Einbettung von hintergrund Bild Daten in CSS als Base64-gute oder schlechte Praxis?

https://stackoverflow.com/questions/1124149

13-09-2019
|

Frage

Ich war auf der Suche an der Quelle eines greasemonkey userscript und bemerkte wie die folgenden in Ihre css:

.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 möchte bundle alles, was es kann, innerhalb der Quelle im Gegensatz zum host auf einem server, das ist offensichtlich genug.Da ich aber nicht gesehen hatte diese Technik, die zuvor, als ich seine Verwendung und es scheint attraktiv für eine Reihe von Gründen geben:

Es reduziert die Anzahl der HTTP-Anforderungen auf Seite zu laden, und erhöht so die Leistung
Wenn kein CDN, dann wird es reduzieren Sie die Menge des Verkehrs, die durch cookies gesendet werden neben den von Bilder
CSS-Dateien zwischengespeichert werden können
CSS-Dateien können GZIP

Wenn man bedenkt, dass der IE6 (zum Beispiel) hat Probleme mit cache für hintergrund-Bilder, wie es scheint, ist es nicht die schlechteste Idee...

So, ist das eine gute oder schlechte Praxis ist, warum WÜRDEN Sie NICHT verwenden es und welche tools würden Sie verwenden, um die base64-codieren der Bilder?

update - die Ergebnisse der Tests

Test mit Bild: http://fragged.org/dev/map-shot.jpg - 133.6 Kb
test URL: http://fragged.org/dev/base64.html
dedicated CSS-Datei:http://fragged.org/dev/base64.css - 178.1 Kb
GZIP-Codierung server-Seite
resultierende Größe gesendet zu client (YSLOW Komponenten-test): 59.3 Kb
Das speichern von Daten, die an client-browser: 74.3 Kb

Schön, aber es wird etwas weniger nützlich für kleinere Bilder, denke ich.

UPDATE:Bryan McQuade, a software engineer at Google, working on PageSpeed, ausgedrückt in ChromeDevSummit 2013, data: - uris in CSS wird als render-blocking anti-pattern, die für die Bereitstellung wichtiger/minimal CSS während seiner Rede #perfmatters: Instant mobile web apps.Finden http://developer.chrome.com/devsummit/sessions und denken Sie daran - aktuelle Folie

Lösung

Es ist keine gute Idee, wenn Sie möchten, dass Ihre Bilder und style-Informationen zwischengespeichert werden separat.Auch wenn Sie codieren ein großes Bild oder eine erhebliche Anzahl der Bilder in der css-Datei, es wird nehmen länger browser zu Datei herunterladen, die Ihre Website verlassen, ohne den style-Informationen, bis der download abgeschlossen ist.Für kleine Bilder, dass Sie nicht beabsichtigen, ändern sich oft, wenn überhaupt, ist es eine feine Lösung.

soweit die Generierung der base64-Codierung:

http://b64.io/
http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
http://www.greywyvern.com/code/php/binary2base64 (aus Verknüpfung mit kleinen tutorials unterhalb)

Andere Tipps

Diese Antwort ist veraltet und sollte nicht verwendet werden.

1) Durchschnittliche Latenz ist viel schneller auf mobile im Jahr 2017. 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" sollte auf jeden Fall berücksichtigt werden, für mobile Websites.HTTP-Zugang über das Mobilfunknetz kommt mit höherer Latenz pro Anforderung/Antwort.So gibt es einige Anwendungsfälle, bei denen jamming Ihre Bilder als Daten in CSS oder HTML-Vorlagen von Vorteil sein könnte auf mobilen web-apps.Sie sollte Messen die Nutzung auf einem Fall-durch-Fall Grundlage-ich-ich bin nicht dafür, dass Daten-URIs sollte verwendet werden überall in einer mobilen web-app.

Beachten Sie, dass mobile Browser haben Einschränkungen auf die Gesamtgröße der Dateien, die zwischengespeichert werden können.Grenzen für iOS 3.2 waren ziemlich niedrig (25K pro Datei), sondern immer größer (100K) für neuere Versionen von Mobile Safari.So werden sicher zu halten ein Auge auf Ihre gesamte Datei Größe, wenn darunter Daten-URIs.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Hinweis wenn Sie das Bild nur einmal, ich sehe nicht ein problem Einbettung in Ihre CSS-Datei.Aber sobald Sie mehr als ein Bild oder auf Sie verweisen müssen es mehrmals in Ihrem CSS, könnten Sie erwägen, ein einzelnes Bild anzeigen, anstatt können Sie dann Ihre Ernte einzelne Bilder aus (siehe CSS-Sprites).

Eines der Dinge, die ich würde vorschlagen, zwei separate stylesheets:Mit Ihrem normalen Stil-Definitionen und ein anderes, dass enthält Ihre Bilder in base64-encoding.

Dann schließen Sie das Basis-stylesheet, bevor das Bild stylesheet natürlich.

Auf diese Weise werden Sie versichern, dass Sie regelmäßige stylesheet heruntergeladen und angewendet, so bald wie möglich zu dem Dokument, doch zugleich profitieren Sie von reduzierten http-Anfragen und weitere Vorteile von Daten-uris geben Sie.

Base64-fügt über 10% zum Bild Größe nach GZipped aber das überwiegt der nutzen, wenn es darum geht, mobile.Da gibt es einen Allgemeinen trend mit responsive web design, es ist sehr zu empfehlen.

W3C empfiehlt auch dieser Ansatz für mobile und wenn Sie die asset-pipeline in rails, dies ist ein Standard-feature bei der Komprimierung von css

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

Ich bin nicht einverstanden mit der Empfehlung zum erstellen von separaten CSS-Dateien für nicht-editorial-Bilder.

Vorausgesetzt, die Bilder sind für UI-Zwecke, es ist Präsentation-layer-Design, und, wie oben erwähnt, wenn Sie im mobile UI ist seine definitiv eine gute Idee zu halten Sie styling in einer einzigen Datei, so dass es zwischengespeichert werden können einmal.

In meinem Fall hat es mir ermöglicht für ein CSS-stylesheet, ohne sich Gedanken über das kopieren von zugehörigen Bildern, da Sie bereits eingebettet.

Ich habe versucht, ein online-Konzept der CSS - /HTML-analyzer:

http://www.motobit.com/util/base64/css-images-to-base64.asp

Sie können:

Download und parse die HTML - /CSS-Dateien, extrahieren href/src/url Elemente
Erkennen-Komprimierung (gzip) und die Größe Daten auf die URL
Vergleichen Sie in original-Größe der Daten, die base64-Daten Größe und Gzip-base64-Daten Größe
Konvertieren Sie die URL (in Bild -, Schrift -, css, ...) in eine base64-Daten-URI-Schema.
Zählt die Anzahl der Anfragen, was kann gespart werden durch Data-URIs

Kommentare/Vorschläge sind willkommen.

Antonin

Sie können codieren in PHP :)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Quelle

Sie bringen eine bit-für Benutzer von Sublime Text 2 ist ein plugin, das gibt die base64-code, laden wir die Bilder, die in der ST.

Genannt Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

PS:Nie speichern Sie diese Datei vom plugin erzeugt würde, weil die Datei überschreiben und zerstören würde.

Danke für die Informationen hier.Ich finde diese Einbettung nützlich und besonders für die mobile vor allem mit dem eingebettete Bilder' css-Datei zwischengespeichert wird.

Um das Leben leichter machen, da meine Datei editor(s) nicht nativ damit umgehen, ich habe ein paar einfache Skripte für laptop/desktop-Bearbeitung, teilen sich hier, in Fall Sie sind, jegliche Nutzung zu einem anderen.Ich habe fest mit php wie ist der Umgang mit diesen Dingen direkt und sehr gut.

Unter Windows 8.1 und sagen---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

...da Sie als Administrator herstellen können, die eine Verknüpfung zu einer batch-Datei in Ihrem Pfad.Diese batch-Datei ruft eine php (cli) script.

Sie können dann mit der rechten klicken Sie auf ein Bild im Datei-explorer, und SendTo der Protokolldatei.

Ok Admiinstartor Anfrage, und warten Sie, bis das schwarze Kommando-shell-Fenster zu schließen.

Dann einfach nur einfügen, das Ergebnis über die Zwischenablage in Ihr in Ihre text-editor...

<img src="|">

oder

 `background-image : url("|")`

Folgendes sollte anpassungsfähig sein, für andere OS.

Batch-Datei...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

Und mit php.exe in Ihrem Weg, das fordert ein php-cli () Skript...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Soweit ich das recherchiert haben,

Verwenden :1.Wenn Sie ein svg-sprite.2.Wenn Ihre Bilder sind von geringerer Größe (max 200mb).

Nicht Verwenden :1.Wenn Sie größere Bilder.2.Icons als svg ist.Sie sind schon gut und gzipped nach der Komprimierung.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow