Data URIs

Wussten Sie schon, dass Sie bei der Verwendung eines <img>-Elements in HTML oder der Deklaration eines Hintergrundbilds in CSS nicht auf eine externe Bilddatei verlinken müssen? Sie können die Bilddaten direkt in das Dokument mit Data-URIs einbetten.

(Es ist gleichermaßen korrekt, „Data URL“ zu sagen, was ich, glaube ich, bevorzuge.)

Mit CSS sieht es so aus

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

Mit HTML sieht es so aus

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">

Das Format, um genau zu sein

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Im Grunde eine super lange Zeichenkette von Kauderwelsch-Zeichen. Für den Browser ist es natürlich kein Kauderwelsch. Diese Daten werden als der Dateityp interpretiert, für den Sie sie ausgeben.

Sie können eine wirklich dumme Demo-Seite hier sehen. Ich werde die wichtigen Teile als Nächstes behandeln.

Warum sollte man das tun?

Der größte Grund: Es spart HTTP-Anfragen. Abgesehen von der reinen Dokumentengröße ist dies der wichtigste Faktor dafür, wie schnell eine Seite geladen wird. Weniger = besser.

Wie bekommt man den Code?

Verwenden Sie dieses Online-Konvertierungstool. Es ist das schönste, das ich gefunden habe. Hier ist ein weiteres Drag-and-Drop-Tool.

Beachten Sie auch, dass Base64 nicht das einzige mögliche Format für eine Data-URI ist und manchmal ist es nicht einmal eine gute Idee. ASCII ist eine weitere Möglichkeit, bei der der Code im Wesentlichen URL-codiert oder UTF-8 ist.

Browserkompatibilität

Data-URIs funktionieren nicht in IE 5-7, werden aber in IE 8 unterstützt. Sie könnten

• eine nur für IE geltende Stylesheet verwenden, um Bilder einzufügen, oder,
• nur für progressive Verbesserung verwenden, bei der es akzeptabel ist, kein Bild zu haben, oder,
• sich nicht darum kümmern
• Diesen Artikel über eine alternative Technik lesen, die funktioniert.

Wichtige Hinweise

• Die Größe des eingebetteten Codes ist etwas größer als die Größe der Ressource selbst. GZip-Komprimierung hilft.
• IE8 hat die niedrigste maximale Data-URI-Größe von 32768 Byte. (HEY?!?! Da ist schon wieder diese verrückte Zahl.)
• Es ist schwierig, eine Website mit eingebetteten Data-URIs für alles zu verwalten. Es ist einfacher, ein Bild zu aktualisieren und zu ersetzen.
• Wenn Sie PHP verwenden (oder PHP als CSS), könnten Sie Data-URIs auf der Fliege erstellen, wie hier: <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
• Sie sollten dies nur in Dokumenten verwenden, die stark zwischengespeichert werden, wie z. B. Ihr CSS. Eine CSS-Datei, die 300 KB statt 50 KB groß ist, ist in Ordnung, wenn sie 6 HTTP-Anfragen spart, aber nur, wenn diese CSS-Datei genauso gut zwischengespeichert wird wie die Bilder. Das Setzen von langen Ablaufdaten für CSS-Dateien sollte helfen.
• Data-URIs sind nicht auf Bilder beschränkt, sie könnten buchstäblich alles sein.
• <canvas> könnte die Coolness all dessen obsolet machen, wenn es mehr unterstützt wird und Leute coole Tools dafür entwickeln.
• Compass hat einen Helfer.

Zur Leistung

Relevante Forschung von Peter McLachlan

… bei der Messung der Leistung von Hunderttausenden von mobilen Seitenaufrufen ist das Laden von Bildern mithilfe einer Data-URI im Durchschnitt 6x langsamer als die Verwendung eines binären Quelllinks wie eines img-Tags mit einem src-Attribut!