Responsive Images: das <picture> Element (Video)
Dank eines Hinweises von Justus Blümer habe ich ein tolles Video gefunden. Es zeigt einen Vortrag von Matthew Steele, einem amerikanischen Programmierer. In dem Vortrag geht es um das HTML-5 Element <picture>. Bis HTML-4 wurden Bilder ja mit dem <img> Tag ausgewiesen. Das ändert sich nun. Ich selber habe meine Websites noch nicht aktualisiert, weil es natürlich auch ein Haufen Arbeit ist. Und, das ist das Hauptproblem: man weiß noch nicht so recht, was Google damit anfängt …
Das Prinzip des Responsive Webdesign ist einfach: ein Quellcode, der sich jedem Display (egal ob Desktop, Tablett oder Smartphone) anpasst. Das Problem ist jedoch, dass Bilder in diesem Kontext meist nur klein skaliert werden. Oder man programmiert eine komplizierte JavaScript-Abfrage, die immer erst das Display abfragt, ehe man eine bestimmte Bild-Variante lädt. Ich hatte schon mit mehreren Projekten mit diesen Fragen zu kämpfen…
Dank des <picture> Tag entfällt das nun. Man kann sehr einfach verschiedenen Display-Größen verschiedene Bilder zuweisen. Schaut es Euch an:
Aber wie gesagt: es ist noch unklar, was Google damit anfängt. Von der Logik her dürfte Google damit kein Problem haben: die Bild-URL ist lesbar, und der Rest ist eigentlich so wie bei allen anderen Seiten auch. Der einzige Unterschied ist, dass es mehrere Bildversionen für das eine <picture>-Element gibt. Eigentlich müsste sich Google stets das Größe suchen und indexieren – zumindest, wenn es sich bei den anderen Versionen wirklich nur um kleiner Bildgrößen handelt. Aber theoretisch kann man ja auch verschiedene Bilder dort hinterlegen. Und was Google damit machen würde … keine Ahnung. Muss ich mal testen. Oder weiß von Euch jemand schon Näheres?
Ein Gedanke zu „Responsive Images: das <picture> Element (Video)“
Danke für den Hinweis. Ich habe mich mal mit einem Kollegen dazu augestauscht. Sicherlich super interessant für die Zukunft, nur aktuell noch von den wenigsten Browsern unterstützt:
http://caniuse.com/#search=picture
Kommentare sind geschlossen.