feat: image optimization with imagetools

haha imagetools go brrr

package.json

@@ -30,7 +30,8 @@
 		"svelte-preprocess": "^4.10.6",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
-		"vite": "^3.0.0"
+		"vite": "^3.0.0",
+		"vite-imagetools": "^4.0.11"
 	},
 	"type": "module",
 	"dependencies": {

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 {
+  .hero-img :global(img) {
-		height: 100%;
+	  height: 100%;
-		border-radius: 2rem;
+	  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;

vite.config.js

@@ -1,8 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { imagetools } from 'vite-imagetools'
+
+import path from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), imagetools()],
+  resolve: {
+    alias: {
+      '$images': path.resolve('./images'),
+    },
+  },
 };
 
 export default config;