Image Source
Von fehlerhaft generiertem Code beim Einbau eines Bilds
Wer auf seiner Internetpräsenz ein Bild oder gar ein Video einbauen will, kann schnell an seine Grenzen stoßen: Das Bild ist zu groß, zu klein, das Video lässt sich nicht öffnen oder im schlimmsten Fall erscheint stattdessen nur ein seltsamer, für den Laien unleserlicher Code! Wer ein Profil in einem sozialen Netzwerk hat oder ein eigenes Blog führt, sollte sich eigentlich darauf verlassen können, dass eine solche Aktion automatisch von diesem ausgeführt wird. Dass diese aber keineswegs eine Garantie dafür bieten, dass das Einfügen eines Bilds auch tatsächlich zufriedenstellend funktioniert, zeigt das Beispiel eines Rundschreibens auf Myspace, wobei dieses Netzwerk sage und schreibe fast 15 Seiten unnützen Code produzierte — mit dem Ergebnis, dass das Bild dann doch nicht erschien!
Grafiken und Bilder werden mit dem HTML-Tag <img> eingebaut, dazu ist mittels des HTML-Parameters <img src=”Dateiname.Format”> auf die Bildquelle, die „Image Source“ zu verweisen. HTML-Editoren bzw. -Generatoren wie Dreamweaver oder FrontPage, Content-Management-Systeme (CMS) sowie soziale Netzwerke und Blogs, die meist auf CMS aufbauen, übernehmen das Erstellen des Codes automatisch. Oder sollten es zumindest! Dass dem nämlich keineswegs immer so ist, zeigt das Beispiel eines Rundschreibens des ansonsten von mir sehr geschätzten Musikers Otis Taylor: Anstatt das von ihm gewünschte Bild einzubauen, generierte Myspace sage und schreibe fast 15 Seiten sinnlosen Code, der hier verkürzt wiedergegeben wird — das Einfügen des kompletten Codes hätte diese Notiz gesprengt! Eine Druckversion (PDF, 432 KB) habe ich aber hochgeladen und weitere Beispiele von kuriosen HTML-Fehlern dürfen mir gern zugesandt werden.
Hier also der Auszug:
<img src=”..image/png;base64,iVBORw0KGgoAAAANSUhEU
gAAALQAAADpCAIAAAACv4pMAAAgAElEQVR4nOy89XMceZboO3/Eu2+
mbUmFArvdONOzswM9bRIWM6hEZgZZlmTJYkaDbIvJ1G5j
y2K2ZMtscQnNTLKoKvmc90PJ1N0T27vx5k7EvRNxQlHKrKzMyv
Opw9/8DdAcMAAscAgMAo0cg8ggAgfAAbAALADHcMBwwAALQAAQABQC
wwDHcEjN7WIQGAQKgXYIAwwDLAUcwyHDIcO8FQ4ZDhjgGGCZt5
+PDCKNSCKQyNHIMfjB2VlwXAyH4PiouWMZxynm9v5b/n+X3/wi
HByHH+mGZRx8AAtAIZAADDq0ziD1VmEILM4hwiCwDLAMADUH1n8FB8f
NwUEjRyPH/QQO9t9w/EvgYObuPveBZn+mm7dwcAAsAovAIYMMiQyBFIkMiQ
yN6DA5HIcchw4tvrMrb/+dI+MDOBjgGIfi36L5ixcwd7nc3K4PDv83HP974OA
+hMOhEga
AeQ8Hh+DQPYNIIkMgY0eKQIZAhkQgEWjEt5QA7bAr8O7YfwzHe8PwTv0
fk/EBHMDB3OFz8q+/if+nym/e3f13cHC/AMd7w+4wDzQi/bHl+Dk
czFvL8Q9+3MzPZc7MwD/c9S+/X/9XyW8+9ugf/3AZeBeRvPU7+IE4YgiKQ
YZ5t4tDZs6twPsY9h9Y/p9ywP4yKB/Kv/x+/V8lv3kbQ/ySSX8PhyPIwLexKgL7NuRkqb
dx5ccBKYNz/shBhmMvO3cO7h1ADpnzMpQju/mpG8J34c4vx//ln8qHB/q6S
cOhfko1aQd8Sb7Vvc0AzQFNAM0B/
RPyMAPDv8IDu6jxHUuCOXgfQjCIeMIWWjkaGT+UXz6bzj++XB
wP4NjzsgjUMycRgFJFhy6pBBnCZplOOQQaBoYFuyUgwbkkLADi
0jYgaEBOUQOEXB6xoaAwCHHIkVxLCKBYEOYRphBmEWOQiQ5kqZ
JQI6kKQaRRJhF2o4wDRSJMEtRAMhQLEsz7z6WRSRo6t98/
PPheMsHcPA2j0COoFiCQUAGcRbAhjCJMItAIFCIJMNSBMlRNL
DgUNUMBbMINgQCwe7AiKJYRACkKMZmp5FDFvGNnSIQphCmECYR […]