Using svelte-img for external image rendering on bandcamp images.

src/lib/components/bandcamp/index.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
+	import Img from '@zerodevx/svelte-img';
 	import type { Album } from "$root/lib/types/album";
 
 
 	export let albums: Album[];
 	const displayAlbums =
 		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}
+		]
+	}
 </script>
 
 <div>
@@ -19,12 +28,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<img
+						<Img src={album.src} alt={`Album art for ${album.title}`} />
-							src={`https://images.weserv.nl/?url=${encodeURIComponent(
-								album.artwork
-							)}&w=230&h=230`}
-							alt={`Album art for ${album.title}`}
-						/>
 					</a>
 				</figure>
 				<a
@@ -81,6 +85,11 @@
 		justify-content: center;
 		text-align: center;
 
+		figure {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
 		@media (max-width: 550px) {
 			grid-template-columns: 0.75fr 0.75fr;
 			font-size: 1rem;

src/lib/types/album.ts

@@ -3,4 +3,12 @@ export type Album = {
 	artwork: string;
 	title: string;
 	artist: string;
+	src?: ExternalImageSource[];
+};
+
+export type ExternalImageSource = {
+	format: string;
+	src: string;
+	width: number;
+	height: number;
 };