diff --git a/src/lib/components/ImageLoader.svelte b/src/lib/components/ImageLoader.svelte
new file mode 100644
index 0000000..5e44a77
--- /dev/null
+++ b/src/lib/components/ImageLoader.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	// Props
+	export let src: string;
+	export let alt: string = '';
+	export let dimensions: { width: number; height: number } | undefined = undefined;
+	export let className: string = '';
+	export let imageClassName: string = '';
+
+	// State
+	let loaded = false;
+	let error = false;
+
+	// Normalize path so nested routes (e.g., /publications/paper-name) don't break relative paths
+	$: normalizedSrc = src.startsWith('/') || src.startsWith('http') ? src : `/${src}`;
+
+	// Calculate aspect ratio string if dimensions exist
+	$: aspectRatio = dimensions ? `${dimensions.width} / ${dimensions.height}` : 'auto';
+
+	function handleLoad() {
+		loaded = true;
+	}
+
+	function handleError() {
+		error = true;
+		loaded = true;
+	}
+</script>
+
+<div class="relative w-full overflow-hidden {className}" style="aspect-ratio: {aspectRatio};">
+	<!-- Skeleton Loader -->
+	{#if !loaded && !error}
+		<div class="absolute inset-0 bg-primary/10 animate-pulse" aria-hidden="true"></div>
+	{/if}
+
+	<!-- Actual Image -->
+	<img
+		src={normalizedSrc}
+		{alt}
+		on:load={handleLoad}
+		on:error={handleError}
+		class="absolute inset-0 h-full w-full object-contain transition-all duration-700 ease-in-out {loaded &&
+		!error
+			? 'opacity-100'
+			: 'opacity-0'} {imageClassName}"
+	/>
+</div>
diff --git a/src/lib/helpers/projectsProvider.ts b/src/lib/helpers/projectsProvider.ts
index 73d9e9f..a70ec9e 100644
--- a/src/lib/helpers/projectsProvider.ts
+++ b/src/lib/helpers/projectsProvider.ts
@@ -5,6 +5,133 @@ import Web from 'svelte-material-icons/Web.svelte';
 import Youtube from 'svelte-material-icons/Youtube.svelte';
 import { FunProject, LinkWithIcon, ResearchProject } from '../types';
 
+const imageDimensions: Record<string, { width: number; height: number }> = {
+	'images/NAPs.png': {
+		width: 1000,
+		height: 450
+	},
+	'images/alphaevolve.png': {
+		width: 2043,
+		height: 1077
+	},
+	'images/bert.png': {
+		width: 1926,
+		height: 830
+	},
+	'images/breath.png': {
+		width: 1200,
+		height: 512
+	},
+	'images/cgvc.png': {
+		width: 1600,
+		height: 1200
+	},
+	'images/contagion.png': {
+		width: 1024,
+		height: 1024
+	},
+	'images/dotfiles.png': {
+		width: 256,
+		height: 256
+	},
+	'images/eot.png': {
+		width: 500,
+		height: 412
+	},
+	'images/exploRNN.png': {
+		width: 1926,
+		height: 992
+	},
+	'images/fibrils.png': {
+		width: 2866,
+		height: 1250
+	},
+	'images/gemini.png': {
+		width: 3846,
+		height: 1624
+	},
+	'images/hie.png': {
+		width: 1000,
+		height: 729
+	},
+	'images/humboldt.png': {
+		width: 1292,
+		height: 625
+	},
+	'images/image_quality.png': {
+		width: 923,
+		height: 477
+	},
+	'images/luna.png': {
+		width: 1000,
+		height: 1000
+	},
+	'images/midosa.png': {
+		width: 1114,
+		height: 1114
+	},
+	'images/mint.png': {
+		width: 888,
+		height: 538
+	},
+	'images/mySnow.png': {
+		width: 1024,
+		height: 1024
+	},
+	'images/nPMI.png': {
+		width: 1596,
+		height: 774
+	},
+	'images/net2vis.png': {
+		width: 1916,
+		height: 1046
+	},
+	'images/npmiVIS.png': {
+		width: 4000,
+		height: 2240
+	},
+	'images/openhands.png': {
+		width: 542,
+		height: 362
+	},
+	'images/other_left.png': {
+		width: 678,
+		height: 424
+	},
+	'images/pc-missing-data.png': {
+		width: 2500,
+		height: 850
+	},
+	'images/preview.png': {
+		width: 1200,
+		height: 630
+	},
+	'images/svelte-vega.png': {
+		width: 434,
+		height: 336
+	},
+	'images/symphony.png': {
+		width: 291,
+		height: 296
+	},
+	'images/tox.png': {
+		width: 357,
+		height: 260
+	},
+	'images/vegaprof.png': {
+		width: 2100,
+		height: 688
+	},
+	'images/zeno.png': {
+		width: 617,
+		height: 615
+	},
+	'images/vispositions.svg': {
+		width: 1000,
+		height: 500
+	}
+};
+
 let cachedResearchProjects: ResearchProject[] | null = null;
 
 /**
@@ -400,6 +527,9 @@ export function getResearchProjects(): ResearchProject[] {
 		)
 	];
 	projects.sort((a, b) => parseInt(b.year) - parseInt(a.year));
+	projects.forEach((p) => {
+		if (imageDimensions[p.imageSrc]) p.imageDimensions = imageDimensions[p.imageSrc];
+	});
 	cachedResearchProjects = projects;
 	return projects;
 }
@@ -505,6 +635,9 @@ export function getFunProjects(): FunProject[] {
 			]
 		)
 	];
+	projects.forEach((p) => {
+		if (imageDimensions[p.imageSrc]) p.imageDimensions = imageDimensions[p.imageSrc];
+	});
 	cachedFunProjects = projects;
 	return projects;
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
index fbb99d1..52ee71b 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -24,6 +24,7 @@ export class Project {
 	title: string;
 	abstract: string;
 	imageSrc: string;
+	imageDimensions?: { width: number; height: number };
 	links: LinkWithIcon[];
 	/**
 	 * Creates a project
@@ -32,11 +33,19 @@ export class Project {
 	 * @param {String} abstract the abstract of the project/paper
 	 * @param {String} imageSrc the image source for the project
 	 * @param {[LinkWithIcon]} links links from the project to more information
+	 * @param {{ width: number; height: number }} imageDimensions dimensions of the image
 	 */
-	constructor(title: string, abstract: string, imageSrc: string, links: LinkWithIcon[] = []) {
+	constructor(
+		title: string,
+		abstract: string,
+		imageSrc: string,
+		links: LinkWithIcon[] = [],
+		imageDimensions?: { width: number; height: number }
+	) {
 		this.title = title;
 		this.abstract = abstract;
 		this.imageSrc = imageSrc;
+		this.imageDimensions = imageDimensions;
 		this.links = links;
 	}
 }
@@ -59,6 +68,7 @@ export class ResearchProject extends Project {
 	 * @param {String} venue the venue of the publication
 	 * @param {String} imageSRC the image source for the project
 	 * @param {[LinkWithIcon]} links links from the project to more information
+	 * @param {{ width: number; height: number }} imageDimensions dimensions of the image
 	 */
 	constructor(
 		title: string,
@@ -67,9 +77,10 @@ export class ResearchProject extends Project {
 		year: string,
 		venue: string,
 		imageSRC: string,
-		links: LinkWithIcon[] = []
+		links: LinkWithIcon[] = [],
+		imageDimensions?: { width: number; height: number }
 	) {
-		super(title, abstract, imageSRC, links);
+		super(title, abstract, imageSRC, links, imageDimensions);
 		this.authors = authors;
 		this.year = year;
 		this.venue = venue;
@@ -87,9 +98,16 @@ export class FunProject extends Project {
 	 * @param {String} abstract the abstract of the project/paper
 	 * @param {String} imageSRC the image source for the project
 	 * @param {[LinkWithIcon]} links links from the project to more information
+	 * @param {{ width: number; height: number }} imageDimensions dimensions of the image
 	 */
-	constructor(title: string, abstract: string, imageSRC: string, links: LinkWithIcon[] = []) {
-		super(title, abstract, imageSRC, links);
+	constructor(
+		title: string,
+		abstract: string,
+		imageSRC: string,
+		links: LinkWithIcon[] = [],
+		imageDimensions?: { width: number; height: number }
+	) {
+		super(title, abstract, imageSRC, links, imageDimensions);
 	}
 }
 
diff --git a/src/routes/publications/+page.svelte b/src/routes/publications/+page.svelte
index d0c1f6b..cab3259 100644
--- a/src/routes/publications/+page.svelte
+++ b/src/routes/publications/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Icon from '$lib/components/Icon.svelte';
+	import ImageLoader from '$lib/components/ImageLoader.svelte';
 	import { getResearchProjects, slugify } from '$lib/helpers/projectsProvider';
 	import { reveal } from '$lib/actions/reveal';
 
@@ -57,10 +58,12 @@
 
 						<!-- Thumbnail -->
 						<div class="shrink-0 overflow-hidden rounded-lg">
-							<img
+							<ImageLoader
 								src={pub.imageSrc}
 								alt={pub.title}
-								class="h-auto w-full object-contain transition-transform duration-500 group-hover:scale-[1.03] sm:w-48"
+								dimensions={pub.imageDimensions}
+								className="w-full sm:w-48"
+								imageClassName="transition-transform duration-500 group-hover:scale-[1.03]"
 							/>
 						</div>
 
diff --git a/src/routes/publications/[paper]/+page.svelte b/src/routes/publications/[paper]/+page.svelte
index 367f8fe..9ee888f 100644
--- a/src/routes/publications/[paper]/+page.svelte
+++ b/src/routes/publications/[paper]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import Icon from '$lib/components/Icon.svelte';
+	import ImageLoader from '$lib/components/ImageLoader.svelte';
 	import { getResearchProjects, slugify } from '$lib/helpers/projectsProvider';
 	import { reveal } from '$lib/actions/reveal';
 
@@ -80,12 +81,12 @@
 				<div
 					class="order-1 overflow-hidden rounded-2xl border border-primary/10 bg-background-card/50 p-2 shadow-sm backdrop-blur-sm md:order-2 md:col-span-2 md:col-start-4 md:row-start-1"
 				>
-					<img
-						src={paper.imageSrc.startsWith('/') || paper.imageSrc.startsWith('http')
-							? paper.imageSrc
-							: `/${paper.imageSrc}`}
+					<ImageLoader
+						src={paper.imageSrc}
 						alt={paper.title}
-						class="h-auto w-full rounded-xl object-contain"
+						dimensions={paper.imageDimensions}
+						className="w-full"
+						imageClassName="rounded-xl"
 					/>
 				</div>