diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index ea362eb..5addcf6 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -3,6 +3,7 @@
 	import clsx from 'clsx';
 	import { onMount } from 'svelte';
 	import type { ClassValue } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
 	import { twMerge } from 'tailwind-merge';
 
 	interface Props {
@@ -36,11 +37,20 @@
 {#if loading}
 	<div class={twMerge('skeleton rounded-none', clsx(className))}></div>
 {:else if failed}
-	<div class={twMerge('skeleton text-base-content relative rounded-none', clsx(className))}>
+	<div
+		class={twMerge('skeleton text-base-content relative rounded-none', clsx(className))}
+		transition:fade={{ duration: 250 }}
+	>
 		<ImageOff
 			class="absolute top-[50%] left-[50%] h-1/4 w-1/4 translate-x-[-50%] translate-y-[-50%] opacity-20"
 		/>
 	</div>
 {:else}
-	<img class={clsx(className)} {src} {alt} onload={() => (loading = false)} />
+	<img
+		class={clsx(className)}
+		{src}
+		{alt}
+		onload={() => (loading = false)}
+		transition:fade={{ duration: 250 }}
+	/>
 {/if}