Bisher hatte ich die Verarbeitung und Einbindung von Bilddateien im Blog und im Wiki so implementiert, dass WebP als Standardformat immer angeboten wurde (auch wenn das Originalfoto ein anderes Format hatte) und es zusätzlich als Fallback für ältere Browser von jeder Datei eine im JPG-Format gab. Einen Blogbeitrag dazu gibt es hier.

Dazu gab es Varianten der beiden Datei-Formate in unterschiedlichen Auflösungen, sodass ein Browser selbst entscheiden konnte, welches Format in welcher Auflösung er je nach Bildschirmgröße herunterlädt und verwendet.

Für jedes in einem Blogbeitrag verwendete Foto gab es einen Mix aus diesen Dateien:

  • Das Originalfoto (das jeweils andere Format wurde automatisch generiert)

    • foto1.webp (960 KiB)
    • foto1.jpg ( 1100 KiB)

  • Und zusätzlich die Bildvarianten in verschiedenen Auflösungen (1933 KiB):

    • foto1-360px.webp (43 KiB)
    • foto1-360px.jpg (48 KiB)
    • foto1-500px.webp (75 KiB)
    • foto1-500px.jpg (84 KiB)
    • foto1-816px.webp (159 KiB)
    • foto1-816px.jpg (195 KiB)
    • foto1-1632px.webp (617 KiB)
    • foto1-1632px.jpg (712 KiB)

Da JPG bei gleicher Qualität deutlich größer ist als WebP, wurde die Datenmenge für jedes Foto durch die Bildvarianten mehr als verdoppelt.

Wenig Nutzen, viel Speicherplatz und Rechenleistung fürs Rendern

Das war damals von der Idee gut und auch sicher, da es vielleicht noch veraltete Systeme und Browser gibt, die das WebP-Format nicht unterstützen. Aber der Nachteil war, dass dadurch sehr viele Dateien erzeugt wurden, die für die große Mehrheit der Clienten unnötig waren, die aber trotzdem Rechenpower und Speicherplatz beim Generieren benötigen.

Neu – sparsam fürs Rendern und Arbeiten mit dem, was da ist

Nun habe ich die Implementierung geändert:

  • Hat das Originalfoto ein anderes Format als WebP, dann wird es nicht mehr in der selben Auflösung im WebP-Format generiert sondern es wird das Original genutzt.
  • Das Fallback mit dem JPG-Format gibt es gar nicht mehr. Wer noch so einen alten Browser verwendet, muss damit leider leben.

Es werden jetzt nur noch die zusätzlichen Bildvarianten mit kleineren Auflösungen ausschließlich im WebP-Format generiert:

  • foto1-360px.webp
  • foto1-500px.webp
  • foto1-816px.webp
  • foto1-1632px.webp

Das ergibt dann nur noch 894 KiB an zusätzlichen Bilddateien statt bisher 1933 KiB. Bei einem anderen Blogbeitrag mit vielen Fotografien werden nach der Neuerung nur noch 7 MiB an zusätzlichen Dateien erzeugt, zuvor waren es 17 MiB.

Das Verzeichnis resources/_gen des Blogs war vor der Änderung 3300 MiB groß. Nach der Änderung sind es nur noch 1492 MiB.

Das passt so erst einmal. 😊

Render Hook herunterladen

Update
Update 2023-08-24: Möglichkeit, die benötigten Dateien herunterzuladen.

Hier kannst du beide Dateien des Render Hooks herunterladen:

Das .txt am Ende muss entfernt werden.