Hinweis: Dieser Artikel ist älter als 3 Jahre
Inhalte, Quelltexte oder Links können zwischenzeitlich überholt sein.

Kaum war gestern der Microblog zu meinen CSS-Verbesserungen geschrieben, kamen die nächsten Ideen. Einmal im Flow kann ich doch nicht mittendrin aufhören. Und so ging’s heute Nachmittag weiter:

Wie eine leere Dose über den Schulhof kicke ich den Bilderordner schon länger vor mir her. Im Laufe der Zeit habe ich allerlei Zeugs reingekippt und verlinkt. Ein Wildwuchs an Dateiformaten, den a) niemand mehr durchblickt und b) niemand auch freiwillig anpacken würde, da zahlreiche Links auf diese verweisen. Eine ungnädige Fleissarbeit. Und wenn wir schon bei Bildern und unterschiedlichen Bildformaten sind: JPG und PNG sind sowas von 1990. Mit WebP gibt es ein moderneres und deutlich besseres Format.

Automatisches Konvertieren

Das Bash-Script zum Konvertieren war schnell geschrieben. Es mag nicht besonders elegant sein, aber es macht seinen Job: Der Bilderordner mit seinen ca. 25 MB vorher konnte auf 6-7 MB nachher reduziert werden. Und das bei einer optisch gleichbleibender Qualität.

SOURCE_DIR="./static/original"
TARGET_DIR="./static/img"

for file in $SOURCE_DIR/*;
 do
  filename=$(basename -- "$file")
  cwebp -progress -mt -resize 1024 0 "$file" -o "$TARGET_DIR/${filename%%.*}.webp";
 done

Bei dieser Gelegenheit habe ich meinen Workflow ebenfalls angepasst und einen neuen Hotfolder erstellt, wo ich nur noch die Originale ablege. Alles weitere ist automatisch: Herunterrechnen auf 1024 Pixel Breite, das Entfernen aller Metadaten, das Erstellen eines LowRes-Vorschaubildes und die Ablage in die richtigen Ordner. Bis gestern habe ich dafür noch GIMP benutzt, heute nicht mehr.

Lazy-Loading von Bildern

Hier ein Tip für alle, die auch mit Hugo arbeiten. Viele Themes unterstützen kein Lazy-Loading von Bildern im Markdown-Text. Das wirkt sich nachteilig im Ranking bei Google als auch in der User-Experience. Hier die entsprechenden Zeilen, die als Render-Hooks unter /layouts/_default/_markup/render-image.html zu hinterlegen sind:

<img
  src="{{ .Destination | safeURL }}"
  alt="{{ .Text }}"
  loading="lazy"
/>

Fun-Fact beim Pushen zurück in das Repo: Dieser minimalistisch gehaltene Blog besteht überwiegend aus CSS-Dateien, interesting.

In diesem Sinne,
schönes Wochenende!

Tomas Jakobs

Nachtrag vom 27.05.2021

Da ich in den letzten Tagen sehr viel an Bildern und CSS gearbeitet habe gibt es viele Feedbacks aufgrund älterer Cache-Daten in den lokalen Browsern. Als Workaround einfach diese Löschen oder eine Seite erzwungen neu laden. Dann klappt’s wieder.

Und noch eine Kleinigkeit: Die Ansicht für mobile Geräte ist auch angepasst. Ich habe die grafischen Navigationspunkte und die Sprachauwahl getauscht. SIeht nicht nur gefälliger aus sondern bewirkt auf mobilen Geräten eine bessere Navigation: