was Verrücktes: Sind Bilder als Code in HTML Dokument möglich?

[Fallaxia]

Hi Leute,

ich frage mich gerade ob es wohl (technisch) möglich wäre mit bestehenden Werkzeugen, die jeder gängige Browser an Bord hat, Bilder als Code in das HTML Dokument einzufügen.

Also ich meine nicht per <img> Tag eine externe Quelle für das Bild zu spezifizieren, sondern das Bild als solches direkt als z.B. Binär in das HTML Dokument einzufügen und z.B. mittels Java Script über den Browser darstellen zu lassen.

Hat da jemand eine Idee ob sowas überhaupt möglich ist?

Klar, ist ziemlich sinnfrei in den allermeisten Fällen, aber interessant zu wissen ist es.

 

[thecain]

base64 encodiert sogar ohne javascript

http://en.wikipedia.org/wiki/Data_URI_scheme

 

[Toms]

http://www.golem.de/news/better-por...ildformat-soll-jpeg-abloesen-1412-111012.html

Wird mittels Javascript erzeugt

 

[Umbel]

Klar, was denkst du wie Browser sonst Bilder darstellen? Sie nehmen die gelieferten Hex/Binärdaten und stellen es mit dem passenden Codec da.

 

[tnoay]

Also ich meine nicht per <img> Tag eine externe Quelle für das Bild zu spezifizieren, sondern das Bild als solches direkt als z.B. Binär in das HTML Dokument einzufügen und z.B. mittels Java Script über den Browser darstellen zu lassen.

firefox nutzt z.b. Mozjpeg, is sicherlich über java script ansprechbar

 

[Fallaxia]

Gut zu wissen, dass es geht.

Interessant dürfte sowas vor allem auf Plattformen wie ebay sein, denn auf die Weise kann man Bilder oder sogar ein ganzes Template mit vielen kleinen Bildchen komplett ohne externen Webspace / Hoster darstellen und macht das Angebot und dessen Darstellung somit unabhängig von der Erreichbarkeit externer Server auf denen die Inhalte liegen.

 

[tnoay]

puh ich weiß nicht. das bedeutet extra arbeit, die webseite aktuell zu halten, zudem muss für jede einzelne webseite der code verändert werden.

außer man legt code, statt ein bild als referenz irgendwo im netz ab. kommt aber dann am ende aufs gleiche raus

 

[Speedy.]

Das Stichwort mit dem besten Erfolg nennt sich Data URI. Einen sehr guten Artikel findest du bei CSS-Tricks:
http://css-tricks.com/data-uris/

Es gibt Onlinetools, welche hochgeladene Bilder (nur PNG, GIF oder JPG) mit einer gewissen Maximalgröße konvertieren können. Du verwendest nach wie vor den <img>-Tag, nur dass du statt das Bild im Dateisystem die Date URI angibst.

Vorteil: Geschwindigkeit. Der Browser macht für jede externe Ressource einen neuen Request, ebenso für Bilder. Wenn die Bilder direkt eingebettet sind, fällt dieser Request weg.

Nachteil: der Quellcode wird ziemlich hässlich. Bei kleinen Grafiken und Icons mag es noch gehen, aber willst du ewig große Naturaufnahmen in eine Data URI umwandeln, wirst du wahnsinnig. Das sind dann tausende Zeilen Code, dass willst du nicht in deinem HTML oder CSS-Dokument haben. Darum würde ich reguläre Bilder weiterhin als externe Ressourcen verlinken und kleinere Dateien umwandeln.

 

[nbzklr]

Leute, denkt ihr wirklich, dass man dort für jedes einzelne Bild die Data URL manuell an alle betroffenen Stellen kopiert?

Selbst wenn man nur "hobbymäßig" Webentwicklung betreibt, sollte man einen großen Teil seiner Arbeit automatisieren.
Das heißt, man nimmt ein gescheites build tool, das die Bilder automatisch inlined. Arbeitsaufwand = 0 und das wichtigste ist, man hat sich einen http request gespart! (das ist übrigens auch der einzige Grund wieso man sowas macht)

 

[Daaron]

Leute, denkt ihr wirklich, dass man dort für jedes einzelne Bild die Data URL manuell an alle betroffenen Stellen kopiert?

Wenn es um eBay-Verkauf geht? Ja. Da lässt sich nicht viel automatisieren, außer du schreibst eine komplette Schnittstelle für die API.

...und das wichtigste ist, man hat sich einen http request gespart! (das ist übrigens auch der einzige Grund wieso man sowas macht)

Bei einer komplexen Grafik macht man das trotzdem nicht, denn Base64-codierte Bilder sind signifikant größer als ihre reguläre binäre Repräsentation.
Man KANN so etwas hier machen <img src="data:image/gif;base64,gww18FBEikHcgNkMRW5lmkJI/teaa0wNiOhshFFuiRSVpL34n..." alt="">, aber das lohnt maximal für kleine Icons, und selbst da ist eine CSS Sprite deutlich besser. Riesige Base64-Images verzögern den Seitenaufbau, also das reine Rendering des HTML-Codes, spürbar.

Base64-Images sind toll... für CSS an Stellen, wo Sprites nicht funktionieren und auf Maschinen, die kein SPDY beherrschen. Für alle Fälle, wo man SPDY verwenden kann, sind sowohl diese Base64-Tricks als auch Sprites vollkommen für die Tonne.

 

[Fallaxia]

Naja, es wäre doch z.B. sehr sinvoll für Leute, die bei Ebay und Co. ihre Angebote reinhaun und sich etwas mehr Mühe geben als der 0815-User mit 2 Bildern aus dem Ebay Katalog.

Nur eben diese User müssen für ihr Template, die Icons und ggf. die Artikelbilder gezwungener Maßen einen externen Webhoster/Server haben, der die Grafiken auch bereit hält. Das ist mit Kosten, oder Werbung oder anderen Einschränkungen verbunden. For-free hat wohl niemand Webspace-Highspeed-Flats-100%-Uptime für Auktionen anzubieten.

Mit Data Uris als Base64 Code die Bilder einzubinden würde es also einwandfrei ermöglichen Templates und Bilder ohne jegliche externe Quellen als Ebay Angebot einzustellen. Das ist doch schon ein nennenswerter Vorteil.

Zumal es auch keine Downtime/Verbindungsprobs zu externen Quellen geben kann.

 

[Daaron]

Fragt sich, ob eBay so etwas zulässt. Übermittelter Template-Code wird teilweise gefiltert, um z.B. JavaScript zu entfernen. Sobald eBay in den Templates eine Zeichen- bzw. Größenbeschränkung drin hat, wars das.
Probieren kann man es auf jeden Fall, aber am Ende könnte man auch n Euro im Monat bei Uberspace lassen und die ganzen Grafiken dort deponieren.