Ist das Einbetten von Hintergrundbilddaten in CSS als Base64 gut oder schlecht?

Ist es nicht eine gute Idee, wenn Sie möchten, dass Ihre Bilder und style-Informationen werden separat zwischengespeichert. Auch wenn Sie Kodieren ein großes Bild oder eine signifikante Anzahl von Bildern in der css-Datei der browser länger zum download der Datei Ihre Website verlassen, ohne die 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 Erzeugung der base64-Codierung:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
• http://www.greywyvern.com/code/php/binary2base64 (aus dem link mit kleinen tutorials unten)

InformationsquelleAutor der Antwort poop a birck

Hinweis wenn Sie das Bild nur einmal, ich sehe kein problem, binden Sie ihn in Ihre CSS-Datei. Aber sobald Sie mehr als ein Bild oder auf Sie verweisen müssen es mehrmals in der CSS, die Sie möglicherweise verwenden Sie ein einzelnes Bild anzeigen, statt Sie können dann schneiden Sie Ihre einzelnen Bilder aus (siehe CSS-Sprites).

InformationsquelleAutor der Antwort Gumbo

Base64-fügt über 10%, um die Größe des Bildes nach dem Gzip-aber das überwiegt die Vorteile, wenn es darum geht, mobile. Da gibt es einen Allgemeinen trend mit responsive web-design, ist es sehr zu empfehlen.

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

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

InformationsquelleAutor der Antwort Greg

In meinem Fall es mir erlaubt, für ein CSS-stylesheet, ohne sich Gedanken über das kopieren von verknüpften Bildern, da Sie bereits eingebettet.

InformationsquelleAutor der Antwort Rolf

Kodieren Sie es 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

InformationsquelleAutor der Antwort ucefkh

Danke für die Informationen hier.
Ich finde diese Einbettung nützlich und besonders für die mobile vor allem mit den eingebetteten Bildern' css-Datei zwischengespeichert werden.

Um das Leben leichter machen, wie meine Datei editor(s) nicht nativ damit umgehen, ich habe ein paar einfache Scripte für laptop/desktop-editing-Arbeit, hier im Fall sind Sie jeder verwenden, um jedes andere Unternehmen. Ich habe fest mit php, wie es ist der Umgang mit diesen Dingen, direkt und sehr gut.

Unter Windows 8.1 sagen---

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

... es als Administrator stellen Sie eine Verknüpfung zu einer batch-Datei in Ihrem Pfad.
Diese batch-Datei ruft eine php - (cli -) Skript.

Können Sie dann mit der rechten Maustaste ein Bild im Datei-explorer, und SendTo das batchfile.

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

Dann einfach fügen Sie das Ergebnis über die Zwischenablage in Ihre in Ihre text-editor...

<img src="|">

oder

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

Folgenden sollte anpassungsfähig sein, für die anderen 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 ruft eine php - (cli -) script...

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

?>

InformationsquelleAutor der Antwort PaulANormanNZ