diff --git a/package.json b/package.json
index b16cd97..d02dda7 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
 		"@sveltejs/kit": "^1.25.1",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
-		"@zerodevx/svelte-img": "^1.2.11",
+		"@zerodevx/svelte-img": "^2.1.0",
 		"autoprefixer": "^10.4.16",
 		"eslint": "^8.45.0",
 		"eslint-config-prettier": "^8.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6bc92d3..85a02ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,8 +56,8 @@ devDependencies:
     specifier: ^5.62.0
     version: 5.62.0(eslint@8.45.0)(typescript@5.2.2)
   '@zerodevx/svelte-img':
-    specifier: ^1.2.11
-    version: 1.2.11(svelte@4.2.1)
+    specifier: ^2.1.0
+    version: 2.1.0(svelte@4.2.1)
   autoprefixer:
     specifier: ^10.4.16
     version: 10.4.16(postcss@8.4.30)
@@ -1465,14 +1465,13 @@ packages:
       - supports-color
     dev: true
 
-  /@zerodevx/svelte-img@1.2.11(svelte@4.2.1):
-    resolution: {integrity: sha512-LEjs8AjofvE2JxRPGTT/nvoFf10MqpXpylZ/Prs3vSN11FEavxRkBsCNZdsqcV9GMEkrk5LFfpxSteix/NHgtQ==}
+  /@zerodevx/svelte-img@2.1.0(svelte@4.2.1):
+    resolution: {integrity: sha512-ktOcv5svIm8qQQ7sBnSST1zaA5mJpTp+MbzaMeDNBEw4hulwzSD0VRPtq/pvYsjacA1OAw+JIN/qmBl7doh7HA==}
     peerDependencies:
       svelte: ^3.55.1 || ^4.0.0
     dependencies:
-      imagetools-core: 3.3.1
       svelte: 4.2.1
-      vite-imagetools: 4.0.18
+      vite-imagetools: 5.0.8
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -2861,13 +2860,6 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /imagetools-core@3.3.1:
-    resolution: {integrity: sha512-xllF2GDRg0SXCQQRxBAtE6N9dPAttc+ro+QDLnRmVSE5lH5clQxD2Al4XluirXj0T7lIH5VbetFmBLowW6ps+w==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      sharp: 0.31.3
-    dev: true
-
   /imagetools-core@4.0.5:
     resolution: {integrity: sha512-sNRVfUwkUcsVWNn5inTHDXWzpPRWPWbSgGkuQmlsFCWXAR2+K5R5vG5tC3Qs4LeJaMugKB8hGVm6rvZjFHQrUw==}
     engines: {node: '>=12.0.0'}
@@ -3336,10 +3328,6 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /node-addon-api@5.1.0:
-    resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==}
-    dev: true
-
   /node-addon-api@6.1.0:
     resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
     dev: true
@@ -4316,21 +4304,6 @@ packages:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
     dev: true
 
-  /sharp@0.31.3:
-    resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==}
-    engines: {node: '>=14.15.0'}
-    requiresBuild: true
-    dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.2
-      node-addon-api: 5.1.0
-      prebuild-install: 7.1.1
-      semver: 7.5.4
-      simple-get: 4.0.1
-      tar-fs: 2.1.1
-      tunnel-agent: 0.6.0
-    dev: true
-
   /sharp@0.32.6:
     resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
     engines: {node: '>=14.15.0'}
@@ -4926,16 +4899,6 @@ packages:
       unist-util-stringify-position: 2.0.3
     dev: true
 
