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.
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
- HTML img – srcset und sizes srcset listet alternative Bildgrößen, sizes setzt die Bedingungen je nach Layout
- HTML picture für unterschiedlichen Seitenverhältnisse oder Dateiformate
- Fotos für die Webseite optimieren: webP – Nachfolger für JPG, unterstützt Transparenz besser als PNG
Externe Quellen
- Responsive Images auf Developer Resources bei wordpress.org
- Responsive Images – <picture>, srcset, sizes & Co. auf kulturbanause.de
- All you need to know about big images handling in WordPress 5.3