feat: image optimization with imagetools

haha imagetools go brrr

src/lib/components/atoms/HeroImage.svelte

@@ -1,16 +1,18 @@
 <script>
+  import Picture from './Picture.svelte';
+  import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
 </script>
 
 <div class="hero-img">
-	<img src="/manager_two.png" alt="Screenshot of ReVanced Manager" />
+  <Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
 </div>
 
 <style>
-	img {
-		height: 100%;
-		border-radius: 2rem;
+  .hero-img :global(img) {
+	  height: 100%;
+	  border-radius: 2rem;
+  }
 
-	}
 	.hero-img {
 		overflow: hidden;
 		height: 70vh;

src/lib/components/atoms/Picture.svelte

@@ -0,0 +1,12 @@
+<script>
+  // See: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#picture
+  export let data;
+  export let alt;
+</script>
+
+<picture>
+  {#each Object.entries(data.sources) as [format, images]}
+    <source srcset={images.map(img => `${img.src} ${img.w}w`).join(", ")} type="image/{format}">
+  {/each}
+  <img {alt} src={data.fallback.src} />
+</picture>

src/routes/download/+page.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { tools } from '../../data/api';
+
 	import Button from '$lib/components/atoms/Button.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
+  import Picture from '$lib/components/atoms/Picture.svelte';
+
+  import manager_screenshot from '$images/manager_two.png?format=avif;webp;png&picture';
 
 	$: manager = $tools['revanced/revanced-manager'];
 </script>
@@ -10,7 +14,9 @@
 	<h1>ReVanced <span>Manager</span></h1>
 	<h6>Patch your favourite apps, on-device.</h6>
 	<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
-	<img src="../manager_two.png" alt="Manager Screenshot" />
+  <div class="screenshot">
+    <Picture data={manager_screenshot} alt="Manager Screenshot" />
+  </div>
 </div>
 
 <Footer />
@@ -33,7 +39,7 @@
 		margin-bottom: 1.5rem;
 	}
 
-	img {
+	.screenshot :global(img) {
 		margin-top: 2.5rem;
 		margin-bottom: 2.5rem;
 		height: 50rem;