-  /vite-imagetools@4.0.18:
-    resolution: {integrity: sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      '@rollup/pluginutils': 5.0.2
-      imagetools-core: 3.3.1
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /vite-imagetools@5.0.8:
     resolution: {integrity: sha512-oFNfc58iLz1lHFsIKQy+wp0RNcZjiaDeHYTexYowpf4RYx9tZ97eWEcw8lQ1jDT8AnOso6XZi5iGjLNAeTR9Tw==}
     engines: {node: '>=12.0.0'}
diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
new file mode 100644
index 0000000..d48e021
--- /dev/null
+++ b/src/lib/components/LazyImage.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Img from '@zerodevx/svelte-img';
+	import type { ExternalImageSource } from '../types/album';
+
+	export let clazz = "";
+	export let src: Record<string, any> | ExternalImageSource[] | undefined;
+	export let alt: string;
+	export let style = "";
+	export let loading: "lazy" | "eager" = "lazy";
+
+	let ref: any;
+	let loaded: boolean;
+
+	onMount(() => {
+		if (ref.complete)	{
+			loaded = true;
+		}
+	})
+</script>
+
+<div class="wrap">
+	<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
+	<div class="blur" class:loaded />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/Portfolio.svelte b/src/lib/components/Portfolio.svelte
index 81bf47c..92459c7 100644
--- a/src/lib/components/Portfolio.svelte
+++ b/src/lib/components/Portfolio.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import Img from '@zerodevx/svelte-img';
+	import LazyImage from './LazyImage.svelte';
 
 	export let name: string;
 	export let src: Record<string, any>;
 	export let alt: string;
-	export let style: string;
+	export let style = "";
 	export let loading: "lazy" | "eager" = "lazy";
 </script>
 
 <div class="portfolio">
 	<div class="portfolio-picture">
 		<h2>{name}</h2>
-		<Img class="portfolio-image better-blur" {style} {src} {alt} {loading} />
+		<LazyImage {style} {src} {alt} {loading} />
 		<slot name="portfolio-links" />
 	</div>
 	<div class="portfolio-details">
@@ -24,14 +24,6 @@
 		border-radius: 3px;
 	}
 
