it-swarm.com.de

Ist das Einbetten von Hintergrundbilddaten in CSS gut oder schlecht?

Ich suchte nach der Quelle eines greasemonkey-Benutzerskripts und bemerkte Folgendes in ihrem 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 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 jedoch zuvor nicht gesehen hatte, dachte ich über ihre Verwendung nach und es scheint aus mehreren Gründen ansprechend zu sein:

  1. Dadurch wird die Anzahl der HTTP-Anforderungen beim Laden der Seite reduziert, wodurch die Leistung verbessert wird
  2. Wenn kein CDN vorhanden ist, wird der Datenverkehr reduziert, der durch Cookies erzeugt wird, die neben Bildern gesendet werden
  3. CSS-Dateien können zwischengespeichert werden
  4. 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 ...

Ist dies eine gute oder schlechte Praxis? Warum würden Sie sie nicht verwenden und welche Tools würden Sie verwenden, um die Images zu encodieren?

update - Testergebnisse

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

UPDATE: Bryan McQuade, ein Software-Ingenieur bei Google, der an PageSpeed ​​arbeitet, äußerte auf der ChromeDevSummit 2013, dass data: uris in CSS als Rendering-blockierendes Anti-Pattern für die Bereitstellung von kritischem/minimalem CSS während seines Vortrags #perfmatters: Instant mobile web apps angesehen wird. Siehe http://developer.chrome.com/devsummit/sessions und beachte das - tatsächliche Folie

466

Dies ist keine gute Idee, wenn Ihre Bilder und Stilinformationen separat zwischengespeichert werden sollen. Wenn Sie ein großes Bild oder eine beträchtliche Anzahl von Bildern in Ihre CSS-Datei kodieren, dauert es länger, bis der Browser die Datei heruntergeladen hat, die Ihre Site verlässt, ohne dass die Stilinformationen vorliegen, bis der Download abgeschlossen ist. Für kleine Bilder, die Sie nicht häufig wechseln möchten, ist dies eine gute Lösung.

soweit die base64-Codierung erzeugt wird:

162
poop a birck

Diese Antwort ist veraltet und sollte nicht verwendet werden.

1) Die durchschnittliche Latenzzeit ist 2017 auf dem Handy 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 in Betracht gezogen 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 Stauen Ihrer Bilder als Daten in CSS- oder HTML-Vorlagen für mobile Web-Apps von Vorteil sein könnte. Sie sollten die Nutzung von Fall zu Fall messen. Ich plädiere nicht dafür, dass Daten-URIs überall in einer mobilen Web-App verwendet werden sollten.

Beachten Sie, dass für mobile Browser die Gesamtgröße der Dateien, die zwischengespeichert werden können, eingeschränkt ist. Die Grenzwerte für iOS 3.2 waren relativ niedrig (25 KB pro Datei), werden jedoch für neuere Versionen von Mobile Safari immer größer (100 KB). Achten Sie beim Einschließen von Daten-URIs darauf, die Gesamtgröße Ihrer Dateien im Auge zu behalten.

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

55
Mike Brittain

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 mehrmals in Ihrem CSS darauf verweisen müssen, sollten Sie stattdessen eine einzelne Imagemap verwenden. Anschließend können Sie Ihre einzelnen Bilder ausschneiden (siehe CSS Sprites ).

23
Gumbo

Eines der Dinge, die ich vorschlagen würde, ist zwei separate Stylesheets: Eines mit Ihren regulären Style-Definitionen und eines, das Ihre Bilder in base64-Kodierung enthält.

Das Basis-Stylesheet muss natürlich vor dem Bild-Stylesheet eingefügt werden.

Auf diese Weise stellen Sie sicher, dass Ihr reguläres Stylesheet heruntergeladen und sobald wie möglich auf das Dokument angewendet wird. Gleichzeitig profitieren Sie von reduzierten http-Anforderungen und anderen Vorteilen, die data-uris bietet.

21
ximi

