diff --git a/content/posts/cellular-automata-toys/hero.png b/content/posts/cellular-automata-toys/hero.png
deleted file mode 100644
index 7cfec66..0000000
Binary files a/content/posts/cellular-automata-toys/hero.png and /dev/null differ
diff --git a/content/posts/cellular-automata-toys/hero.webp b/content/posts/cellular-automata-toys/hero.webp
new file mode 100644
index 0000000..2388955
Binary files /dev/null and b/content/posts/cellular-automata-toys/hero.webp differ
diff --git a/content/posts/command-line-flake-arguments/hero.png b/content/posts/command-line-flake-arguments/hero.png
deleted file mode 100644
index 632f5a8..0000000
Binary files a/content/posts/command-line-flake-arguments/hero.png and /dev/null differ
diff --git a/content/posts/command-line-flake-arguments/hero.webp b/content/posts/command-line-flake-arguments/hero.webp
new file mode 100644
index 0000000..77fe6a3
Binary files /dev/null and b/content/posts/command-line-flake-arguments/hero.webp differ
diff --git a/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.png b/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.png
deleted file mode 100644
index 0bbfa9c..0000000
Binary files a/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.png and /dev/null differ
diff --git a/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.webp b/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.webp
new file mode 100644
index 0000000..8088891
Binary files /dev/null and b/content/posts/gitea-on-fly-io/fly-io-memory-dashboard.webp differ
diff --git a/content/posts/gitea-on-fly-io/fly-io-scale-vm.png b/content/posts/gitea-on-fly-io/fly-io-scale-vm.png
deleted file mode 100644
index 8209337..0000000
Binary files a/content/posts/gitea-on-fly-io/fly-io-scale-vm.png and /dev/null differ
diff --git a/content/posts/gitea-on-fly-io/fly-io-scale-vm.webp b/content/posts/gitea-on-fly-io/fly-io-scale-vm.webp
new file mode 100644
index 0000000..6683e95
Binary files /dev/null and b/content/posts/gitea-on-fly-io/fly-io-scale-vm.webp differ
diff --git a/content/posts/gitea-on-fly-io/index.md b/content/posts/gitea-on-fly-io/index.md
index c31df11..46aef86 100644
--- a/content/posts/gitea-on-fly-io/index.md
+++ b/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>
 
diff --git a/nix/optimize-images.nix b/nix/optimize-images.nix
index ed99778..7b74b8f 100644
--- a/nix/optimize-images.nix
+++ b/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)
-    newimage=$path/''${file:1}
+    file=$(basename -s .png $image)
+    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")
diff --git a/sass/style/parts/_image.scss b/sass/style/parts/_image.scss
index 82fc46f..490bdbb 100644
--- a/sass/style/parts/_image.scss
+++ b/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;
 }
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 83aebaa..b83357c 100644
--- a/templates/macros/macros.html
+++ b/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>