From dead3073f57ac5a39a6273cd4e40ec94de201e7f Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 9 Apr 2023 13:56:18 -0700
Subject: [PATCH] Fix other image tags.

---
 src/routes/about/+page.svelte | 26 +++++++++++++-------------
 src/routes/uses/+page.svelte  | 12 +++---------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 729322b..aff02af 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Picture } from 'svelte-lazy-loader';
+	import Img from '@zerodevx/svelte-img';
 	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';
@@ -9,12 +9,9 @@
 	import Remix from '@iconify-icons/simple-icons/remix';
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
-	import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata';
-	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?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';
+	import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata?run';
+	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata?run';
+	import orange_derp from '$lib/assets/images/orange_derp.jpg?format=webp;avif;jpg&metadata?run';
 	import Tag from '$root/lib/components/Tag.svelte';
 	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
 </script>
@@ -269,11 +266,12 @@
 				"
 			>
 				<figure>
-					<Picture placeholder={space_needle_blurred} src="images/space_needle.png" alt="Clip art of the Seattle space needle">
+					<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
+					<!-- <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>
+					</Picture> -->
 					<p class="center">Seattle Space Needle</p>
 				</figure>
 			</div>
@@ -282,19 +280,21 @@
 			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
 			<div class="cat-pics">
 				<figure>
-					<Picture placeholder={tortie_derp_blurred} src="images/tortie_derp.jpg" alt="Turnip Cat">
+					<Img class="portfolio-image better-blur" 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>
+					</Picture> -->
 					<p class="center">Turnip</p>
 				</figure>
 				<figure>
-					<Picture placeholder={orange_derp_blurred} src="images/orange_derp.jpg" alt="Taco Cat">
+					<Img class="portfolio-image better-blur" 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>
+					</Picture> -->
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 22a52c4..031dd70 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { Picture } from "svelte-lazy-loader";
-	import desktop from '$lib/assets/images/Desktop_so_clean.jpg';
-	import desktopFormats from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
-	import desktopBlurred from '$lib/assets/images/Desktop_so_clean.jpg?w=100&jpg&blur=10';
+	import Img from '@zerodevx/svelte-img';
+	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
 </script>
 
 <svelte:head>
@@ -43,11 +41,7 @@
 	</div>
 	<div class="uses-block-styles">
 		<figure>
-			<Picture placeholder={desktopBlurred} src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading='eager'>
-				{#each desktopFormats as { src, format }}
-					<source data-srcset={src} type="image/{format}" />
-				{/each}
-			</Picture>
+			<Img class="portfolio-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
 		</figure>
 		<h2>Hardware & Accessories</h2>
 		<ul>