diff --git a/apps/desktop/src/components/ImageDiff.svelte b/apps/desktop/src/components/ImageDiff.svelte
new file mode 100644
index 0000000000..fbc2244fc5
--- /dev/null
+++ b/apps/desktop/src/components/ImageDiff.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import emptyFileSvg from '$lib/assets/empty-state/empty-file.svg?raw';
+	import { FILE_SERVICE } from '$lib/files/fileService';
+	import { inject } from '@gitbutler/core/context';
+	import { ImageDiff, EmptyStatePlaceholder } from '@gitbutler/ui';
+	import type { TreeChange } from '$lib/hunks/change';
+
+	type Props = {
+		projectId: string;
+		change: TreeChange;
+		/** If provided, this is a commit diff (not a workspace diff). */
+		commitId?: string;
+	};
+
+	type ImageSource =
+		| { type: 'workspace'; path: string }
+		| { type: 'commit'; path: string; commitId: string }
+		| { type: 'blob'; path: string; blobId: string };
+
+	type LoadStrategy = {
+		before: ImageSource | null;
+		after: ImageSource | null;
+	};
+
+	const { projectId, change, commitId }: Props = $props();
+	const fileService = inject(FILE_SERVICE);
+
+	let beforeImageUrl = $state<string | null>(null);
+	let afterImageUrl = $state<string | null>(null);
+	let loadError = $state<string | null>(null);
+	let isLoading = $state<boolean>(true);
+
+	// Decide image sources for before/after panels without changing logic.
+	function getLoadStrategy(): LoadStrategy {
+		const { status, path } = change;
+		const isCommitDiff = !!commitId;
+
+		switch (status.type) {
+			case 'Addition':
+				return isCommitDiff
+					? { before: null, after: { type: 'commit' as const, path, commitId: commitId! } }
+					: { before: null, after: { type: 'workspace' as const, path } };
+
+			case 'Deletion':
+				return isCommitDiff
+					? { before: { type: 'commit' as const, path, commitId: `${commitId}^` }, after: null }
+					: {
+							before: { type: 'blob' as const, path, blobId: status.subject.previousState.id },
+							after: null
+						};
+
+			case 'Modification':
+				return isCommitDiff
+					? {
+							before: { type: 'commit' as const, path, commitId: `${commitId}^` },
+							after: { type: 'commit' as const, path, commitId: commitId! }
+						}
+					: {
+							before: { type: 'blob' as const, path, blobId: status.subject.previousState.id },
+							after: { type: 'workspace' as const, path }
+						};
+
+			case 'Rename':
+				return isCommitDiff
+					? {
+							before: {
+								type: 'commit' as const,
+								path: status.subject.previousPath,
+								commitId: `${commitId}^`
+							},
+							after: { type: 'commit' as const, path, commitId: commitId! }
+						}
+					: {
+							before: {
+								type: 'blob' as const,
+								path: status.subject.previousPath,
+								blobId: status.subject.previousState.id
+							},
+							after: { type: 'workspace' as const, path }
+						};
+		}
+	}
+
+	/**
+	 * Load image from workspace, commit, or blob.
+	 *
+	 * @param source - The image source to load.
+	 * @param signal - Optional AbortSignal. Note: The backend service methods
+	 *   (readFromWorkspace, readFromCommit, readFromBlob) do NOT support AbortSignal,
+	 *   so the actual IO operations cannot be cancelled once started. The signal is
+	 *   only used to prevent processing results after abortion, not to abort the IO itself.
+	 *
+	 * @returns A data URL string or null.
+	 *
+	 * @remarks
+	 *   This function cannot cancel backend IO operations. If abort support is needed,
+	 *   the backend service methods must be updated to accept and honor AbortSignal.
+	 *   See: https://github.com/gitbutlerapp/gitbutler/issues (file a follow-up if needed)
+	 */
+	async function loadImage(
+		source: ImageSource | null,
+		signal?: AbortSignal
+	): Promise<string | null> {
+		if (!source) return null;
+
+		try {
+			let fileInfo;
+
+			if (source.type === 'workspace') {
+				const { data } = await fileService.readFromWorkspace(source.path, projectId);
+				fileInfo = data;
+			} else if (source.type === 'commit') {
+				fileInfo = await fileService.readFromCommit(source.path, projectId, source.commitId);
+			} else {
+				// type === 'blob'
+				fileInfo = await fileService.readFromBlob(source.path, projectId, source.blobId);
+			}
+
+			if (signal?.aborted) return null;
+
+			if (fileInfo?.content && fileInfo?.mimeType) {
+				return `data:${fileInfo.mimeType};base64,${fileInfo.content}`;
+			}
+
+			return null;
+		} catch (err) {
+			if (signal?.aborted) return null;
+			console.warn(`Failed to load image from ${source.type}: ${source.path}`, err);
+			return null;
+		}
+	}
+
+	// Load both images according to the strategy.
+	async function loadImages(signal?: AbortSignal) {
+		isLoading = true;
+		loadError = null;
+		beforeImageUrl = null;
+		afterImageUrl = null;
+
+		try {
+			const strategy = getLoadStrategy();
+
+			const [before, after] = await Promise.all([
+				loadImage(strategy.before, signal),
+				loadImage(strategy.after, signal)
+			]);
+
+			if (signal?.aborted) return;
+
+			beforeImageUrl = before;
+			afterImageUrl = after;
+
+			if (!before && !after) {
+				loadError = 'Failed to load both images (before and after).';
+			} else if (!before && strategy.before) {
+				loadError = 'Failed to load before image.';
+			} else if (!after && strategy.after) {
+				loadError = 'Failed to load after image.';
+			}
+		} catch (err) {
+			console.error('Failed to load images:', err);
+			loadError = `Failed to load images: ${err instanceof Error ? err.message : String(err)}`;
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$effect(() => {
+		const abortController = new AbortController();
+		loadImages(abortController.signal);
+		return () => abortController.abort();
+	});
+</script>
+
+{#if loadError}
+	<div class="imagediff-placeholder">
+		<EmptyStatePlaceholder image={emptyFileSvg} gap={12} topBottomPadding={34}>
+			{#snippet caption()}
+				Can't preview this file type
+			{/snippet}
+		</EmptyStatePlaceholder>
+	</div>
+{:else}
+	<ImageDiff {beforeImageUrl} {afterImageUrl} fileName={change.path} {isLoading} />
+{/if}
+
+<style lang="scss">
+	.imagediff-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid var(--clr-border-3);
+		border-radius: var(--radius-m);
+	}
+</style>
diff --git a/apps/desktop/src/components/UnifiedDiffView.svelte b/apps/desktop/src/components/UnifiedDiffView.svelte
index 452c3729d1..94b596b858 100644
--- a/apps/desktop/src/components/UnifiedDiffView.svelte
+++ b/apps/desktop/src/components/UnifiedDiffView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import HunkContextMenu from '$components/HunkContextMenu.svelte';
+	import ImageDiff from '$components/ImageDiff.svelte';
 	import LargeDiffMessage from '$components/LargeDiffMessage.svelte';
 	import LineLocksWarning from '$components/LineLocksWarning.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
@@ -21,7 +22,7 @@
 	import { SETTINGS } from '$lib/settings/userSettings';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
-
+	import { isImageFile } from '@gitbutler/shared/utils/file';
 	import { EmptyStatePlaceholder, HunkDiff, TestId } from '@gitbutler/ui';
 	import { DRAG_STATE_SERVICE } from '@gitbutler/ui/drag/dragStateService.svelte';
 	import { parseHunk } from '@gitbutler/ui/utils/diffParsing';
@@ -317,13 +318,17 @@
 				</EmptyStatePlaceholder>
 			</div>
 		{:else if diff.type === 'Binary'}
-			<div class="hunk-placehoder">
-				<EmptyStatePlaceholder image={binarySvg} gap={12} topBottomPadding={34}>
-					{#snippet caption()}
-						Binary! Not for human eyes
-					{/snippet}
-				</EmptyStatePlaceholder>
-			</div>
+			{#if isImageFile(change.path)}
+				<ImageDiff {projectId} {change} {commitId} />
+			{:else}
+				<div class="hunk-placehoder">
+					<EmptyStatePlaceholder image={binarySvg} gap={12} topBottomPadding={34}>
+						{#snippet caption()}
+							Binary! Not for human eyes
+						{/snippet}
+					</EmptyStatePlaceholder>
+				</div>
+			{/if}
 		{/if}
 	</div>
 {/snippet}
diff --git a/apps/desktop/src/lib/files/fileService.ts b/apps/desktop/src/lib/files/fileService.ts
index a4c27235b8..bfd4be3042 100644
--- a/apps/desktop/src/lib/files/fileService.ts
+++ b/apps/desktop/src/lib/files/fileService.ts
@@ -26,6 +26,22 @@ export class FileService {
 		};
 	}
 
+	async readFromCommit(filePath: string, projectId: string, commitId: string): Promise<FileInfo> {
+		return await this.backend.invoke('get_commit_file', {
+			relativePath: filePath,
+			projectId: projectId,
+			commitId: commitId
+		});
+	}
+
+	async readFromBlob(filePath: string, projectId: string, blobId: string): Promise<FileInfo> {
+		return await this.backend.invoke('get_blob_file', {
+			relativePath: filePath,
+			projectId: projectId,
+			blobId: blobId
+		});
+	}
+
 	async readFile(path: string): Promise<Uint8Array> {
 		return await this.backend.readFile(path);
 	}
diff --git a/crates/but-api/src/legacy/repo.rs b/crates/but-api/src/legacy/repo.rs
index 6108453379..38e679dcae 100644
--- a/crates/but-api/src/legacy/repo.rs
+++ b/crates/but-api/src/legacy/repo.rs
@@ -1,5 +1,6 @@
 use std::path::PathBuf;
 
+use crate::json::HexHash;
 use anyhow::{Context as _, Result};
 use but_api_macros::but_api;
 use but_core::DiffSpec;
@@ -70,11 +71,10 @@ pub fn get_uncommitted_files(project_id: ProjectId) -> Result<Vec<RemoteBranchFi
 pub fn get_commit_file(
     project_id: ProjectId,
     relative_path: PathBuf,
-    commit_id: String,
+    commit_id: HexHash,
 ) -> Result<FileInfo> {
     let project = gitbutler_project::get(project_id)?;
-    let commit_id = git2::Oid::from_str(&commit_id).map_err(anyhow::Error::from)?;
-    project.read_file_from_commit(commit_id, &relative_path)
+    project.read_file_from_commit(commit_id.0.to_git2(), &relative_path)
 }
 
 #[but_api]
@@ -84,6 +84,28 @@ pub fn get_workspace_file(project_id: ProjectId, relative_path: PathBuf) -> Resu
     project.read_file_from_workspace(&relative_path)
 }
 
+/// Retrieves file content directly from a Git blob object by its blob ID.
+///
+/// This function is used for displaying image diff previews when the file
+/// isn't available in the current workspace or a specific commit (e.g., for
+/// deleted files or when comparing against a previous state).
+///
+/// # Arguments
+/// * `blob_id` - Git blob object ID as a hexadecimal string
+#[but_api]
+#[instrument(err(Debug))]
+pub fn get_blob_file(
+    project_id: ProjectId,
+    relative_path: PathBuf,
+    blob_id: HexHash,
+) -> Result<FileInfo> {
+    let project = gitbutler_project::get(project_id)?;
+    let repo = project.open_isolated_repo()?;
+    let object = repo.find_object(blob_id).context("Failed to find blob")?;
+    let blob = object.try_into_blob().context("Object is not a blob")?;
+    Ok(FileInfo::from_content(&relative_path, &blob.data))
+}
+
 #[but_api]
 #[instrument(err(Debug))]
 pub fn pre_commit_hook(
diff --git a/crates/but-server/src/lib.rs b/crates/but-server/src/lib.rs
index dfabd19f8c..ea6ada7385 100644
--- a/crates/but-server/src/lib.rs
+++ b/crates/but-server/src/lib.rs
@@ -346,6 +346,7 @@ async fn handle_command(
         "get_uncommitted_files" => legacy::repo::get_uncommitted_files_cmd(request.params),
         "get_commit_file" => legacy::repo::get_commit_file_cmd(request.params),
         "get_workspace_file" => legacy::repo::get_workspace_file_cmd(request.params),
+        "get_blob_file" => legacy::repo::get_blob_file_cmd(request.params),
         "find_files" => legacy::repo::find_files_cmd(request.params),
         "pre_commit_hook" => legacy::repo::pre_commit_hook_cmd(request.params),
         "pre_commit_hook_diffspecs" => legacy::repo::pre_commit_hook_diffspecs_cmd(request.params),
diff --git a/crates/gitbutler-tauri/src/main.rs b/crates/gitbutler-tauri/src/main.rs
index 99d3edbcc6..8cf7fe23c2 100644
--- a/crates/gitbutler-tauri/src/main.rs
+++ b/crates/gitbutler-tauri/src/main.rs
@@ -240,6 +240,7 @@ fn main() -> anyhow::Result<()> {
                 legacy::repo::tauri_get_uncommitted_files::get_uncommitted_files,
                 legacy::repo::tauri_get_commit_file::get_commit_file,
                 legacy::repo::tauri_get_workspace_file::get_workspace_file,
+                legacy::repo::tauri_get_blob_file::get_blob_file,
                 legacy::repo::tauri_find_files::find_files,
                 legacy::repo::tauri_pre_commit_hook::pre_commit_hook,
                 legacy::repo::tauri_pre_commit_hook_diffspecs::pre_commit_hook_diffspecs,
diff --git a/packages/shared/src/lib/utils/file.ts b/packages/shared/src/lib/utils/file.ts
index 11659e0ab4..f02c152867 100644
--- a/packages/shared/src/lib/utils/file.ts
+++ b/packages/shared/src/lib/utils/file.ts
@@ -40,3 +40,21 @@ export function getFilePathInfo(filePath: string): FilePathInfo | undefined {
 
 	return { fileName, extension, directoryPath };
 }
+
+const IMAGE_EXTENSIONS = [
+	'.png',
+	'.jpg',
+	'.jpeg',
+	'.gif',
+	'.webp',
+	'.bmp',
+	'.ico',
+	'.heic',
+	'.heif',
+	'.avif'
+];
+
+export function isImageFile(path: string): boolean {
+	const lowerPath = path.toLowerCase();
+	return IMAGE_EXTENSIONS.some((ext) => lowerPath.endsWith(ext));
+}
diff --git a/packages/ui/src/lib/components/EmptyStatePlaceholder.svelte b/packages/ui/src/lib/components/EmptyStatePlaceholder.svelte
index 4992ac3e5e..e10362ca74 100644
--- a/packages/ui/src/lib/components/EmptyStatePlaceholder.svelte
+++ b/packages/ui/src/lib/components/EmptyStatePlaceholder.svelte
@@ -96,7 +96,7 @@
 	}
 
 	.empty-state__caption {
-		color: var(--clr-scale-ntrl-50);
+		color: var(--clr-text-2);
 		opacity: 0.6;
 	}
 
diff --git a/packages/ui/src/lib/components/ImageDiff.svelte b/packages/ui/src/lib/components/ImageDiff.svelte
new file mode 100644
index 0000000000..4f6214cdfe
--- /dev/null
+++ b/packages/ui/src/lib/components/ImageDiff.svelte
@@ -0,0 +1,526 @@
+<script lang="ts">
+	import Badge from '$components/Badge.svelte';
+	import RangeInput from '$components/RangeInput.svelte';
+	import SkeletonBone from '$components/SkeletonBone.svelte';
+	import Segment from '$components/segmentControl/Segment.svelte';
+	import SegmentControl from '$components/segmentControl/SegmentControl.svelte';
+
+	type Props = {
+		beforeImageUrl?: string | null;
+		afterImageUrl?: string | null;
+		fileName?: string;
+		isLoading?: boolean;
+	};
+
+	const {
+		beforeImageUrl = null,
+		afterImageUrl = null,
+		fileName = 'image',
+		isLoading = false
+	}: Props = $props();
+
+	type ViewMode = '2-up' | 'swipe' | 'onion-skin';
+	let viewMode = $state<ViewMode>('2-up');
+	let swipePosition = $state(50);
+	let onionOpacity = $state(50);
+	let isDragging = $state(false);
+	let comparisonWrapperRef: HTMLDivElement | undefined = $state();
+
+	type ImageMetadata = {
+		width: number;
+		height: number;
+		size?: number;
+	};
+
+	let beforeImageMetadata = $state<ImageMetadata | null>(null);
+	let afterImageMetadata = $state<ImageMetadata | null>(null);
+
+	function formatFileSize(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	function formatSizeDifference(beforeSize: number, afterSize: number): string {
+		const diff = afterSize - beforeSize;
+		const absDiff = Math.abs(diff);
+
+		if (diff > 0) {
+			return `+${formatFileSize(absDiff)}`;
+		} else if (diff < 0) {
+			return `-${formatFileSize(absDiff)}`;
+		}
+		return 'Same size';
+	}
+
+	async function loadImageMetadata(url: string): Promise<ImageMetadata> {
+		return new Promise((resolve, reject) => {
+			const img = new Image();
+			img.onload = async () => {
+				const metadata: ImageMetadata = {
+					width: img.naturalWidth,
+					height: img.naturalHeight
+				};
+
+				// Try to fetch file size
+				try {
+					const response = await fetch(url);
+					const blob = await response.blob();
+					metadata.size = blob.size;
+				} catch {
+					// Size not available, continue without it
+				}
+				resolve(metadata);
+			};
+			img.onerror = () => reject(new Error('Failed to load image'));
+			img.src = url;
+		});
+	}
+
+	$effect(() => {
+		if (beforeImageUrl) {
+			loadImageMetadata(beforeImageUrl)
+				.then((metadata) => (beforeImageMetadata = metadata))
+				.catch((error) => {
+					console.error('Failed to load before image metadata:', error);
+					beforeImageMetadata = null;
+				});
+		}
+
+		if (afterImageUrl) {
+			loadImageMetadata(afterImageUrl)
+				.then((metadata) => (afterImageMetadata = metadata))
+				.catch((error) => {
+					console.error('Failed to load after image metadata:', error);
+					afterImageMetadata = null;
+				});
+		}
+	});
+
+	function updateSwipePosition(clientX: number) {
+		if (!comparisonWrapperRef) return;
+
+		const rect = comparisonWrapperRef.getBoundingClientRect();
+		const x = clientX - rect.left;
+		swipePosition = Math.max(0, Math.min(100, (x / rect.width) * 100));
+	}
+
+	function handleDragStart(e: MouseEvent | TouchEvent) {
+		isDragging = true;
+		const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+		updateSwipePosition(clientX);
+	}
+
+	function handleDragMove(e: MouseEvent | TouchEvent) {
+		if (!isDragging) return;
+		if (typeof TouchEvent !== 'undefined' && e instanceof TouchEvent) e.preventDefault();
+		const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+		updateSwipePosition(clientX);
+	}
+
+	function handleDragEnd() {
+		isDragging = false;
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		const step = e.shiftKey ? 10 : 1; // Larger steps with Shift key
+
+		switch (e.key) {
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				e.preventDefault();
+				swipePosition = Math.max(0, swipePosition - step);
+				break;
+			case 'ArrowRight':
+			case 'ArrowUp':
+				e.preventDefault();
+				swipePosition = Math.min(100, swipePosition + step);
+				break;
+			case 'Home':
+				e.preventDefault();
+				swipePosition = 0;
+				break;
+			case 'End':
+				e.preventDefault();
+				swipePosition = 100;
+				break;
+		}
+	}
+
+	$effect(() => {
+		if (viewMode !== 'swipe') return;
+
+		document.addEventListener('mousemove', handleDragMove);
+		document.addEventListener('mouseup', handleDragEnd);
+		document.addEventListener('touchmove', handleDragMove, { passive: false });
+		document.addEventListener('touchend', handleDragEnd);
+
+		return () => {
+			document.removeEventListener('mousemove', handleDragMove);
+			document.removeEventListener('mouseup', handleDragEnd);
+			document.removeEventListener('touchmove', handleDragMove);
+			document.removeEventListener('touchend', handleDragEnd);
+		};
+	});
+</script>
+
+{#snippet imageDimensions(metadata: ImageMetadata | null)}
+	{#if metadata}
+		<span>
+			{metadata.width}×{metadata.height}
+			{#if metadata.size}
+				· {formatFileSize(metadata.size)}
+			{/if}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet sizeDifference()}
+	{#if beforeImageMetadata?.size && afterImageMetadata?.size}
+		·
+		<span
+			class:positive={afterImageMetadata.size < beforeImageMetadata.size}
+			class:negative={afterImageMetadata.size > beforeImageMetadata.size}
+		>
+			{formatSizeDifference(beforeImageMetadata.size, afterImageMetadata.size)}
+			{#if afterImageMetadata.size < beforeImageMetadata.size}
+				<span aria-label="decreased">↘</span>
+			{:else if afterImageMetadata.size > beforeImageMetadata.size}
+				<span aria-label="increased">↗</span>
+			{/if}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet comparisonFooter()}
+	<div class="text-12 image-footer">
+		{@render imageDimensions(beforeImageMetadata)}
+		→
+		{@render imageDimensions(afterImageMetadata)}
+		{@render sizeDifference()}
+	</div>
+{/snippet}
+
+{#snippet imagePanel(props: {
+	url: string;
+	label: string;
+	isBefore?: boolean;
+	metadata: ImageMetadata | null;
+})}
+	<div class="image-panel {props.isBefore ? 'before' : 'after'}">
+		<div class="image-wrapper checkered-bg">
+			<img src={props.url} alt="{fileName} ({props.label})" />
+		</div>
+
+		<div class="text-12 image-footer">
+			{#if props.isBefore}
+				<Badge style="error" class="label">{props.label}</Badge>
+			{:else}
+				<Badge style="success" class="label">{props.label}</Badge>
+			{/if}
+			·
+			{@render imageDimensions(props.metadata)}
+			{#if !props.isBefore}
+				{@render sizeDifference()}
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#snippet swipe(props: { controlValue: number; onValueChange: (value: number) => void })}
+	<div class="comparison-container">
+		<div
+			class="comparison-wrapper is-swipe checkered-bg"
+			class:is-dragging={isDragging}
+			bind:this={comparisonWrapperRef}
+			onmousedown={handleDragStart}
+			ontouchstart={handleDragStart}
+			onkeydown={handleKeyDown}
+			role="slider"
+			tabindex="0"
+			aria-label="Image comparison slider"
+			aria-valuenow={props.controlValue}
+			aria-valuemin={0}
+			aria-valuemax={100}
+		>
+			<div class="comparison-image comparison-after">
+				<img src={afterImageUrl!} alt="{fileName} (After)" />
+			</div>
+			<div
+				class="comparison-image comparison-before"
+				style="clip-path: inset(0 {100 - props.controlValue}% 0 0);"
+			>
+				<img src={beforeImageUrl!} alt="{fileName} (Before)" />
+			</div>
+			<div class="swipe-handle" style="left: {props.controlValue}%">
+				<div class="swipe-divider"></div>
+				<div class="swipe-handle-grip text-14">↔</div>
+			</div>
+		</div>
+		{@render comparisonFooter()}
+	</div>
+{/snippet}
+
+{#snippet onionSkin(props: { controlValue: number; onValueChange: (value: number) => void })}
+	<div class="comparison-container">
+		<div class="comparison-wrapper checkered-bg" bind:this={comparisonWrapperRef}>
+			<div class="comparison-image comparison-after">
+				<img src={afterImageUrl!} alt="{fileName} (After)" />
+			</div>
+			<div class="comparison-image comparison-before" style="opacity: {props.controlValue / 100};">
+				<img src={beforeImageUrl!} alt="{fileName} (Before)" />
+			</div>
+		</div>
+		<div class="comparison-controls">
+			<Badge style="error" kind="soft">Before</Badge>
+			<RangeInput min={0} max={100} value={props.controlValue} oninput={props.onValueChange} wide />
+			<Badge style="success" kind="soft">After</Badge>
+		</div>
+		{@render comparisonFooter()}
+	</div>
+{/snippet}
+
+<div class="imagediff-container">
+	{#if beforeImageUrl && afterImageUrl && !isLoading}
+		<div class="view-mode-controls">
+			<SegmentControl size="small" defaultIndex={0} onselect={(id) => (viewMode = id as ViewMode)}>
+				<Segment id="2-up">2-up</Segment>
+				<Segment id="swipe">Swipe</Segment>
+				<Segment id="onion-skin">Onion Skin</Segment>
+			</SegmentControl>
+		</div>
+	{/if}
+
+	<div class="image-comparison" class:is-swipe={viewMode === 'swipe'}>
+		{#if isLoading}
+			<div class="image-panel skeleton-panel">
+				<SkeletonBone height="12.5rem" />
+				<div class="skeleton-footer">
+					<SkeletonBone width="3.75rem" height="1.25rem" />
+					<SkeletonBone width="6.25rem" height="0.75rem" />
+				</div>
+			</div>
+			<div class="image-panel skeleton-panel">
+				<SkeletonBone height="12.5rem" />
+				<div class="skeleton-footer">
+					<SkeletonBone width="3.75rem" height="1.25rem" />
+					<SkeletonBone width="6.25rem" height="0.75rem" />
+				</div>
+			</div>
+		{:else if beforeImageUrl || afterImageUrl}
+			{#if viewMode === '2-up'}
+				{#if beforeImageUrl}
+					{@render imagePanel({
+						url: beforeImageUrl,
+						label: afterImageUrl ? 'Before' : 'Removed',
+						isBefore: true,
+						metadata: beforeImageMetadata
+					})}
+				{/if}
+
+				{#if afterImageUrl}
+					{@render imagePanel({
+						url: afterImageUrl,
+						label: beforeImageUrl ? 'After' : 'Added',
+						metadata: afterImageMetadata
+					})}
+				{/if}
+			{:else if viewMode === 'swipe' && beforeImageUrl && afterImageUrl}
+				{@render swipe({
+					controlValue: swipePosition,
+					onValueChange: (value) => (swipePosition = value)
+				})}
+			{:else if viewMode === 'onion-skin' && beforeImageUrl && afterImageUrl}
+				{@render onionSkin({
+					controlValue: onionOpacity,
+					onValueChange: (value) => (onionOpacity = value)
+				})}
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style lang="postcss">
+	.imagediff-container {
+		container-type: inline-size;
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+	}
+
+	.view-mode-controls {
+		display: flex;
+	}
+
+	.image-comparison {
+		display: flex;
+		gap: 14px;
+	}
+
+	@container (width < 600px) {
+		.image-comparison {
+			flex-direction: column;
+		}
+	}
+
+	.image-panel {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.image-footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		margin-top: 10px;
+		gap: 6px;
+		color: var(--clr-text-2);
+
+		& .negative {
+			color: var(--clr-scale-err-40);
+		}
+		& .positive {
+			color: var(--clr-scale-succ-40);
+		}
+	}
+
+	/* Shared checkered background pattern */
+	.checkered-bg {
+		background-image:
+			linear-gradient(45deg, var(--clr-bg-3) 25%, transparent 25%),
+			linear-gradient(-45deg, var(--clr-bg-3) 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, var(--clr-bg-3) 75%),
+			linear-gradient(-45deg, transparent 75%, var(--clr-bg-3) 75%);
+		background-position:
+			0 0,
+			0 12px,
+			12px -12px,
+			-12px 0px;
+		background-size: 24px 24px;
+	}
+
+	.image-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		overflow: hidden;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
+	}
+
+	.image-wrapper img {
+		display: block;
+		max-width: 100%;
+		max-height: 600px;
+		object-fit: contain;
+	}
+
+	.skeleton-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.skeleton-footer {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	/* Comparison modes (swipe & onion-skin) shared styles */
+	.comparison-container {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.comparison-wrapper {
+		display: flex;
+		position: relative;
+		align-items: center;
+		justify-content: center;
+		min-height: 400px;
+		overflow: hidden;
+		border: 1px solid var(--clr-border-2);
+		border-bottom: none;
+		border-radius: var(--radius-m) var(--radius-m) 0 0;
+
+		&.is-dragging {
+			user-select: none;
+		}
+
+		&.is-swipe {
+			border-bottom: 1px solid var(--clr-border-2);
+			border-radius: var(--radius-m) var(--radius-m);
+			cursor: ew-resize;
+		}
+	}
+
+	.comparison-image {
+		display: flex;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.comparison-image img {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+	}
+
+	.comparison-before img {
+		border-radius: var(--radius-s);
+	}
+
+	.swipe-handle {
+		display: flex;
+		z-index: var(--z-index-lifted);
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		transform: translateX(-50%);
+		pointer-events: none;
+	}
+
+	.swipe-divider {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background-color: var(--clr-core-ntrl-0);
+	}
+
+	.swipe-handle-grip {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		padding: 4px 6px;
+		border-radius: 20px;
+		background-color: var(--clr-core-ntrl-0);
+		color: var(--clr-core-ntrl-100);
+		cursor: col-resize;
+		pointer-events: all;
+	}
+
+	.comparison-controls {
+		display: flex;
+		align-items: center;
+		padding: 12px;
+		gap: 10px;
+		border: 1px solid var(--clr-border-2);
+		border-radius: 0 0 var(--radius-m) var(--radius-m);
+	}
+</style>
diff --git a/packages/ui/src/lib/components/RangeInput.svelte b/packages/ui/src/lib/components/RangeInput.svelte
index 2eb6ca4458..a0c27a768b 100644
--- a/packages/ui/src/lib/components/RangeInput.svelte
+++ b/packages/ui/src/lib/components/RangeInput.svelte
@@ -40,8 +40,8 @@
 		onchange
 	}: Props = $props();
 
-	// Calculate the percentage for the fill effect
-	let percentage = $derived(((value - min) / (max - min)) * 100);
+	// Calculate the fill ratio (0-1)
+	let fillRatio = $derived((value - min) / (max - min));
 </script>
 
 <div
@@ -61,33 +61,26 @@
 		</div>
 	{/if}
 
-	<div class="wrapper">
-		<div class="scale" style:--scale-percentage={percentage}>
-			<div class="scale__track"></div>
-			<div class="scale__start"></div>
-			<div class="scale__thumb"></div>
-		</div>
-
-		<input
-			bind:this={element}
-			{id}
-			data-testid={testId}
-			type="range"
-			class="input"
-			{min}
-			{max}
-			{step}
-			{disabled}
-			bind:value
-			use:focusable={{ button: true }}
-			oninput={(e) => {
-				oninput?.(parseFloat(e.currentTarget.value));
-			}}
-			onchange={(e) => {
-				onchange?.(parseFloat(e.currentTarget.value));
-			}}
-		/>
-	</div>
+	<input
+		bind:this={element}
+		{id}
+		data-testid={testId}
+		type="range"
+		class="input"
+		{min}
+		{max}
+		{step}
+		{disabled}
+		bind:value
+		use:focusable={{ button: true }}
+		style:--fill-ratio={fillRatio}
+		oninput={(e) => {
+			oninput?.(parseFloat(e.currentTarget.value));
+		}}
+		onchange={(e) => {
+			onchange?.(parseFloat(e.currentTarget.value));
+		}}
+	/>
 
 	{#if error}
 		<p class="text-11 text-body error-text">{error}</p>
@@ -99,11 +92,10 @@
 <style lang="postcss">
 	.range-input {
 		display: flex;
-		position: relative;
 		flex-direction: column;
 		gap: 8px;
 
-		--range-track: 4px;
+		--range-track-height: 4px;
 		--range-thumb-size: 16px;
 		--range-accent-color: var(--clr-theme-pop-element);
 
@@ -135,71 +127,19 @@
 		color: var(--clr-theme-err-element);
 	}
 
-	.wrapper {
-		display: flex;
-		position: relative;
-		align-items: center;
-		width: 100%;
-		height: var(--range-thumb-size);
-	}
-
-	.scale {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: max(var(--range-thumb-size), calc(var(--scale-percentage) * 1%));
-		height: var(--range-thumb-size);
-		transform: translateY(-50%);
-		pointer-events: none;
-		transition: width var(--transition-fast);
-	}
-
-	.scale__track {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		transform: translateY(-50%);
-		background: var(--range-accent-color);
-		clip-path: polygon(
-			calc(var(--range-track) / 2) calc(50% - var(--range-track) / 2),
-			calc(100% - var(--range-thumb-size) / 2) calc(50% - var(--range-thumb-size) / 2),
-			calc(100% - var(--range-thumb-size) / 2) calc(50% + var(--range-thumb-size) / 2),
-			calc(var(--range-track) / 2) calc(50% + var(--range-track) / 2)
-		);
-	}
-
-	.scale__start {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: var(--range-track);
-		height: var(--range-track);
-		transform: translateY(-50%);
-		border-radius: 50%;
-		background: var(--range-accent-color);
-	}
-
-	.scale__thumb {
-		position: absolute;
-		top: 50%;
-		right: 0;
-		width: var(--range-thumb-size);
-		height: var(--range-thumb-size);
-		transform: translateY(-50%);
-		border: 2px solid var(--range-accent-color);
-		border-radius: 50%;
-		background: var(--clr-scale-ntrl-100);
-	}
-
 	.input {
 		appearance: none;
 		width: 100%;
-		height: var(--range-track);
-		border-radius: var(--range-track);
+		height: var(--range-track-height);
+		border-radius: calc(var(--range-track-height) / 2);
 		outline: none;
-		background: var(--clr-border-2);
+		background: linear-gradient(
+			to right,
+			var(--range-accent-color) 0%,
+			var(--range-accent-color) calc(var(--fill-ratio) * 100%),
+			var(--clr-border-2) calc(var(--fill-ratio) * 100%),
+			var(--clr-border-2) 100%
+		);
 		cursor: pointer;
 
 		&:focus-visible {
@@ -212,7 +152,9 @@
 			appearance: none;
 			width: var(--range-thumb-size);
 			height: var(--range-thumb-size);
-			opacity: 0;
+			border-radius: 50%;
+			background: var(--range-accent-color);
+			cursor: pointer;
 		}
 
 		/* Firefox thumb styles */
@@ -220,23 +162,23 @@
 			appearance: none;
 			width: var(--range-thumb-size);
 			height: var(--range-thumb-size);
-			opacity: 0;
+			border: 2px solid var(--range-accent-color);
+			border-radius: 50%;
+			background: var(--clr-scale-ntrl-100);
+			cursor: pointer;
 		}
-	}
 
-	/* Disabled state */
-	.range-input:has(.input:disabled) {
-		& .scale {
+		&:disabled {
+			cursor: not-allowed;
 			opacity: 0.4;
-		}
 
-		& .scale__track,
-		& .scale__start {
-			background-color: var(--clr-scale-ntrl-60);
-		}
+			&::-webkit-slider-thumb {
+				cursor: not-allowed;
+			}
 
-		& .scale__thumb {
-			border-color: var(--clr-scale-ntrl-60);
+			&::-moz-range-thumb {
+				cursor: not-allowed;
+			}
 		}
 	}
 
@@ -248,14 +190,5 @@
 	/* Error state */
 	.range-input.error {
 		--range-accent-color: var(--clr-theme-err-element);
-
-		& .scale__track,
-		& .scale__start {
-			background-color: var(--clr-theme-err-element);
-		}
-
-		& .scale__thumb {
-			border-color: var(--clr-theme-err-element);
-		}
 	}
 </style>
diff --git a/packages/ui/src/lib/components/SkeletonBone.svelte b/packages/ui/src/lib/components/SkeletonBone.svelte
index 2314a50055..26d24228cd 100644
--- a/packages/ui/src/lib/components/SkeletonBone.svelte
+++ b/packages/ui/src/lib/components/SkeletonBone.svelte
@@ -12,7 +12,7 @@
 		height = '1rem',
 		radius = 'var(--radius-ml)',
 		color = 'var(--clr-scale-ntrl-70)',
-		opacity = 0.35
+		opacity = 0.34
 	}: Props = $props();
 </script>
 
@@ -35,7 +35,7 @@
 			opacity: var(--opacity-value);
 		}
 		100% {
-			opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.5);
+			opacity: calc(var(--opacity-value) + var(--opacity-value) * 0.7);
 		}
 	}
 </style>
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index c93213726a..167feb8f59 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -18,6 +18,7 @@ export { default as EditorLogo } from '$components/EditorLogo.svelte';
 export { default as EmptyStatePlaceholder } from '$components/EmptyStatePlaceholder.svelte';
 export { default as HunkDiff, type LineClickParams } from '$components/hunkDiff/HunkDiff.svelte';
 export { default as Icon, type IconName } from '$components/Icon.svelte';
+export { default as ImageDiff } from '$components/ImageDiff.svelte';
 export { default as InfoButton } from '$components/InfoButton.svelte';
 export { default as InfoMessage, type MessageStyle } from '$components/InfoMessage.svelte';
 export {
diff --git a/packages/ui/src/stories/components/ImageDiff.stories.svelte b/packages/ui/src/stories/components/ImageDiff.stories.svelte
new file mode 100644
index 0000000000..bf61a3bd7f
--- /dev/null
+++ b/packages/ui/src/stories/components/ImageDiff.stories.svelte
@@ -0,0 +1,64 @@
+<script module lang="ts">
+	import ImageDiff from '$components/ImageDiff.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	// Sample image data URLs for demonstration
+	const sampleImageBefore =
+		'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="200"%3E%3Crect width="300" height="200" fill="%23ff6b6b"/%3E%3Ctext x="150" y="100" text-anchor="middle" dominant-baseline="middle" font-size="24" fill="white"%3EBefore%3C/text%3E%3C/svg%3E';
+	const sampleImageAfter =
+		'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="500" height="400"%3E%3Crect width="500" height="400" fill="%234ecdc4"/%3E%3Ctext x="250" y="200" text-anchor="middle" dominant-baseline="middle" font-size="24" fill="white"%3EAfter%3C/text%3E%3C/svg%3E';
+
+	const { Story } = defineMeta({
+		title: 'File Diff / ImageDiff',
+		component: ImageDiff as any,
+		args: {
+			beforeImageUrl: sampleImageBefore,
+			afterImageUrl: sampleImageAfter,
+			fileName: 'example.png',
+			isLoading: false
+		},
+		argTypes: {
+			beforeImageUrl: {
+				control: { type: 'text' }
+			},
+			afterImageUrl: {
+				control: { type: 'text' }
+			},
+			fileName: {
+				control: { type: 'text' }
+			},
+			isLoading: {
+				control: { type: 'boolean' }
+			}
+		}
+	});
+</script>
+
+<Story name="Playground">
+	{#snippet template(args)}
+		<ImageDiff
+			beforeImageUrl={args.beforeImageUrl}
+			afterImageUrl={args.afterImageUrl}
+			fileName={args.fileName}
+			isLoading={args.isLoading}
+		/>
+	{/snippet}
+</Story>
+
+<Story name="Only After (Addition)" args={{ afterImageUrl: sampleImageAfter }}>
+	{#snippet template(args)}
+		<ImageDiff afterImageUrl={args.afterImageUrl} fileName="new-icon.svg" />
+	{/snippet}
+</Story>
+
+<Story name="Only Before (Deletion)" args={{ beforeImageUrl: sampleImageBefore }}>
+	{#snippet template(args)}
+		<ImageDiff beforeImageUrl={args.beforeImageUrl} fileName="old-icon.svg" />
+	{/snippet}
+</Story>
+
+<Story name="Loading State" args={{ isLoading: true }}>
+	{#snippet template(args)}
+		<ImageDiff isLoading={args.isLoading} fileName="loading.png" />
+	{/snippet}
+</Story>