Base64 erhöht die Bildgröße nach GZipped um etwa 10%, was jedoch die Vorteile bei mobilen Anwendungen übertrifft. Da es beim Responsive Webdesign einen allgemeinen Trend gibt, wird dies dringend empfohlen.

W3C empfiehlt diesen Ansatz auch für mobile Geräte. Wenn Sie in Rails eine Asset-Pipeline verwenden, ist dies eine Standardfunktion beim Komprimieren von CSS

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

20
Greg

Ich stimme der Empfehlung nicht zu, separate CSS-Dateien für nicht redaktionelle Bilder zu erstellen.

Angenommen, die Bilder dienen UI-Zwecken, der Darstellungsebene der Präsentationsschicht. Wie bereits erwähnt, ist es auf jeden Fall eine gute Idee, wenn Sie mobile Benutzeroberflächen erstellen, wenn Sie alle Formatierungen in einer einzigen Datei speichern, damit sie einmal zwischengespeichert werden können.

4
tim

Sie können es in PHP codieren :)

<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

3
ucefkh

In meinem Fall kann ich ein CSS-Stylesheet anwenden, ohne sich um das Kopieren der verknüpften Bilder kümmern zu müssen, da diese bereits eingebettet sind.

3
Rolf

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:

  • Laden Sie HTML/CSS-Dateien herunter und analysieren Sie sie, extrahieren Sie die href/src/url-Elemente
  • Ermitteln Sie die Komprimierungsdaten (gzip) und die Größe der URL
  • Vergleichen Sie Originaldatengröße, Base64-Datengröße und komprimierte Base64-Datengröße
  • Konvertieren Sie die URL (image, font, css, ...) in ein base64-Daten-URI-Schema.
  • Anzahl der Anforderungen zählen, die durch Daten-URIs gespart werden können

Kommentare/Vorschläge sind willkommen. 

Antonin

3
Antonin Foller

Ein bisschen etwas für Benutzer von Sublime Text 2, gibt es ein Plugin, das den base64-Code angibt, den wir die Bilder in den ST laden.

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

PS: Speichern Sie diese vom Plugin generierte Datei niemals, da diese die Datei überschreiben und zerstören würde.

2

Soweit ich recherchiert habe, 

Verwende 1. Wenn Sie ein svg-Sprite verwenden ... 2. Wenn Ihre Bilder eine geringere Größe haben (max. 200 MB).

Verwenden Sie nicht: 1. Wenn Sie größere Bilder haben ... 2. Icons als SVG. Da sie schon gut sind und nach der Kompression gekippt werden.

0

Vielen Dank für die Informationen hier .. Ich finde diese Einbettung nützlich und insbesondere für mobile Geräte, besonders wenn die css-Datei der eingebetteten Bilder zwischengespeichert wird.

Um das Leben einfacher zu machen, da meine Datei-Editoren dies nicht nativ erledigen, habe ich ein paar einfache Skripts für die Bearbeitung von Laptops/Desktops erstellt. Ich habe mich an PHP gehalten, da es diese Dinge direkt und sehr gut handhabt.

Unter Windows 8.1 sagen Sie --- 

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

... dort können Sie als Administrator eine Verknüpfung zu einer Batchdatei in Ihrem Pfad herstellen. Diese Batchdatei ruft ein PHP (CLI) Skript auf. 

Sie können dann mit der rechten Maustaste auf ein Bild im Datei-Explorer und SendT to the batchfile klicken.

Ok Admiinstartor-Anfrage, und warten Sie, bis das schwarze Befehlsshellfenster geschlossen wird.

Dann fügen Sie einfach das Ergebnis aus der Zwischenablage in Ihren Texteditor ein ...

<img src="|">

oder 

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

Folgendes sollte für andere Betriebssysteme anpassbar sein.

Batchdatei ...

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

Und mit php.exe im Pfad ruft das PHP-Skript (cli) auf ...

<?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));

?>
0
PaulANormanNZ