Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 11. Juni 2012

jQuery Picture steuert Bilder in responsiven Designs zuverlässig

Responsives Design stand nicht von Beginn an auf der Agenda zur Erweiterung des HTML-Standards hin zur Version 5. Und so schlägt man sich auch heute noch mit manchen Fragestellungen eher schlecht als recht herum. Das Thema “Bilder in responsiven Layouts” gehört dazu. An sich sind Bilder über das neue Figure-Tag einzubinden, doch gibt es auch den Vorschlag, stattdessen ein neues, eigenes Picture-Tag mit untergeordneten Source-Tags einzuführen. Das Plugin jQuery Picture kann mit beiden Varianten umgehen und Bilder in responsiven Layouts zuverlässig steuern.

Anzeige

Picture-Tag: Eine Lösung speziell für Bilder

Das Picture-Tag ergibt in responsiven Layouts den meisten Sinn. Innerhalb eines Picture-Containers platziert man mehrere Source-Tags mit den URLs der verschiedenen, zum gleichen Picture-Container gehörenden Bilder. Dem jeweiligen Source-Tag gibt man die zugehörige Media-Query direkt mit. So könnte das aussehen:


    
    
    
    

Sie erkennen die Funktionalität auf einen Blick. Der Picture-Container enthält drei Bilder, von denen das größte, large.png, ab einer Viewport-Breite von 600 Pixeln angezeigt werden soll. Darunter, ab einer Breite von 440 Pixeln, käme medium.png zur Anzeige und bei noch kleineren Auflösungen diente small.png als Foto der Wahl. In einem Noscript-Bereich erfolgt die Angabe eines Bildes für die Indexierung durch Suchmaschinen, sowie im Falle von jQuery Picture, zur Anzeige durch Besucherbrowser ohne Javascript.

Eine schöne Sache also. Der Haken ist nur: Dieser Vorschlag ist bislang nur ein Vorschlag. Kein großer Browser führt die Implementation zum jetzigen Zeitpunkt. Ohne das Plugin jQuery Picture ist die Lösung derzeit so nicht zu verwenden.

In der W3C Community Group zum Responsive Imaging liegt derweil bereits der nächste Vorschlag vor. Danach könnte man sich in Zukunft möglicherweise auf ein Pic-Element einigen, das im Prinzip genauso arbeitet wie das Picture-Element, aber schon als Tag und auch in der weiteren Syntax mit weniger Schreibarbeit auskommen würde. Jetzt allerdings erst einnmal zurück zu jQuery Picture.

Das Plugin jQuery Picture bringt schon jetzt die Unterstützung für das Picture-Element in Form einer einfach auf das entsprechende Element zeigenden Funktion mit.

jQuery Picture: Figure-Element mit Data-Attributen

Nicht nur das experimentelle Picture-Element wird durch jQuery Picture verstanden und korrekt umgesetzt, auch die Verwender der standardkonformen Figure-Tags können ihre Bilder mit Hilfe des Plugins zuverlässig responsiv auslegen. Dazu müssen erneut HTML5s neue Data-Attribute herhalten. Mit ihrer Hilfe wird das Figure-Tag um weitere Bild-URLs erweitert. Das geht ganz einfach:

Sie sehen, dass die Bild-URLs in Attributen, die mit data-media beginnen, verpackt werden. Die erste Anweisung ohne zusätzlichen Zahlenwert repräsentiert das Bild, das später in der kleinsten Auflösung angezeigt werden wird. Die in data-media440 verpackte URL kommt zum Tragen, wenn der Viewport mindestens 440 Pixel breit ist und so weiter. Naheliegenderweise sollten die Pixelwerte mit den ansonsten definierten Breakpoints korrelieren. Anschließend wird das Plugin wie folgt initialisiert:

$(function(){
    $('figure.responsive').picture();
});

Nach Tests des Entwicklers Abban Dunne funktioniert die Lösung ab IE 7 und in allen modernen Browsern ohnehin. jQuery Picture steht zur kostenlosen Verwendung auf GitHub zum Download bereit. Dunne würde sich übrigens freuen, wenn sein Plugin eher früher als später überflüssig würde. Zu diesem Zeitpunkt wird es zumindest im IE immer noch sinnvoll einsetzbar sein…

(do)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Kommentare

  1. Lieber Autor, leider sind die Informationen schon wieder inaktuell. Es wird höchstwahrscheinlich niemals ein Element geben, ebensowenig wird man sich auf pic einigen. Stattdessen ist aktuell eine Bestrebung danach vorhanden, das bestehende img-Element zu reformieren und für @srclist als auch @media-queries auszulegen.

  2. Das ist eine recht gute und einfache Lösung für das leidige RWD-Image Problem.
    Es gibt auch noch einige Serverseitige und PHP-Lösungen, die alle ihre Vor- und Nachteile haben. Bsp: https://github.com/filamentgroup/Responsive-Images.

    Beten wir das sich das Konsortium eine gute standartisierte Lösung überlegt, und diese dann auch wirklich Standart wird.

    Sehr guter Artikel. Vielen Dank.

Schreibe einen Kommentar

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