Reduce website static content file size by a lot

website/content/volunteer/guide/codebase-overview/_index.md

@@ -5,10 +5,11 @@ page_template = "book.html"
 
 [extra]
 order = 2 # Chapter number
+js = ["/video-embed.js"]
 +++
 
 <div class="video-embed aspect-16x9">
-	<iframe width="1280" height="720" src="https://www.youtube.com/embed/vUzIeg8frh4" title="Workshop: Intro to Coding for Graphite" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<img data-video-embed="vUzIeg8frh4" src="https://static.graphite.rs/content/volunteer/guide/workshop-intro-to-coding-for-graphite-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Workshop: Intro to Coding for Graphite" />
 </div>
 
 The Graphite editor is built as a web app powered by Svelte in the frontend and Rust in the backend which is compiled to WebAssembly (wasm) and run in the browser.

website/content/volunteer/guide/codebase-overview/contributing-guidelines.md

@@ -44,4 +44,4 @@ Once you begin writing code, please open a pull request immediately and mark it
 
 Open a new PR as a draft / convert an existing PR to a draft:
 
-![Screenhots showing GitHub's "Create pull request (arrow) > Create draft pull request" and "Still in progress? Convert to draft" buttons](https://static.graphite.rs/content/volunteer/guide/draft-pr.png)
+<img src="https://static.graphite.rs/content/volunteer/guide/draft-pr.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Screenhots showing GitHub's &quot;Create pull request (arrow) > Create draft pull request&quot; and &quot;Still in progress? Convert to draft&quot; buttons" />