Umstellung auf WebP
Ich bin ein Fan von Optimierungen und das noch relative neue Bildformat WebP ist definitiv eine Optimierung. Mittels modernem HTML ist eine Umstellung relativ einfach, denn mittels dem picture open_in_new und source open_in_new Tags ist es möglich WebP Bilder und JPGs und PNGs für nicht kompatible Systeme gleichzeitig auszuliefern.
In den letzten Tagen habe ich in mehreren Schritten alle Bilder in meinem Blog auf WebP umgestellt. Ausgenommen sind davon lediglich Bilder die ich innerhalb von Beiträgen eingebunden habe. Der einzige Grund dafür ist meine Zeit, denn hier muss einiges manuell gemacht werden. Die Header Bilder von Beiträgen, Sharing-Icons und weitere Bilder konnte ich relativ einfach durch Anpassung meiner Themes austauschen. Um WebP Bilder anbieten zu können, bin ich in drei Schritten vorgegangen:
1. Erzeugen der Bilder, basierend auf meinen aktuellen JPG und PNG Quelldateien.
Hierfür nutze ich cwebp open_in_new, ein Tool von Google, welches aus JPEG, PNG oder TIFF entsprechend WebP Bilder macht. Da ich mehrere tausend Bilder habe, tat sich dies natürlich nicht von Hand. Ich habe mir ein kleines Shell Script geschrieben, dieses geht alle Bilderordner durch und erstellt für alle Quellbilder, die noch kein WebP Gegenstück haben, ein entsprechendes.
Damit in Zukunft auch für neu erstellte Bilder die WebP Gegenstücke erzeugt werden, wird das Script als Pre-Commit Hook automatisiert für neue Bilder ausgeführt.
2. Umstellung der statischen Theme-Dateien.
Mein Static Side Generator Hugo open_in_new arbeitet mit Theme-Dateien und in selbige fügte ich die neue Logik an ersten Stellen ein.
<picture>
<source type="image/webp" srcset="{{ .Site.BaseURL }}{{ index (split .Params.image ".") 0 }}.webp">
<img itemprop="image" src="{{ .Site.BaseURL }}{{ .Params.image }}" alt="{{ .Params.title }} Bild">
</picture>
Nachdem lokale Tests erfolgreich waren, etablierte ich diese Logik im gesamten Projekt. Dies erlaubt mir PNG oder JPG Bilder wie gewohnt zu definieren und die dazugehörige WebP Variante wird vom Code automatisch genutzt.
3. Anwendung im Content
Auch wenn ich, wie oben beschrieben, vorerst nicht alle in Posts eingebundenen Bilder ersetzt habe, so habe ich z.B. im Über Bereich und an anderen Stellen im Content WebP Bilder eingebunden. Dafür bietet Hugo mir Shortcodes open_in_new. Dies sind kleine Code Snippets, welche ich in meinem Markdown Code nutzen kann. Markdown wird im Hugo Kontext zu Erstellung von Content genutzt. In meinem Code kann ich nun das bekannte Markdown Bildformat
wie folgt durch meine Shortcodes ersetzen.
{{ <image "img/main/history.png#center" "Website History"> }}
Generell bin ich mit der genannten Lösung sehr zufrieden, da sie ohne Probleme alte und neue Techniken bedient. Das einzige was stört ist die Duplizierung aller Bilder, was aber bei ausreichend Festplattenspeicher kein allzu großes Problem darstellt. Falls euch das Thema interessiert findet ihr in den Related Links weitere Informationen zum Thema WebP.