Optimise images part 2

website/docs/gettingstarted/building.mdx

@@ -11,7 +11,7 @@ If you run the binary, you should see the default application:
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/defaultproject.png").default}
+    src={require("@site/static/img/defaultproject.webp").default}
     width="50%"
     class="screenshot"
   />

website/docs/guides/dynamic-assets.mdx

@@ -95,14 +95,14 @@ our custom assets handler:
 
 <p className="text--center">
   <img
-    src={require("@site/static/img/assetshandler-does-not-exist.png").default}
+    src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
   />
 </p>
 
 However, if we request `go.mod`, we will see the following output:
 
 <p className="text--center">
-  <img src={require("@site/static/img/assetshandler-go-mod.png").default} />
+  <img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
 </p>
 
 This technique can be used to load images directly into the page. If we updated our default vanilla template and
@@ -122,7 +122,7 @@ Then we would see the following:
 
 <p className="text--center">
   <img
-    src={require("@site/static/img/assetshandler-image.png").default}
+    src={require("@site/static/img/assetshandler-image.webp").default}
     style={{ width: "75%" }}
   />
 </p>

website/docs/guides/ides.mdx

@@ -9,7 +9,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
 
 <p className="text--center">
   <img
-    src={require("@site/static/img/vscode.png").default}
+    src={require("@site/static/img/vscode.webp").default}
     style={{ width: "75%" }}
   />
 </p>

website/docs/guides/windows-installer.mdx

@@ -2,7 +2,7 @@
 
 <p style={{ "text-align": "center" }}>
   <img
-    src={require("@site/static/img/nsis.png").default}
+    src={require("@site/static/img/nsis.webp").default}
     style={{ "max-width": "50%" }}
   />
   <br />

website/docs/howdoesitwork.mdx

@@ -11,7 +11,7 @@ version of the runtime library. Finally, it is possible to bind Go methods to th
 Javascript methods that can be called, just as if they were local Javascript methods.
 
 <div className="text--center">
-  <img src={require("@site/static/img/architecture.png").default} width="75%" />
+  <img src={require("@site/static/img/architecture.webp").default} width="75%" />
 </div>
 
 ## The Main Application

website/docs/introduction.mdx

@@ -29,7 +29,7 @@ you'd expect from a modern native app.
 
 <p class="text--center">
   <a href="https://varly.app/">
-    <img src={require("@site/static/img/varly.png").default} width="75%" />
+    <img src={require("@site/static/img/varly.webp").default} width="75%" />
   </a>
 </p>
 

website/docs/reference/options.mdx

@@ -548,9 +548,9 @@ Preconfigured titlebar settings are available:
 
 | Setting                     | Example                                       |
 | --------------------------- | --------------------------------------------- |
-| `mac.TitleBarDefault()`     | ![](/img/reference/titlebar-default.png)      |
-| `mac.TitleBarHidden()`      | ![](/img/reference/titlebar-hidden.png)       |
-| `mac.TitleBarHiddenInset()` | ![](/img/reference/titlebar-hidden-inset.png) |
+| `mac.TitleBarDefault()`     | ![](/img/reference/titlebar-default.webp)      |
+| `mac.TitleBarHidden()`      | ![](/img/reference/titlebar-hidden.webp)       |
+| `mac.TitleBarHiddenInset()` | ![](/img/reference/titlebar-hidden-inset.webp) |
 
 Example:
 
@@ -619,7 +619,7 @@ The "About" menu item will appear in the app menu:
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/reference/about-menu.png").default}
+    src={require("@site/static/img/reference/about-menu.webp").default}
     class="screenshot"
   />
 </div>
@@ -629,7 +629,7 @@ When clicked, that will open an about message box:
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/reference/about-dialog.png").default}
+    src={require("@site/static/img/reference/about-dialog.webp").default}
     width="40%"
     class="screenshot"
   />

website/docs/tutorials/dogsapi.mdx

@@ -6,7 +6,7 @@ sidebar_position: 20
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/tutorials/dogsapi/img.png").default}
+    src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
     width="50%"
     className="screenshot"
   />

website/docs/tutorials/helloworld.mdx

@@ -96,7 +96,7 @@ If we view the `build/bin` directory in Windows Explorer, we should see our proj
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/helloworld-app-icon.png").default}
+    src={require("@site/static/img/helloworld-app-icon.webp").default}
     width="134px"
   />
 </div>
@@ -112,7 +112,7 @@ You should see the application working as expected:
 
 <div class="text--center">
   <img
-    src={require("@site/static/img/windows-default-app.png").default}
+    src={require("@site/static/img/windows-default-app.webp").default}
     width="50%"
     className="screenshot"
   />