Kalte Bildtransformationen erzeugen ein leeres Hero-srcset (lokal, nicht live) #55

New issue

Open

opened 2026-09-05 07:09:06 +00:00 by Phil · 0 comments

Phil commented

2026-09-05 07:09:06 +00:00

Owner

Korrektur vorweg

Die erste Fassung dieses Issues behauptete, der Fehler treffe die Live-Seite. Das stimmt nicht. Auf Production ist alles in Ordnung, hier mit gesetztem WebP-Header gemessen am 2026-09-05:

curl -H 'Accept: text/html,image/webp,*/*' https://philflow.io/blog/anti-slop-4-whac-a-mole
  -> srcset="/assets/images/_720xAUTO_.../36193/as4-hero-kerze.webp 0.5x, /assets/images/_1440xAUTO_.../36193/… 1x, …"

Das tatsächliche Symptom

Solange die WebP-Transformationen eines Bildes noch nicht erzeugt sind, liefert WebP() einen leeren String, und der landet ungefiltert im srcset:

srcset=" 0.5x,  1x,  2x"

Der Browser löst die leeren Einträge relativ auf und fordert Adressen wie /blog/0.5x an, was einen 500er erzeugt. Das src-Attribut fällt sauber auf das Original zurück, das Bild ist also sichtbar.

Reproduzierbar lokal mit einem frisch hochgeladenen Hero. Nach mehreren Seitenaufrufen füllt sich das srcset von selbst, weil die Transformationen faul erzeugt werden. Auf Production tritt es deshalb praktisch nicht auf, dort sind die Varianten längst warm.

Wo es herkommt

templates/_components/core/image.twig baut das srcset aus drei WebP()-Aufrufen. Die Funktion stammt aus huttchdev/craft-webpme, src/TwigExtension.php, und gibt $image->getUrl($params) durch. Craft liefert für eine noch nicht erzeugte Transformation null. Es fehlt der Fallback.

Warum es trotzdem einen Fix wert ist

Direkt nach einem Deploy mit neuen Bildern bekommen die ersten Besucher das unskalierte Original und lösen nebenbei 500er aus. Bei einem 7-MB-Hero ist das der Unterschied zwischen einer schnellen und einer sehr langsamen Seite, genau in dem Moment, in dem ein neuer Artikel Aufmerksamkeit bekommt.

Akzeptanzkriterien

Liefert eine Transformation null, steht im srcset die Original-URL statt eines leeren Strings. Das srcset ist damit immer wohlgeformt.
Keine Anfragen mehr auf Adressen der Form /blog/0.5x.
Optional, unabhängig davon sinnvoll: ein Warm-up nach dem Deploy, das die Artikelseiten einmal abruft, damit die Transformationen vor den ersten echten Besuchern stehen.

🤖 Generated with Claude Code

https://claude.ai/code/session_014T2Tn3SA9bfzTDihJN269H

## Korrektur vorweg Die erste Fassung dieses Issues behauptete, der Fehler treffe die Live-Seite. Das stimmt nicht. Auf Production ist alles in Ordnung, hier mit gesetztem WebP-Header gemessen am 2026-09-05: ``` curl -H 'Accept: text/html,image/webp,*/*' https://philflow.io/blog/anti-slop-4-whac-a-mole -> srcset="/assets/images/_720xAUTO_.../36193/as4-hero-kerze.webp 0.5x, /assets/images/_1440xAUTO_.../36193/… 1x, …" ``` ## Das tatsächliche Symptom Solange die WebP-Transformationen eines Bildes noch nicht erzeugt sind, liefert `WebP()` einen leeren String, und der landet ungefiltert im `srcset`: ``` srcset=" 0.5x, 1x, 2x" ``` Der Browser löst die leeren Einträge relativ auf und fordert Adressen wie `/blog/0.5x` an, was einen 500er erzeugt. Das `src`-Attribut fällt sauber auf das Original zurück, das Bild ist also sichtbar. Reproduzierbar lokal mit einem frisch hochgeladenen Hero. Nach mehreren Seitenaufrufen füllt sich das `srcset` von selbst, weil die Transformationen faul erzeugt werden. Auf Production tritt es deshalb praktisch nicht auf, dort sind die Varianten längst warm. ## Wo es herkommt `templates/_components/core/image.twig` baut das `srcset` aus drei `WebP()`-Aufrufen. Die Funktion stammt aus `huttchdev/craft-webpme`, `src/TwigExtension.php`, und gibt `$image->getUrl($params)` durch. Craft liefert für eine noch nicht erzeugte Transformation `null`. Es fehlt der Fallback. ## Warum es trotzdem einen Fix wert ist Direkt nach einem Deploy mit neuen Bildern bekommen die ersten Besucher das unskalierte Original und lösen nebenbei 500er aus. Bei einem 7-MB-Hero ist das der Unterschied zwischen einer schnellen und einer sehr langsamen Seite, genau in dem Moment, in dem ein neuer Artikel Aufmerksamkeit bekommt. ## Akzeptanzkriterien - Liefert eine Transformation `null`, steht im `srcset` die Original-URL statt eines leeren Strings. Das `srcset` ist damit immer wohlgeformt. - Keine Anfragen mehr auf Adressen der Form `/blog/0.5x`. - Optional, unabhängig davon sinnvoll: ein Warm-up nach dem Deploy, das die Artikelseiten einmal abruft, damit die Transformationen vor den ersten echten Besuchern stehen. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_014T2Tn3SA9bfzTDihJN269H

Phil changed title from ~~Hero-srcset ist leer, sobald der Browser WebP akzeptiert~~ to Kalte Bildtransformationen erzeugen ein leeres Hero-srcset (lokal, nicht live)

2026-09-05 07:16:01 +00:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Phil/philflow.io#55

No description provided.

Rows
Columns