Use WebP images

about.md

@@ -60,15 +60,15 @@ focus on the map, putting the fun back in map apps.
 
 <div align=center>
   <a href="https://octodon.social/@ffreling">
-    <img src="images/mastodon_40.jpg" alt="Mastodon" style="height:40px;">
+    <img src="images/mastodon_40.webp" alt="Mastodon" style="height:40px;">
   </a>
   <a href="http://gitlab.com/ffreling">
-    <img src="images/gitlab_logo_40.png" alt="GitLab" style="height:40px;">
+    <img src="images/gitlab_logo_40.webp" alt="GitLab" style="height:40px;">
   </a>
   <a href="http://github.com/ffreling">
-    <img src="images/github_logo_40.png" alt="GitHub" style="height:40px;">
+    <img src="images/github_logo_40.webp" alt="GitHub" style="height:40px;">
   </a>
   <a href="http://fr.linkedin.com/in/ffreling">
-    <img src="images/leencktyn_logo_40.png" style="height:40px;">
+    <img src="images/leencktyn_logo_40.webp" style="height:40px;">
   </a>
 </div>

images/Tupfile

@@ -1 +1,12 @@
-:foreach *.png *.jpg |> !tup_preserve |>
+: foreach \
+  fabien.jpg \
+  fabien_zenly.jpg \
+  mantis_shrimp.png \
+  |> cwebp -q 80 %f -o %o |> %B.webp
+
+: foreach \
+  github_logo.png \
+  gitlab_logo.png \
+  leencktyn_logo.png \
+  mastodon.jpg \
+  |> cwebp -q 80 -resize 0 40 %f -o %o |> %B_40.webp

index.md

@@ -8,7 +8,7 @@ For an up-to-date professional resume, you might want to head over to my [Linked
 
 <div align=right style="padding-top: 100px;">
 <a href="mantis.html">
-<img src="images/mantis_shrimp.png" alt="Mantis shrimp, minding its own business">
+<img src="images/mantis_shrimp.webp" alt="Mantis shrimp, minding its own business">
 </a>
 <br clear=all>
 <i>May the mighty mantis shrimp smile upon you.</i>