YOOtheme Pro: Kleinere Bildgrößen im srcset für bessere mobile Performance

YOOtheme Pro kümmert sich bereits automatisch um viele Aspekte der Bildoptimierung. Dazu gehört auch die Erzeugung responsiver Bilder: Ein Bild wird in mehreren Größen bereitgestellt und der Browser kann – abhängig von Displaygröße und Auflösung – eine passende Variante auswählen.

Die kleinste von YOOtheme Pro standardmäßig erzeugte Bildbreite liegt derzeit jedoch bei 768 Pixeln. Bei Bildern, die auf einem Smartphone tatsächlich nur mit etwa 300 Pixeln Breite dargestellt werden, kann das mehr sein als nötig.

Deshalb ergänze ich bei meinen YOOtheme-Installationen eine zusätzliche Bildbreite von 320 Pixeln.

Was macht YOOtheme Pro mit responsiven Bildern?

YOOtheme Pro erzeugt für geeignete Bilder automatisch verschiedene Größen und stellt sie über das HTML-Attribut srcset zur Verfügung.

Nach der aktuellen YOOtheme-Dokumentation werden dabei bis zu sechs Varianten erzeugt:

768px, 1024px, 1366px, 1600px, 1920px und 200 %

Der Browser entscheidet anschließend, welche Bilddatei für die jeweilige Darstellung am besten geeignet ist.

Das Prinzip ist sinnvoll: Ein Smartphone muss nicht zwangsläufig dieselbe große Bilddatei herunterladen wie ein Desktop-PC mit hochauflösendem Bildschirm. YOOtheme unterstützt dabei neben responsiven Bildgrößen auch moderne Bildformate wie WebP und AVIF sowie Lazy Loading.

Warum das YOOtheme-srcset um 320 Pixel erweitern?

Auf kleinen mobilen Displays kann ein Bild deutlich schmaler dargestellt werden als 768 Pixel.

Steht im srcset als kleinste Variante beispielsweise nur ein 768 Pixel breites Bild zur Verfügung, kann der Browser keinen kleineren Bildkandidaten aus dieser Liste auswählen – selbst wenn für die konkrete Darstellung eine deutlich kleinere Datei ausreichen würde.

Eine zusätzliche Variante mit 320 Pixeln Breite erweitert die Auswahlmöglichkeiten:

srcset="... 320w, ... 768w, ... 1024w, ..."

Der Browser entscheidet weiterhin selbst, welche Variante er tatsächlich verwendet. Die zusätzliche Bildgröße zwingt ihn also nicht dazu, immer das 320-Pixel-Bild zu laden. Sie stellt lediglich einen weiteren, kleineren Kandidaten zur Verfügung.

Das entspricht grundsätzlich auch dem Prinzip responsiver Bilder: Über srcset können mehrere Bildvarianten angegeben werden, aus denen der Browser abhängig von den jeweiligen Bedingungen auswählt.

Die Bildgrößen in YOOtheme Pro anpassen

Die Liste der von YOOtheme erzeugten Bildbreiten ist im PHP-Code des Themes definiert.

In älteren YOOtheme-Versionen befand sich die entsprechende Definition in der Datei:

ImageLoader.php

Dort hatte ich die zusätzliche Breite von 320 in die vorhandene Liste aufgenommen.

Nach einem späteren YOOtheme-Update wurde die Bildverarbeitung umgebaut. Die entsprechende Definition befand sich anschließend in:

LoadSourceSet.php

Auch dort ließ sich die zusätzliche Breite ergänzen.

Warum die Anpassung nach einem YOOtheme-Update nicht mehr auffindbar war

Bei einem weiteren größeren YOOtheme-Update hatte sich der betreffende Code erneut verändert.

Meine bisher verwendeten Suchbegriffe – insbesondere srcset beziehungsweise eine zuvor vorhandene Bildbreite von 430 – führten nicht mehr zur entsprechenden Stelle im PHP-Code.

Die Lösung war schließlich ein Wert, der weiterhin Bestandteil der YOOtheme-Standardgrößen ist: 1366.

Über diesen Wert ließ sich die zuständige Datei wieder lokalisieren:

LoadSourceSet.php

Dort konnte 320 erneut zur Liste der generierten Bildbreiten hinzugefügt werden.

Interessant dabei: Die zuvor zur Suche verwendeten 430px müssen inzwischen nicht mehr als fester Wert im PHP-Code hinterlegt sein. YOOtheme kann zusätzliche Bildgrößen abhängig von der tatsächlichen Bild- beziehungsweise Elementgröße dynamisch erzeugen.

Genau deshalb funktionierte die bisherige Suche nach diesem Wert nach dem Update nicht mehr.

Das erzeugte srcset im HTML kontrollieren

Ob die Änderung funktioniert, lässt sich anschließend direkt im erzeugten HTML der Website überprüfen.

Im srcset sollten nun wieder entsprechende 320-Pixel-Varianten auftauchen, zum Beispiel:

srcset="
  ... 320w,
  ... 430w,
  ... 600w,
  ...
"

Damit steht dem Browser auch für kleine Darstellungsgrößen eine entsprechend kleine Bilddatei zur Auswahl.

Wichtig: Die Änderung an YOOtheme Pro ist nicht updatesicher

Wie bereits zu Beginn erwähnt, erfolgt diese Anpassung in einer YOOtheme-Core-Datei. Das ist normalerweise etwas, das man möglichst vermeiden möchte.

In diesem konkreten Fall lässt sich die betreffende Datei jedoch nicht über ein Child Theme überschreiben und die Änderung damit auf diesem Weg updatesicher gestalten.

Bei einem YOOtheme-Update kann die Anpassung deshalb überschrieben werden. Größere Updates können außerdem dazu führen, dass YOOtheme die interne Bildverarbeitung verändert und sich die betreffende Code-Stelle anschließend an einer anderen Stelle oder in veränderter Form befindet.

Deshalb gehört nach relevanten YOOtheme-Updates eine kurze Kontrolle zu meinem Wartungsablauf:

1. Prüfen, ob 320w weiterhin im erzeugten srcset vorhanden ist.
2. Falls nicht, die zuständige Definition im aktuellen YOOtheme-Code suchen.
3. Die zusätzliche Bildbreite erneut ergänzen.
4. Den YOOtheme-Bildcache gegebenenfalls leeren und die Ausgabe erneut kontrollieren.

Der Eingriff ist damit bewusst nicht updatesicher. Da die betreffende Stelle bekannt ist, hält sich der zusätzliche Aufwand bei der Wartung jedoch in Grenzen.

Ist die zusätzliche 320px-Bildgröße für jede YOOtheme-Website sinnvoll?

Nein.

YOOtheme Pro bringt bereits von Haus aus eine umfangreiche Bildoptimierung mit. Responsive Images, Lazy Loading und moderne Formate wie WebP und AVIF sind integriert.

Die zusätzliche 320-Pixel-Variante ist deshalb keine grundsätzliche Voraussetzung für eine schnelle YOOtheme-Website. Sie ist eine gezielte Feinoptimierung für Installationen, bei denen auch auf kleinen Displays möglichst passend dimensionierte Bilddateien bereitgestellt werden sollen.

Ob sich der Eingriff lohnt, hängt unter anderem von den verwendeten Bildern, deren Darstellungsgrößen und der gesamten Performance-Optimierung der Website ab.

Fazit: Responsive Bilder in YOOtheme gezielt optimieren

YOOtheme Pro nimmt Websitebetreibern bereits viel Arbeit bei der Bildoptimierung ab. Trotzdem gibt es Situationen, in denen sich eine zusätzliche Feinabstimmung lohnt.

Die Ergänzung einer Bildbreite von 320 Pixeln erweitert das vorhandene srcset um eine kleinere Variante und gibt dem Browser damit auf kleinen Displays eine zusätzliche Auswahlmöglichkeit.

Gleichzeitig zeigt das Beispiel aber auch einen wichtigen Punkt bei individuellen Anpassungen an einem regelmäßig weiterentwickelten System wie YOOtheme Pro: Was heute an einer bestimmten Stelle im Code funktioniert, kann sich mit dem nächsten größeren Update verändern.

Deshalb gehört für mich zu einer sorgfältigen Joomla- und YOOtheme-Wartung nicht nur das Einspielen von Updates. Individuelle Anpassungen müssen anschließend auch darauf geprüft werden, ob sie weiterhin wie vorgesehen funktionieren.