Using vite-imagetools for all images on other pages.

src/routes/about/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Image } from 'svelte-lazy-loader';
+	import { Image, Picture } from 'svelte-lazy-loader';
 	import Graphql from '@iconify-icons/simple-icons/graphql';
 	import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
 	import Prisma from '@iconify-icons/simple-icons/prisma';
@@ -10,9 +10,12 @@
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
 	import SEO from "$root/lib/components/SEO.svelte";
-	import adventure from '$lib/assets/images/adventure.png';
+	import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata';
-	import orange_derp from '$lib/assets/images/orange_derp.jpg';
+	import space_needle_blurred from '$lib/assets/images/space-needle.png?w=100&png&blur=10';
-	import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
+	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata';
+	import tortie_derp_blurred from '$lib/assets/images/tortie_derp.jpg?w=100&jpg&blur=10';
+	import orange_derp from '$lib/assets/images/orange_derp.jpg?format=webp;avif;jpg&metadata';
+	import orange_derp_blurred from '$lib/assets/images/orange_derp.jpg?w=100&jpg&blur=10';
 </script>
 
 <SEO title="About" />
@@ -288,7 +291,11 @@
 				"
 			>
 				<figure>
-					<Image src={adventure} alt="Road Trip Adventure" />
+					<Picture placeholder={space_needle_blurred} src="images/space_needle.png" alt="Clip art of the Seattle space needle">
+						{#each space_needle as { src, format }}
+							<source data-srcset={src} type="image/{format}" />
+						{/each}
+					</Picture>
 					<p class="center">Route 66 Road Trip</p>
 				</figure>
 			</div>
@@ -297,11 +304,19 @@
 			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
 			<div class="cat-pics">
 				<figure>
-					<Image src={tortie_derp} alt="Turnip Cat" />
+					<Picture placeholder={tortie_derp_blurred} src="images/tortie_derp.jpg" alt="Turnip Cat">
+						{#each tortie_derp as { src, format }}
+							<source data-srcset={src} type="image/{format}" />
+						{/each}
+					</Picture>
 					<p class="center">Turnip</p>
 				</figure>
 				<figure>
-					<Image src={orange_derp} alt="Taco Cat" />
+					<Picture placeholder={orange_derp_blurred} src="images/orange_derp.jpg" alt="Taco Cat">
+						{#each orange_derp as { src, format }}
+							<source data-srcset={src} type="image/{format}" />
+						{/each}
+					</Picture>
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>

src/routes/uses/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { Image, Picture } from "svelte-lazy-loader";
 	import SEO from "$root/lib/components/SEO.svelte";
-	import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg';
+	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
-	import { Image } from "svelte-lazy-loader";
+	import desktopBlurred from '$lib/assets/images/Desktop_so_clean.jpg?w=100&jpg&blur=10';
 </script>
 
 <SEO title="Uses" />
@@ -43,7 +44,11 @@
 		<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
 			<figure>
 				<div>
-					<Image src={DesktopImage} alt="Clean desktop" />
+					<Picture placeholder={desktopBlurred} src="images/Desktop_so_clean.jpg" alt="Clean desk with Samsung monitor and Ducky Keyboard">
+						{#each desktop as { src, format }}
+							<source data-srcset={src} type="image/{format}" />
+						{/each}
+					</Picture>
 				</div>
 			</figure>
 		</div>