Use webp

content/posts/gitea-on-fly-io/index.md

@@ -169,14 +169,14 @@ error: failed to push some refs to 'git.mat.services:mat/fly-apps.git'
 Uh. Hm. I just got an email saying a Fly.io instance ran out of memory and crashed. Let's peek at our Fly.io dashboards:
 
 <figure>
-<img alt="Fly.io memory dashboard" src=fly-io-memory-dashboard.png />
+<img alt="Fly.io memory dashboard" src=fly-io-memory-dashboard.webp />
 <figcaption><h4>Fly.io memory dashboard</h4></figcaption>
 </figure>
 
 That doesn't look so great. It seems like Gitea idles just under the amount of memory we have with a default instance size, and operations like `git push` can bump it over the threshold to an out-of-memory error. Let's check out the "Scale" section of the dashboard, and increase the memory allotment for this VM:
 
 <figure>
-<img alt="Fly.io VM scaling interface" src=fly-io-scale-vm.png />
+<img alt="Fly.io VM scaling interface" src=fly-io-scale-vm.webp />
 <figcaption><h4>Fly.io VM scaling interface</h4></figcaption>
 </figure>
 

nix/optimize-images.nix

@@ -1,14 +1,14 @@
-{ bc, pngquant, scour, writeShellScriptBin }:
+{ bc, libwebp, scour, writeShellScriptBin }:
 
 writeShellScriptBin "optimize-images" ''
   shopt -s globstar nullglob
   ${scour}/bin/scour -i static/image/_favicon.svg -o static/image/favicon.svg
   for image in content/**/_*.png static/image/**/_*.png; do
     path=$(dirname $image)
-    file=$(basename $image)
+    file=$(basename -s .png $image)
-    newimage=$path/''${file:1}
+    newimage=$path/''${file:1}.webp
     echo "optimizing $image"
-    ${pngquant}/bin/pngquant --quality 70-90 -f -o $newimage $image
+    ${libwebp}/bin/cwebp -quiet -o $newimage $image
     oldsize=$(stat --format=%s $image)
     newsize=$(stat --format=%s $newimage)
     pct=$(${bc}/bin/bc <<< "scale=1; $newsize * 100 / $oldsize")

sass/style/parts/_image.scss

@@ -5,6 +5,7 @@ img:not(#logo):not(#pixel) {
 }
 
 img.hero {
+  height: auto;
   margin-top: 1.5rem;
   border: none !important;
 }

templates/macros/macros.html

@@ -77,7 +77,8 @@
 
   {% if page.extra.hero %}
   <figure>
-    <img class="hero" alt="{{ page.extra.heroPrompt }} - generated using Stable Diffusion" src=hero.png />
+    <img width=1024 height=512 class="hero" alt="{{ page.extra.heroPrompt }} - generated using Stable Diffusion"
+      src=hero.webp />
     <figcaption>
       <h4><i>{{ page.extra.heroPrompt }}</i> - generated using Stable Diffusion</h4>
     </figcaption>