WordPress Responsive Images, secret und sizes

WordPress lädt das Bild in der vollen Auflösung und erzeugt davon einen Stapel unterschiedlicher Auflösungen. Welches der acht runtergerechneten Fotos erscheint dann auf welchem Monitor?

WP responsive images – kleinere Versionen der Bilder

Der Bildstapel der Auflösungen

Ein großer Teil der Fotos für die Webseite wird mit Handys aufgenommen, die eine immer bessere Bildqualität bei immer größeren Dateigrößen liefern. Gleichzeitig laden WordPress-Benutzer Fotos – gleich ob sie vom Fotografen oder vom eigenen Handy kommen – direkt in die Webseite. Optimiert wird da wenig, so dass die Ladezeiten und die Bandbreite wuchern.

WordPress erzeugt seit Version 4.4 aus dem geladenen Original einen Stapel von Bildern in unterschiedlichen Größen und erzeugt ein img-Element mit srcset- und sizes-Attribut. Seit 2020 erweitert WordPress den Satz auf acht Bildgrößen und überlässt dem Browser die Wahl, welche Version in die Seite gesetzt wird.

Testbild für srcset und sizes in WordPress
Wenn das Bild beim Einsetzen ins Layout im Gutenberg-Editor nicht über die Bildabmessungen angepasst wird, lädt WordPress die 100%-Variante.

floral-150×150.jpg
floral-300×119.jpg
floral-768×305.jpg
floral-1024×406.jpg
floral-1200×476.jpg
floral-1536×609.jpg
floral-1980×785.jpg
floral-2048×812.jpg
floral.jpg // Original, volle Größe

Es gibt keine Einstellungen, um die erzeugten Größen zu steuern, die Berechnungen laufen im WordPress-Core hinter mehr oder weniger verschlossen Türen. Immerhin: Das Original, das 4, 5 oder mehr MB groß sein kann, bleibt außen vor. Die Dateigrößen bleiben im Rahmen.

Der WordPress-Bilderstapel

<img width="1024" height="397" src="floral-1024x397.jpg" alt="" class="" 
	srcset="floral-1024x397.jpg 1024w, 
		floral-300x116.jpg 300w, 
		floral-768x298.jpg 768w, 
		floral-1536x595.jpg 1536w, 
		floral-2048x794.jpg 2048w, 
		floral-1200x465.jpg 1200w, 
		floral-1980x767.jpg 1980w" 
	sizes="(max-width: 1024px) 100vw, 1024px">

Wie schon erwähnt: Nur wenige Einstellungen haben Einfluß auf die Erzeugung der Bildgrößen, einzig die Einstellung für Medien spielt eine Rolle.

Das ist die Voreinstellung, die von den meisten Benutzern selten geändert wird. Auf jeden Fall aber entdeckt WordPress heute, ob ein großes Bild über dem big_image threshold (2560px) liegt.

Das sizes-Attribut ist entsprechend der Spezifikation erforderlich und stellt sicher, dass der Browser kein Bild einsetzt, das breiter als das Original ist. Wir bekommen keine perfekt angepassten Bildgrößen, da das sizes-Attribut dem Browser nicht erlaubt, eine angemessene Bildgröße zu wählen, wenn der Bereich im Layout kleiner ist.

Retina-Monitore

Das sizes-Attribut gilt auch für die mobilen Geräte. Da immer mehr Handys hohe Auflösungen – 3-fach, 4-fach gegenüber dem Desktop-Monitor haben, schöpft das img-Element mit srcset und sizes ebenfalls aus dem Vollen.

Bilder in Spalten: Wir erwarten volle Breite für den Retina-Monitor, eine kleine Bildgröße für den Desktop-Monitor.

Bild Hochgeladen mit 1300px Breite

<img loading="lazy" width="1300" height="832" src="floral-quad.jpg" alt="" class="size-full" 
	srcset="floral-quad.jpg 1300w, 
			floral-quad-720x461.jpg 720w, 
			floral-quad-768x492.jpg 768w, 
			floral-quad-1200x768.jpg 1200w" 
	sizes="(max-width: 1300px) 100vw, 1300px">

Ein Bild, das kleiner ist als die maximale Bildgröße wird nicht hochgerechnet, der Bilderstapel bleibt in diesem Beispiel bei 4 zusätzlichen Bildgrößen. Wenn nicht absolut sicher ist, dass dieses Bild nicht irgendwann doch in einer größeren Version eingesetzt werden oder etwa in einem größeren Layout-Bereich landen könnte: Lieber immer ein großes Original laden.

Das sizes-Attribut kann mit wp_calculate_image_sizes geändert werden, um besser passende Auflösungen für das jeweilige Design zu bieten.

Optimierung muss immer

Auch wenn die Überlast durch die Originalgröße der Bilder jetzt eingedämmt ist – Fotos fürs Internet sollten dennoch optimiert werden. Freistellen von überflüssigen Zeugs am Rand, in Hinsicht auf den Webspace nicht gleich die vollen 5 oder mehr MB einladen. Überlegen, ob die Zeit reif ist für WebP, um Bilder in hoher Qualität deutlich besser zu komprimieren als JPG oder gar PNG.

Mehr zu Medien in Webseiten

Externe Quellen

2024-02-12 SITEMAP BLOG
Suchen auf mediaevent.de