Image Data URIs mit PHP

Image Data URIs sind für manche Anwendungen eine feine Sache. Wozu braucht man die kleinen Helfer? Einfach ausgedrückt: direktes Einbetten von Bildern in eine Seite oder CSS ohne einen zusätzlichen HTTP-Request zu verursachen. Nähere Informationen gibt es bei Wikipedia, besonders geeignet sind die Teile natürlich um kleine Icons direkt einzubetten. Was natürlich nicht schön ist, ist die Tatsache das man zum Beispiel eine Grafik erstmal base64 encoden müsste, um sie zu verwenden. Besonders unschön wird es, wenn man merkt, das Grafiken zu aktualisieren sind.

Beispiel eines Bildes als Data URI

Clever wie wir sind, und auch immer interessiert an der Beschleunigung der Auslieferung einer Webseite kann man das ganze natürlich auch mittels PHP schnell in eine Seite integrieren:

// A few settings
$image = 'logo.jpg';
$imageData = base64_encode(file_get_contents($image));
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;
echo '';

Die %27 sind hierbei übrigens die ‚ – einfach eine Möglichkeit den Image-Src trotzdem noch valide auszugeben, ohne sich in PHP die Finger brechen zu müssen. Wenn man das Ganze in eine Function verpackt und diese in einem Projekt allen Seiten zur Verfügung stellt, kann man mit Sicherheit einen guten Performance-Gewinn erzielen!

Ähnliche Beiträge

Was bringt Smarty 3.0 ? Ich gebe zu, ein wenig Kaffeesatzleserei ist es schon, zumal es zumindest offiziell nur eine Machbarkeitsanalyse von Smarty 3 gibt, aber interessant i...
mysql_connect vs. mysql_pconnect Es gibt durchaus Blog-Beiträge, von denen man glaubt oder hofft, dass man sie eigentlich nicht schreiben braucht, dieser ist einer davon! Da ich mich ...
Test-Driven Development mit PHP Mit phpUnit gibt es bereits seit Jahren eine Methode zur testgetriebenen Entwicklung in PHP. Gerade bei der agilen Software-Entwicklung ist diese Meth...
Die Wunderwelt von PHP und cURL PHP kann eine Menge, und eine Menge sogar doppelt bis dreifach. Das öffnen entfernter Dateien kann mittels "normalem" Dateihandling auch über die soge...

18 Kommentare

  • Ich bekomm leider immer noch Fehler. :-(

    Ich nutz jetzt die in Deinem verlinkten Wiki Artikel beschriebene Möglichkeit. Ist da ein großer Unterschied?

  • Seht ihr, so etwas passiert wenn man seinen Code nicht ausprobiert ;) Ich habs jetzt zwar immer noch nicht ausprobiert, aber den Code verschlimmbessert! ;)

  • Also entweder ihr versteht mich nicht oder – was ich eher vermute – ich stehe ganz schön auf der Leitung.

    $variable = „mein Wert“;
    echo „Test, $variable“; // Test, mein Wert
    echo ‚Test, $variable‘; // Test, $variable

    Doppelte Anführungszeichen = Variable wird geparst.
    Einfache Anführungszeichen = Variable wird nicht geparst.

    So habe ich es gelernt, so war es schon immer. Oder nicht?

    Im obigen Beispiel steht $src zwischen einfachen Anführungszeichen, dementsprechend wird die Variable nicht geparst sondern einfach ausgegeben, als wenn es Text wäre. Das hat ja auch mein Test ergeben.

    Mittlerweile bin ich leicht verwirrt, wäre nett, wenn jemand die Güte hätte Licht ins Dunkel zu bringen :)

  • @Enno Wenn da nur ein $str ausgegeben wird, stimmt was nicht mit deiner PHP Konfiguration oder sonst etwas. Kann es sein das da PHP erst gar nicht anspringt? ;)
    @Markus hat natürlich recht, richtiger wäre an der Stelle ein finfo_open(FILEINFO_MIME_TYPE);

  • Nette Sache, hab gleich mal ein wenig rumgespielt. mime_content_type ist allerdings veraltet und man sollte auf finfo_open(FILEINFO_MIME_TYPE); ist es glaub ich, setzen.

  • Ich hatte in den Kommentar HTML-Code eingefügt, der nicht übernommen wurde.
    Ich verstehe die Sache mit dem %27, nicht so richtig. Warum nimmst du für das echo nicht doppelte Anführungszeichen („) und für das Attribut src dann einfache (‚)? Damit würdest du doch das %27-Gedöns leichter umgehen, oder?

  • @Tom: Ich gehe mal davon aus das man in der heutigen Zeit alle Seiten cached die man ausliefert ;)
    @Enno: Wer hat wen gefressen? ;) Ansonsten: da sind schon ‚ vom echo des PHP

  • Dann werden die Bilder bei jedem Aufruf neu codiert. Belastet den Server ja unnötig.
    Um hier noch die Performance zu erhöhen müsste ein Cache der base64-Daten dazu, oder?

Schreibe einen Kommentar