X Zurück
März 14th, 2016

Responsive Images – Neues Feature bei WordPress 4.4


geschrieben von Miron Ogrodowicz

Dank Responsive Webdesign passt sich das Layout einer Webseite der Breite des Browsers an. Also warum sollten das nicht auch die Bilder tun?

Eine gute Webseite lebt von ihren Inhalten. Dazu gehören nicht nur überzeugende Texte, sondern auch Bildmaterial wie Fotos oder Grafiken.

Flexible Seiten sind mittlerweile ein wichtiger Bestandteil im Responsive Webdesign. Ohne Scripte war es bisher sehr schwierig die richtigen Content-Bilder so zu setzen, dass Performance- oder Qualitätsverluste auf allen Displaygrößen vermieden werden. Abhilfe soll jetzt WordPress 4.4 und die Implementierung des nativen Supports für Responsive Images schaffen.

Allen Usern die passende Bildgröße liefern

Mit der Integration eines nativen Responsive- Image-Supports soll jedem Nutzer, unabhängig von der Displaygröße und dem genutzten Device, die passende Bildgröße ausgeliefert werden.

Der Support wird durch das Hinzufügen des HTML-Elements und den neuen Attributen „srcset“ und „sizes“ des <img>-Elements, zu den verwendeten Bildern umgesetzt.

Statt ein Bild für alle Geräte auszuliefern und es dann vom Browser skalieren zu lassen, wird auf unterschiedlich große Bilddateien für Smartphone, Tablet und Desktop im HTML-Code verwiesen.

Durch das Einbinden der verfügbaren Größen eines Bildes in ein „srcset“-Attribut, lädt der Browser dann nur noch das jeweils passende Bild. Das sorgt für eine schnellere Ladezeit und das Einsparen von Bandbreite. Die neuen Funktionen stehen ab WordPress 4.4 zur Verfügung. Alle Bilder werden automatisch angepasst, es müssen also keine Änderungen im Theme vorgenommen werden.

Das Feature richtig nutzen

Um das Feature richtig nutzen zu können ist es zwingend erforderlich, mehrere Versionen für ein Bild zu erstellen.

Vielversprechend sieht dabei ein Dateiformat mit dem Namen FLIF aus. Es schlägt nicht nur die bekannten Formate wie webp oder JPEG2000 bei der Kompression um Längen, es erlaubt auch das Einbetten von verschiedenen Bildgrößen in einer Datei.

Mit dieser Möglichkeit entscheidet der Browser welchen Teil er aus dem Bild lädt. Es müssen also nicht mehrere Bilder für die verschiedenen Auflösungen angelegt werden, da die verschiedenen Bildergrößen in einer Datei gespeichert werden. Der Browser wählt dann, nach den Umständen des Clients (Browsers), welches Bild aus der Datei geladen wird. Wird beispielsweise gezoomt, kann der Browser aus dem Bild eine größere Version nachladen.

Diese Technologie steht zurzeit noch ganz am Anfang. Es gibt keinen Browser, der das Format nativ unterstützt. Es dürfte aber nicht allzu lange dauern, bis die ersten Browser dieses Dateiformat unterstützen und weitere Hersteller nachziehen.

Infos zu FLIF: http://flif.info/

0 Kommentare

Schreibe einen Kommentar

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