chore: remove JPG images

src/content/journal/2007/koi-design.mdx

@@ -60,7 +60,7 @@ Legend has it that a koi, who manages to swim up the magical waterfalls, transfo
   caption="Koi floating up the Longmen Waterfalls. It contains typical elements such as leaves, flowers, and wave crests (AI upscaled from a pixel image)."
   size="wide"
 >
-  <Image src="/assets/images/posts/design-koi.png" format="avif" alt="Design: Digital Irezumi" />
+  <Image src="/assets/images/posts/design-koi.webp" alt="Design: Digital Irezumi" />
 </Figure>
 
 The hardest part of my design was how much tattooing to see on the page. While the Japanese tattoo lives on the surface, leaving nothing to feet, hands, and a small front area, a large area would have made the page restless and distracted from the content. To make matters worse, there is no end to a body tattoo. But on the internet, your space is limited by the edges of the browser.

src/content/journal/2009/gitweb-theme.mdx

@@ -19,27 +19,27 @@ The exact installation instructions are included in the package on GitHub.
 ## Screenshots
 
 <Figure caption="Project View">
-  <Image src="/assets/images/posts/gitweb-theme-projects.png" alt="Project View" />
+  <Image src="/assets/images/posts/gitweb-theme-projects.webp" alt="Project View" />
 </Figure>
 
 <Figure caption="Summary">
-  <Image src="/assets/images/posts/gitweb-theme-summary.png" alt="Summary" />
+  <Image src="/assets/images/posts/gitweb-theme-summary.webp" alt="Summary" />
 </Figure>
 
 <Figure caption="Commit">
-  <Image src="/assets/images/posts/gitweb-theme-commit.png" alt="Commit" />
+  <Image src="/assets/images/posts/gitweb-theme-commit.webp" alt="Commit" />
 </Figure>
 
 <Figure caption="Commit DIFF">
-  <Image src="/assets/images/posts/gitweb-theme-commitdiff.png" alt="Commit DIFF" />
+  <Image src="/assets/images/posts/gitweb-theme-commitdiff.webp" alt="Commit DIFF" />
 </Figure>
 
 <Figure caption="Log">
-  <Image src="/assets/images/posts/gitweb-theme-log.png" alt="Log" />
+  <Image src="/assets/images/posts/gitweb-theme-log.webp" alt="Log" />
 </Figure>
 
 <Figure caption="Tree View">
-  <Image src="/assets/images/posts/gitweb-theme-tree.png" alt="Tree View" />
+  <Image src="/assets/images/posts/gitweb-theme-tree.webp" alt="Tree View" />
 </Figure>
 
 <Figure>

src/content/journal/2020/new-website-2020-design.mdx

@@ -59,7 +59,7 @@ I like in particular the italic font with the beautiful loops and curves. I pick
 Next, I picked a Typographic Scale. A scale is a way to pick font sizes based on a fixed set of rules, for example, a specific harmonic number or formula to create a harmonic visual image. I decided to go with the [golden section](https://www.modularscale.com/?1&em&1.618) (ratio 1:1.618).
 
 <Figure caption="Typographic Scale" size="wide">
-  <Image src="/assets/images/posts/typographic-scale.png" alt="Typographic Scale" />
+  <Image src="/assets/images/posts/typographic-scale.webp" alt="Typographic Scale" />
 </Figure>
 
 I picked 20 Pixels as the base font size. Furthermore, I’m in my forties and websites pick fonts far too small. The company iA Inc. wrote 2006 the essay [The 100% Easy-2-Read Standard](https://ia.net/topics/100e2r), but still, fonts below the recommended 16 Pixels of browsers are a standard.
@@ -161,13 +161,13 @@ Next, I moved my focus to the logo. A logo is always a difficult topic. Do I nee
 I created a few sketches of other possible logos, but eventually, I discarded them all and moved back to my _rakkan_. Likewise, I decided to simplify the vector form and reduce the number of points and make it more performant and easier to recognize in smaller sizes.
 
 <Figure caption="Logo Scribbles" size="wide">
-  <Image src="/assets/images/posts/logo-skribbles.png" alt="Logo Scribbles" />
+  <Image src="/assets/images/posts/logo-skribbles.webp" alt="Logo Scribbles" />
 </Figure>
 
 But after finishing the logo, I decided in the interest of simplicity and austerity that there is no reason to use a logo at all. I even removed my name from the header, as it’s obvious on what website the visitor is. My name is written enough around the site. The logo will appear in parts of the website, for example as an icon for the app, or on other locations, a logo fits.
 
 <Figure caption="Rakkan Logo" size="wide">
-  <Image src="/assets/images/posts/rakkan-logo.png" alt="Rakkan Logo" />
+  <Image src="/assets/images/posts/rakkan-logo.webp" alt="Rakkan Logo" />
 </Figure>
 
 ## Grid
@@ -175,7 +175,7 @@ But after finishing the logo, I decided in the interest of simplicity and auster
 Early on I got obsessed with the [Golden Canon Grid](https://youtu.be/fWfD0EfiXcE) and my early designs used a complicated and sophisticated version of it.
 
 <Figure caption="Golden Canon Grid" size="wide">
-  <Image src="/assets/images/posts/golden-canon-grid.png" alt="Golden Canon Grid" />
+  <Image src="/assets/images/posts/golden-canon-grid.webp" alt="Golden Canon Grid" />
 </Figure>
 
 But gradually I decided this would end in a nightmare when moving to code and migrating to a modular grid. However, I didn’t recognize my error of using a fixed-size module for the grid—an error I had to correct later.
@@ -217,7 +217,7 @@ I followed this technique on all my designs and created dozens of variations, so
 </Figure>
 
 <Figure caption="Variants of the Meta section" size="fullsize">
-  <Image src="/assets/images/posts/meta-section-design.png" alt="Variants of the Meta section" />
+  <Image src="/assets/images/posts/meta-section-design.webp" alt="Variants of the Meta section" />
 </Figure>
 
 Designing was the part that brought the most fun to me. Designing is like a concert: It starts with a cello, but then more and more instruments get added until the full [concert ends in a massive crescendo](https://youtu.be/XpT-92HS11I). The start is always the hardest, with the designer staring at a blank, white screen. But then things fall into the place and ideas multiply and in the end, everything is obvious, and the next screen is easy to create.