srcset- und sizes-Attribute werden zum Image-Markup hinzugefügt

WordPress 4.4 erhält nativen Support für Responsive Images
Kommentare

Bereits seit einiger Zeit wird beim WordPress-Entwicklerteam die Implementierung eines nativen Supports für Responsive Images diskutiert. Die Entwickler des dafür eingesetzten RICG-Plugins haben darum schon vor einigen Wochen ihren Vorschlag zur Integration des Plugins in den WordPress-Core vorgestellt. Nun steht fest: die Attribute srcset und sizes sind ab der kommenden WordPress-Version im Image-Markup enthalten und verbessern so den Responsive-Image-Support.

In einem Blogpost im WordPress-Entwicklerblog hat Joe McGill die Hintergründe zur Einbindung der beiden Attribute erklärt.

Integration von sizes und srcset

Die Integration eines nativen Responsive-Image-Supports in WordPress soll vor allem dazu dienen, allen Usern eine jeweils passende Bildgröße zu liefern – und die hängt zum Beispiel vom genutzten Device, der Displaygröße und -auflösung sowie der aktuellen Netzwerkverbindung ab. Umgesetzt wird der Support für Responsive Images durch das Hinzufügen der Attribute srcset und sizes zu verwendeten Bildern, etwa in Thumbnails oder Bildergalerien.

WordPress erstellt automatisch verschiedene Größen von jedem Bild, das in die Media Library geladen wird. Durch das Einbinden der verfügbaren Größen eines Bildes in ein srcset-Attribut können Browser künftig jedoch immer die passendste Größe des Bildes herunterladen, was etwa für eine bessere Ladezeit und das Einsparen von Bandbreite sorgen kann. Um den Browsern diese Entscheidung zu vereinfachen, bringt WordPress 4.4 auch ein neues sizes-Attribut mit sich, das out of the box für den Großteil aller WordPress-Seiten funktionieren soll.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Neue Funktionen und Default-Bildgrößen für Responsive Images

Um den neuen Responsive-Image-Support in WordPress 4.4 zu implementieren, wurden eine ganze Reihe neuer Funktionen hinzugefügt. Dazu zählen zum Beispiel:

  • wp_get_attachment_image_srcset()
  • wp_calculate_image_srcset()
  • wp_get_attachment_image_sizes()
  • wp_calculate_image_sizes()
  • wp_make_content_images_responsive()
  • wp_image_add_srcset_and_sizes()

Damit keine übergroßen Bilder zum srcset-Attribut hinzugefügt werden können, wurde zudem ein max_srcset_image_width-Filter implementiert, mit dem eine maximale Bildbreite festgelegt werden kann.

Um sich den Support von Responsive Images besser zu Nutze machen zu können, wurde auch eine neue Default-Bildgröße – medium_large – hinzugefügt. Sie ist per Default 768px breit und hat kein Limit in der Höhe; allerdings wird die neue Größe nicht im UI zur Auswahl von Bildern zum Einbinden in Beiträge enthalten sein.

Darüber hinaus besteht die Möglichkeit, die srcset– und sizes-Attribute zu modifizieren. So lassen sich selbige bei Bedarf etwa für Bilder, die nicht direkt in Post-Content eingebunden sind, aufheben. Zudem können eigene Custom-Markup-Pattern direkt im genutzten Template erstellt werden.


Die neuen Funktionalitäten stehen ab WordPress 4.4 zur Verfügung; die neue WordPress-Version soll am 8. Dezember erscheinen. Usern des RICG-Responsive-Images-Plugins wird empfohlen, bereits jetzt auf die aktuelle Version 3.0.0 zu updaten, die im WordPress-Plugin-Directory zum Download zur Verfügung steht.

Aufmacherbild: Office desk with laptop computer, notebook, mobile smartphone and pen on wood,vintage color toned image von Shutterstock / Urheberrecht: showcake

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -