Bilder/Thumbnails auf Startseite laden zu groß – Lightbox soll aber 1920 px behalten

Hallo Herr Kaminski,

wir konnten das Verhalten in eigenen Projekten bisher nicht nachvollziehen. Zeta Producer erzeugt dort korrekt zwei Ausgabedateien: eine kleinere Datei für die normale Seitenansicht und eine größere -large-Datei für die Lightbox. Auch die width-/height-Angaben im HTML passen dort zur tatsächlich ausgegebenen Bilddatei.

Bei Ihrer Website sieht es etwas anders aus: Die beiden Bilddateien sind zwar vorhanden, aber die Größenangaben im HTML passen offenbar nicht ganz zur tatsächlich eingebundenen Datei. Das kann z. B. passieren, wenn die Bildausgabe noch aus einem älteren Stand stammt oder das Thumbnail nicht neu berechnet wurde.

Bitte versuchen Sie einmal Folgendes:

Das betreffende Bild-Widget in Zeta Producer öffnen, bestätigen und die Website erneut veröffentlichen.
Falls das nicht reicht: Die Spalte, in der sich das Bild-Widget befindet, einmal kleiner und wieder größer ziehen, damit die Bildausgabe neu berechnet wird.
Danach die Website vollständig neu veröffentlichen, idealerweise nicht nur geänderte Dateien.

Zusätzlich unterstützt Zeta Producer 17.2 nun auch WebP. Es wäre daher sinnvoll, die Bilder einmal in das moderne WebP-Format zu übernehmen bzw. neu zu importieren und anschließend neu zu veröffentlichen. Das reduziert in der Regel die Dateigröße deutlich und sorgt gleichzeitig dafür, dass die Bildausgabe neu erzeugt wird.

Nach unserer Einschätzung liegt hier daher wahrscheinlich kein grundsätzliches Lightbox-Problem vor. Die Lightbox verwendet korrekt die große Bildversion; auffällig ist eher die veraltete oder inkonsistente Ausgabe des normalen Bildes.

Hallo Herr Kaminski,

danke für die Rückmeldung und die Screenshots.

Der HTML-Code sieht jetzt korrekt aus. Das Bild wird aktuell so ausgegeben:

<img src=".../luftaufnahme-immobilie-grundstueck-bevenrode.webp"
    width="945"
    height="532">

Diese width-/height-Angaben beschreiben die tatsächlich erzeugte Bilddatei. Dass das Bild im Layout responsiv kleiner angezeigt wird, z. B. mit ca. 605 × 341 px, ist normal und wird per CSS gesteuert.

Die Lightbox ist ebenfalls nicht das Problem: Für die Lightbox wird weiterhin die größere Datei verwendet.

Die Meldung bedeutet in diesem Fall: Für die konkrete Darstellung im Browser wäre theoretisch noch eine kleinere Bilddatei ausreichend. Zeta Producer erzeugt bereits eine kleinere Ausgabe für die normale Seitenansicht und eine große Ausgabe für die Lightbox, aber aktuell nicht zusätzlich mehrere abgestufte Varianten für jede mögliche Bildschirm-/Spaltenbreite.

Das Verhalten ist daher grundsätzlich normal. Die Warnung ist eher eine Optimierungsempfehlung als ein Fehler.

Aus unserer Sicht liegt hier aber kein Fehler vor. Die normale Seitenansicht verwendet bereits die kleinere WebP-Datei, die Lightbox verwendet die große Version.

Hallo Herr Kaminski,

vielen Dank für Ihren weiteren Test.

Nach unseren eigenen Tests können wir das Verhalten leider nicht nachvollziehen. Bei unseren Projekten werden für die Seitenansicht und die Lightbox ebenfalls getrennte Bilddateien erzeugt, und die HTML-Ausgabe entspricht der tatsächlich verwendeten Bildgröße.

Eine Möglichkeit, die Größe der für das normale Bild-Widget erzeugten Ausgabedatei manuell festzulegen (z. B. 625 × 352 Pixel), gibt es derzeit nicht. Die Bildausgabe wird von Zeta Producer automatisch erzeugt und optimiert.

Dass das Bild im Browser anschließend responsiv kleiner dargestellt wird als die erzeugte Bilddatei, ist grundsätzlich normal und wird von Lighthouse als Optimierungspotenzial bewertet. Das bedeutet jedoch nicht, dass hier ein Fehler in der Bildausgabe vorliegt.

Da wir das von Ihnen beschriebene Verhalten in eigenen Projekten nicht reproduzieren können, können wir leider keine weitergehende Aussage dazu treffen. Falls wir das Thema künftig weiter optimieren (z. B. durch eine noch feinere responsive Bildausgabe mittels srcset), würde das diese Lighthouse-Empfehlung voraussichtlich weiter verbessern.

Nach aktuellem Stand sehen wir hier jedoch keinen Fehler in der Lightbox-Funktion oder der grundsätzlichen Bildausgabe von Zeta Producer.

OlavIch vermute, die Website beim Test der Bilder einfach nicht in voller Breite dargestellt wurde (Browser-Fenster zu schmal) und das Bild daher etwas skaliert war. Das ist das normale, gewollte Verhalten.