Bilder als Inline-Code im HTML 12


Firefox User dürften hier ein Bild von mir sehen, im Internet Explorer scheint es leider nicht zu funktionieren:

Der Clou dabei: Das Bild wird nicht wie üblich vom Server nachgeladen, sondern ist direkt als Inline Code in den HTML Quelltext eingebunden. Möglich ist das mit sogenannten Data-URLs. Der Quelltext sieht in etwa so aus:

<img src=“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD[…]“ width=“180″ height=“268″>

Ich könnte mir vorstellen, dass es für diese bisher weitgehend unbekannte Möglichkeit, Binärdaten in eine Website einzubinden, interessante Anwendungen gibt. Nur schade, dass der weitverbreitetste Browser dies wieder nicht unterstützt. Wer selber solche URLs generieren möchte, kann hierfür den DataURLMaker verwenden.


Hinterlasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

12 Gedanken zu “Bilder als Inline-Code im HTML

  • Alexander Langer

    In der Tat bekommt der IE 7 es schonmal nicht hin. Die Frage ist, was sich damit in der Praxis erreichen lässt. Evtl. weniger Server-Load bei dynamisch generierten Bildern, weil nicht für jedes Bild ein weiterer Webserverprozess gestartet, das Skript geparst werden muss.. weniger Overhead.. Hm.. müsste man mal nen Benchmark schreiben…

  • Daniel

    @Alexander: aber wird durch die Base64-Codierung das Bild nicht um einiges größer? Dann reletiviert sich das Ganze nämlich…

  • Webmaster Beitragsautor

    @Daniel: Ja, die reine Datenmenge wird grösser. Aber gerade bei kleinen Grafiken, wie auch Johannes meint, könnte das einsparen einer zusätzlichen HTTP Anfrage diesen Nachteil aufwiegen.
    Ich denke aber, dass die Vorzüge viel mehr im kreativen Einsatz dieser Technik liegen. Vorstellen könnte ich mir zum Beispiel eine rein clientseitige Erzeugung von Grafiken.

  • Bo

    Opera Show nutzt diese technik bereits seit längerem um eine Präsentation komplett in einer .html-Datei zu speichern.

    Im “normalen” HTML halt ich das auch fuer wenig sinnvoll. Caching wird verhindert und das Datenvolumen wird größer.

  • seekXL

    @ Bo … der Stand ist mir auch bekannt und in Standard HTML macht es auch keinen Sinn, wobei man ich da nicht meine eigene Fantasie als Grenze des möglichen sehe

  • sascha teske

    nein der entscheidende vorteil ist, dass man alles in einer datei haben kann, was z.b. beim mailen als anhang ganz praktisch ist

    p.s.: bestätigungscodes zu verlangen finde ich übrigens eine unsitte, weil damit alles bemühungen eine website behindertengerecht zu machen im keim erstickt werden. lieber webmaster, denk mal darüber nach.

  • steve

    den comment von sascha kann ich nur unterstützen: bestätigungscodes sind eine absolute unsitte…danke das es mal ausgesprochen wird