-	:global(img.better-blur)::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		backdrop-filter: blur(20px);
-		pointer-events: none;
-	}
-
 	:global(.portfolio) {
 		display: grid;
 		grid-template-columns: minmax(200px, 500px) auto;
diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte
index b239fb3..3d74348 100644
--- a/src/lib/components/bandcamp/index.svelte
+++ b/src/lib/components/bandcamp/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
 	import type { Album } from "$root/lib/types/album";
+	import LazyImage from '../LazyImage.svelte';
 
 
 	export let albums: Album[];
@@ -8,11 +9,25 @@
 		albums?.length > 6 ? albums.slice(0, 6) : albums;
 
 	for (let album of displayAlbums) {
-		album.src = [
-			{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
-			{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
-			{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
-		]
+		album.src = {
+			img: { src: `${album.artwork}`, w: 230, h: 230 },
+			sources: {
+				avif: [
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				],
+				webp: [
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				],
+				jpg: [
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				]
+			}
+		}
+		// [
+		// 	{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
+		// 	{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
+		// 	{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
+		// ]
 	}
 </script>
 
@@ -28,7 +43,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<Img class="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
+						<LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
 					</a>
 				</figure>
 				<a
diff --git a/src/lib/types/album.ts b/src/lib/types/album.ts
index e34c149..83c34ea 100644
--- a/src/lib/types/album.ts
+++ b/src/lib/types/album.ts
@@ -8,7 +8,7 @@ export type Album = {
 
 export type ExternalImageSource = {
 	format: string;
-	src: string;
-	width: number;
-	height?: number;
+	img: string;
+	w: number;
+	h?: number;
 };
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 9829c0d..052f2e0 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -10,9 +10,10 @@
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
 	import SEO from "$lib/components/SEO.svelte";
-	import space_needle from '$lib/assets/images/space-needle.png?run';
-	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
-	import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
+	import LazyImage from '$root/lib/components/LazyImage.svelte';
+	import adventure from '$lib/assets/images/adventure.png?as=run:0';
+	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?as=run';
+	import orange_derp from '$lib/assets/images/orange_derp.jpg?as=run';
 	import turnip from '$lib/assets/images/turnip.svg';
 	import Tag from '$root/lib/components/Tag.svelte';
 	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
@@ -255,7 +256,7 @@
 		<h2>Other fun things about me&hellip;</h2>
 		<div style="display: grid;">
 			<p>
-				Currently living in Seattle after a long road trip!
+				Currently traveling around the world!
 			</p>
 			<div
 				style="
@@ -265,19 +266,19 @@
 					justify-content: center;
 				"
 			>
-				<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
-				<p class="center">Seattle Space Needle</p>
+				<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
+				<p class="center">Traveling around</p>
 			</div>
 		</div>
 		<div>
 			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
 			<div class="cat-pics">
 				<figure>
-					<Img class="portfolio-image better-blur" src={tortie_derp} alt="Turnip Cat" />
+					<LazyImage src={tortie_derp} alt="Turnip Cat" />
 					<p class="center">Turnip <img class="icon" src={turnip} width="25px" height="25px" alt="Turnip" /></p>
 				</figure>
 				<figure>
-					<Img class="portfolio-image better-blur" src={orange_derp} alt="Taco Cat" />
+					<LazyImage src={orange_derp} alt="Taco Cat" />
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 2d57beb..a4c5fe0 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -3,13 +3,13 @@
 	import GitHub from '@iconify-icons/simple-icons/github';
 	import SEO from '$lib/components/SEO.svelte';
 	import Portfolio from '$lib/components/Portfolio.svelte';
-	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?run";
-  import weddingWebsite from "$lib/assets/images/Wedding_Website.png?run";
-	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?run';
-	import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?run";
+	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?as=run";
+  import weddingWebsite from "$lib/assets/images/Wedding_Website.png?as=run";
+	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?as=run';
+	import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?as=run";
 	import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
 	import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
-	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run';
+	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?as=run';
 	import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 3d734d8..8abcf68 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
 	import SEO from "$lib/components/SEO.svelte";
-	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
+	import ExternalLink from '$lib/components/ExternalLink.svelte';
+	import LazyImage from '$lib/components/LazyImage.svelte';
+	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?as=run';
 	import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
 	import Development from '$lib/content/uses/development.md';
 	import PrivacyHardwareSoftware from '$lib/content/uses/privacy-hardware-software.md';
-	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
 </script>
 
 <SEO title="Uses" />
@@ -18,7 +19,7 @@
 		</p>
 	</div>
 	<div class="uses-image">
-		<Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
+		<LazyImage clazz="uses-image" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
 	</div>
 	<div>
 		<HardwareAccessories />
diff --git a/src/styles/global.pcss b/src/styles/global.pcss
index 12fb178..03ce6e4 100644
--- a/src/styles/global.pcss
+++ b/src/styles/global.pcss
@@ -65,7 +65,7 @@
 	--cardWidthMin: 15rem;
 
 	/* Media Queries - Not yet supported in CSS */
-	/* 
+	/*
       --xsmall: 340px;
       --small: 500px;
       --large: 960px;
@@ -265,3 +265,19 @@ figure {
 .card > *:last-child {
 	margin-bottom: 0;
 }
+
+.blur {
+	position: absolute;
+	inset: 0;
+	backdrop-filter: blur(20px);
+	pointer-events: none;
+}
+
+.wrap {
+	position: relative;
+	overflow: hidden;
+}
+
+.loaded {
+	display: none;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 342a935..4cf40fc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 import { imagetools } from '@zerodevx/svelte-img/vite';
-// import { imagetools } from 'vite-imagetools';
 
 const config: UserConfig = {
 	plugins: [
 		sveltekit(),
 		imagetools({
 			// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
-			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
-			defaultDirectives: () =>
-				new URLSearchParams('?width=300;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
+			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP (Now as:run)
+			profiles: {
+				run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
+			}
 		})
 	],
 	test: {