diff --git a/Cargo.lock b/Cargo.lock
index 00add978..f46e0bd4 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -777,6 +777,7 @@ dependencies = [
 name = "git-diff"
 version = "0.1.0"
 dependencies = [
+ "base64",
  "git2",
  "serde",
  "tempfile",
diff --git a/apps/differ/src-tauri/Cargo.lock b/apps/differ/src-tauri/Cargo.lock
index 33efe954..286d3030 100644
--- a/apps/differ/src-tauri/Cargo.lock
+++ b/apps/differ/src-tauri/Cargo.lock
@@ -1055,6 +1055,7 @@ dependencies = [
 name = "git-diff"
 version = "0.1.0"
 dependencies = [
+ "base64 0.22.1",
  "git2",
  "serde",
  "thiserror 2.0.18",
diff --git a/apps/staged/src-tauri/Cargo.lock b/apps/staged/src-tauri/Cargo.lock
index dad1744d..c5ea59b9 100644
--- a/apps/staged/src-tauri/Cargo.lock
+++ b/apps/staged/src-tauri/Cargo.lock
@@ -1856,6 +1856,7 @@ dependencies = [
 name = "git-diff"
 version = "0.1.0"
 dependencies = [
+ "base64 0.22.1",
  "git2",
  "serde",
  "thiserror 2.0.18",
diff --git a/apps/staged/src-tauri/src/blox.rs b/apps/staged/src-tauri/src/blox.rs
index ab8ac646..157e32f1 100644
--- a/apps/staged/src-tauri/src/blox.rs
+++ b/apps/staged/src-tauri/src/blox.rs
@@ -49,6 +49,14 @@ pub fn ws_exec(name: &str, args: &[&str]) -> Result<String, BloxError> {
     blox_cli::ws_exec(name, args)
 }
 
+/// Execute a command inside a Blox workspace, returning raw bytes.
+///
+/// Like `ws_exec` but returns the raw stdout bytes without UTF-8 validation.
+/// Use this when the command may produce binary output (e.g. `git show` on image files).
+pub fn ws_exec_bytes(name: &str, args: &[&str]) -> Result<Vec<u8>, BloxError> {
+    blox_cli::ws_exec_bytes(name, args)
+}
+
 /// Quick authentication check — runs `sq blox ws list` and inspects the result.
 ///
 /// Returns `Ok(())` if the user appears to be authenticated, or
diff --git a/apps/staged/src-tauri/src/branches.rs b/apps/staged/src-tauri/src/branches.rs
index 6afd3a9e..5886cf3e 100644
--- a/apps/staged/src-tauri/src/branches.rs
+++ b/apps/staged/src-tauri/src/branches.rs
@@ -184,6 +184,23 @@ pub(crate) fn run_workspace_git(
     blox::ws_exec(workspace_name, &borrowed)
 }
 
+pub(crate) fn run_workspace_git_bytes(
+    workspace_name: &str,
+    repo_subpath: Option<&str>,
+    git_args: &[&str],
+) -> Result<Vec<u8>, blox::BloxError> {
+    let mut owned = Vec::<String>::new();
+    owned.push("git".to_string());
+    if let Some(subpath) = repo_subpath.map(str::trim).filter(|s| !s.is_empty()) {
+        let resolved = resolve_workspace_repo_path(workspace_name, subpath)?;
+        owned.push("-C".to_string());
+        owned.push(resolved);
+    }
+    owned.extend(git_args.iter().map(|arg| (*arg).to_string()));
+    let borrowed = owned.iter().map(String::as_str).collect::<Vec<_>>();
+    blox::ws_exec_bytes(workspace_name, &borrowed)
+}
+
 async fn run_blox_blocking<T, F>(op: F) -> Result<T, blox::BloxError>
 where
     T: Send + 'static,
diff --git a/apps/staged/src-tauri/src/diff_commands.rs b/apps/staged/src-tauri/src/diff_commands.rs
index 4f260bab..8664d8a5 100644
--- a/apps/staged/src-tauri/src/diff_commands.rs
+++ b/apps/staged/src-tauri/src/diff_commands.rs
@@ -61,6 +61,15 @@ fn run_remote_git(ctx: &BranchDiffContext, args: &[&str]) -> Result<String, Stri
         .map_err(|e| e.to_string())
 }
 
+fn run_remote_git_bytes(ctx: &BranchDiffContext, args: &[&str]) -> Result<Vec<u8>, String> {
+    let workspace = ctx
+        .workspace_name
+        .as_deref()
+        .ok_or("Missing remote workspace context")?;
+    branches::run_workspace_git_bytes(workspace, ctx.repo_subpath.as_deref(), args)
+        .map_err(|e| e.to_string())
+}
+
 /// Build a DiffSpec for a branch diff.
 ///
 /// - Branch scope with no commit_sha: merge-base(base, tip)..tip
@@ -241,15 +250,49 @@ fn parse_unified_hunks(diff_text: &str) -> Vec<RemoteHunk> {
     hunks
 }
 
-fn file_content_from_text(text: &str) -> git::FileContent {
-    if text.as_bytes()[..text.len().min(8192)].contains(&0) {
-        return git::FileContent::Binary;
+fn file_content_from_bytes(bytes: &[u8], path: &str) -> git::FileContent {
+    let check_len = bytes.len().min(8192);
+    if bytes[..check_len].contains(&0) {
+        return file_content_binary_or_image(bytes, path);
     }
+    let text = String::from_utf8_lossy(bytes);
     git::FileContent::Text {
         lines: text.lines().map(|line| line.to_string()).collect(),
     }
 }
 
+/// For binary content in the remote path, try to produce an ImageBase64 variant.
+fn file_content_binary_or_image(bytes: &[u8], path: &str) -> git::FileContent {
+    if bytes.len() > git::IMAGE_PREVIEW_MAX_BYTES {
+        return git::FileContent::Binary;
+    }
+
+    let file_path = std::path::Path::new(path);
+    let ext = file_path
+        .extension()
+        .and_then(|e| e.to_str())
+        .map(|e| e.to_ascii_lowercase());
+
+    let mime = match ext.as_deref() {
+        Some("png") => Some("image/png"),
+        Some("jpg" | "jpeg") => Some("image/jpeg"),
+        Some("gif") => Some("image/gif"),
+        Some("webp") => Some("image/webp"),
+        _ => None,
+    };
+
+    if let Some(mime) = mime {
+        use base64::Engine;
+        let data = base64::engine::general_purpose::STANDARD.encode(bytes);
+        git::FileContent::ImageBase64 {
+            mime_type: mime.to_string(),
+            data,
+        }
+    } else {
+        git::FileContent::Binary
+    }
+}
+
 fn is_missing_object_error(msg: &str) -> bool {
     let lower = msg.to_lowercase();
     lower.contains("not a valid object name")
@@ -259,11 +302,6 @@ fn is_missing_object_error(msg: &str) -> bool {
         || lower.contains("path '")
 }
 
-fn is_utf8_parse_error(msg: &str) -> bool {
-    msg.to_lowercase()
-        .contains("invalid utf-8 in sq blox output")
-}
-
 fn load_remote_file_at_ref(
     ctx: &BranchDiffContext,
     ref_name: &str,
@@ -277,15 +315,14 @@ fn load_remote_file_at_ref(
         Err(e) => return Err(e),
     }
 
-    match run_remote_git(ctx, &["show", &spec]) {
-        Ok(content) => Ok(Some(git::File {
-            path: path.to_string(),
-            content: file_content_from_text(&content),
-        })),
-        Err(e) if is_utf8_parse_error(&e) => Ok(Some(git::File {
-            path: path.to_string(),
-            content: git::FileContent::Binary,
-        })),
+    match run_remote_git_bytes(ctx, &["show", &spec]) {
+        Ok(bytes) => {
+            let content = file_content_from_bytes(&bytes, path);
+            Ok(Some(git::File {
+                path: path.to_string(),
+                content,
+            }))
+        }
         Err(e) => Err(e),
     }
 }
diff --git a/crates/blox-cli/src/lib.rs b/crates/blox-cli/src/lib.rs
index 0e778d55..321d574b 100644
--- a/crates/blox-cli/src/lib.rs
+++ b/crates/blox-cli/src/lib.rs
@@ -194,8 +194,8 @@ fn is_auth_error(stderr: &str) -> bool {
         || lower.contains("401")
 }
 
-/// Run `sq blox <args…>` and return stdout as a string.
-fn run(args: &[&str], timeout: Duration) -> Result<String, BloxError> {
+/// Run `sq blox <args…>` and return stdout as raw bytes.
+fn run_bytes(args: &[&str], timeout: Duration) -> Result<Vec<u8>, BloxError> {
     let sq = sq_binary()?;
 
     let mut full_args = vec!["blox"];
@@ -255,7 +255,13 @@ fn run(args: &[&str], timeout: Duration) -> Result<String, BloxError> {
         return Err(BloxError::CommandFailed(stderr.into_owned()));
     }
 
-    String::from_utf8(stdout)
+    Ok(stdout)
+}
+
+/// Run `sq blox <args…>` and return stdout as a string.
+fn run(args: &[&str], timeout: Duration) -> Result<String, BloxError> {
+    let bytes = run_bytes(args, timeout)?;
+    String::from_utf8(bytes)
         .map_err(|e| BloxError::ParseError(format!("invalid UTF-8 in sq blox output: {e}")))
 }
 
@@ -338,6 +344,16 @@ pub fn ws_exec(name: &str, args: &[&str]) -> Result<String, BloxError> {
     run(&full_args, EXEC_TIMEOUT)
 }
 
+/// Execute a command inside a Blox workspace, returning raw bytes.
+///
+/// Like `ws_exec` but returns the raw stdout bytes without UTF-8 validation.
+/// Use this when the command may produce binary output (e.g. `git show` on image files).
+pub fn ws_exec_bytes(name: &str, args: &[&str]) -> Result<Vec<u8>, BloxError> {
+    let mut full_args = vec!["ws", "exec", name, "--"];
+    full_args.extend_from_slice(args);
+    run_bytes(&full_args, EXEC_TIMEOUT)
+}
+
 /// Quick authentication check — runs `sq blox ws list` and inspects the result.
 ///
 /// Returns `Ok(())` if the user appears to be authenticated, or
diff --git a/crates/git-diff/Cargo.toml b/crates/git-diff/Cargo.toml
index bf744749..c87891d4 100644
--- a/crates/git-diff/Cargo.toml
+++ b/crates/git-diff/Cargo.toml
@@ -8,6 +8,7 @@ description = "Git diff computation: file listing, content diffing, and alignmen
 serde = { version = "1.0", features = ["derive"] }
 thiserror = "2.0"
 git2 = { version = "0.20", features = ["vendored-openssl"] }
+base64 = "0.22"
 
 [dev-dependencies]
 tempfile = "3.0"
diff --git a/crates/git-diff/src/diff.rs b/crates/git-diff/src/diff.rs
index 5f192ad0..8b780704 100644
--- a/crates/git-diff/src/diff.rs
+++ b/crates/git-diff/src/diff.rs
@@ -420,7 +420,7 @@ fn load_file_from_tree(
         None => return Ok(None), // Not a file (maybe a submodule)
     };
 
-    let content = bytes_to_content(blob.content());
+    let content = bytes_to_content(blob.content(), path);
 
     Ok(Some(File {
         path: path.to_string_lossy().to_string(),
@@ -443,7 +443,7 @@ fn load_file_from_index(repo: &Repository, path: &Path) -> Result<Option<File>,
         .find_blob(entry.id)
         .map_err(|e| GitError::CommandFailed(format!("Cannot load blob from index: {e}")))?;
 
-    let content = bytes_to_content(blob.content());
+    let content = bytes_to_content(blob.content(), path);
 
     Ok(Some(File {
         path: path.to_string_lossy().to_string(),
@@ -472,16 +472,19 @@ fn load_file_from_workdir(repo: &Repository, path: &Path) -> Result<Option<File>
 
     Ok(Some(File {
         path: path.to_string_lossy().to_string(),
-        content: bytes_to_content(&bytes),
+        content: bytes_to_content(&bytes, path),
     }))
 }
 
-/// Convert raw bytes to FileContent, detecting binary
-fn bytes_to_content(bytes: &[u8]) -> FileContent {
+/// Convert raw bytes to FileContent, detecting binary and images.
+///
+/// When binary content is detected and the file path has a known image extension,
+/// the bytes are base64-encoded and returned as `ImageBase64` (up to 5 MB).
+fn bytes_to_content(bytes: &[u8], path: &Path) -> FileContent {
     // Check for binary: look for null bytes in first 8KB
     let check_len = bytes.len().min(8192);
     if bytes[..check_len].contains(&0) {
-        return FileContent::Binary;
+        return bytes_to_binary_or_image(bytes, path);
     }
 
     // Parse as UTF-8 (lossy for display)
@@ -490,6 +493,36 @@ fn bytes_to_content(bytes: &[u8]) -> FileContent {
     FileContent::Text { lines }
 }
 
+/// For binary content, check if it's a previewable image and base64-encode it.
+fn bytes_to_binary_or_image(bytes: &[u8], path: &Path) -> FileContent {
+    if bytes.len() > IMAGE_PREVIEW_MAX_BYTES {
+        return FileContent::Binary;
+    }
+
+    if let Some(mime) = image_mime_for_path(path) {
+        use base64::Engine;
+        let data = base64::engine::general_purpose::STANDARD.encode(bytes);
+        FileContent::ImageBase64 {
+            mime_type: mime.to_string(),
+            data,
+        }
+    } else {
+        FileContent::Binary
+    }
+}
+
+/// Return the MIME type if the path has a known image extension.
+fn image_mime_for_path(path: &Path) -> Option<&'static str> {
+    let ext = path.extension()?.to_str()?.to_ascii_lowercase();
+    match ext.as_str() {
+        "png" => Some("image/png"),
+        "jpg" | "jpeg" => Some("image/jpeg"),
+        "gif" => Some("image/gif"),
+        "webp" => Some("image/webp"),
+        _ => None,
+    }
+}
+
 /// Get hunks for a single file using libgit2
 fn get_hunks_libgit2(
     repo: &Repository,
diff --git a/crates/git-diff/src/files.rs b/crates/git-diff/src/files.rs
index e20cce4c..c28ce2c3 100644
--- a/crates/git-diff/src/files.rs
+++ b/crates/git-diff/src/files.rs
@@ -7,7 +7,7 @@
 use std::path::Path;
 
 use crate::cli::{self, GitError};
-use crate::types::{File, FileContent, WORKDIR};
+use crate::types::{File, FileContent, IMAGE_PREVIEW_MAX_BYTES, WORKDIR};
 
 /// Search for files matching a query in the repository at a given ref.
 ///
@@ -149,7 +149,7 @@ pub fn get_file_at_ref(repo: &Path, ref_name: &str, path: &str) -> Result<File,
             .map_err(|e| GitError::CommandFailed(format!("Cannot read file: {e}")))?;
 
         let content = if is_binary(&bytes) {
-            FileContent::Binary
+            bytes_to_image_or_binary(&bytes, path)
         } else {
             let text = String::from_utf8_lossy(&bytes);
             text_to_content(&text)
@@ -172,7 +172,7 @@ pub fn get_file_at_ref(repo: &Path, ref_name: &str, path: &str) -> Result<File,
         // git show returns text, check if it looks binary
         let bytes = output.as_bytes();
         let content = if is_binary(bytes) {
-            FileContent::Binary
+            bytes_to_image_or_binary(bytes, path)
         } else {
             text_to_content(&output)
         };
@@ -190,6 +190,38 @@ fn is_binary(data: &[u8]) -> bool {
     data[..check_len].contains(&0)
 }
 
+/// For binary content, check if it's a previewable image and base64-encode it.
+fn bytes_to_image_or_binary(bytes: &[u8], path: &str) -> FileContent {
+    if bytes.len() > IMAGE_PREVIEW_MAX_BYTES {
+        return FileContent::Binary;
+    }
+
+    let file_path = std::path::Path::new(path);
+    let ext = file_path
+        .extension()
+        .and_then(|e| e.to_str())
+        .map(|e| e.to_ascii_lowercase());
+
+    let mime = match ext.as_deref() {
+        Some("png") => Some("image/png"),
+        Some("jpg" | "jpeg") => Some("image/jpeg"),
+        Some("gif") => Some("image/gif"),
+        Some("webp") => Some("image/webp"),
+        _ => None,
+    };
+
+    if let Some(mime) = mime {
+        use base64::Engine;
+        let data = base64::engine::general_purpose::STANDARD.encode(bytes);
+        FileContent::ImageBase64 {
+            mime_type: mime.to_string(),
+            data,
+        }
+    } else {
+        FileContent::Binary
+    }
+}
+
 /// Convert text to FileContent with lines
 fn text_to_content(text: &str) -> FileContent {
     let lines: Vec<String> = text.lines().map(|s| s.to_string()).collect();
diff --git a/crates/git-diff/src/types.rs b/crates/git-diff/src/types.rs
index bcff90ae..8b067c68 100644
--- a/crates/git-diff/src/types.rs
+++ b/crates/git-diff/src/types.rs
@@ -104,12 +104,26 @@ impl Span {
     }
 }
 
-/// Content of a file - either text lines or binary marker
+/// Maximum file size (in bytes) for image preview. Files larger than this
+/// fall back to the generic binary notice to avoid sending huge payloads.
+pub const IMAGE_PREVIEW_MAX_BYTES: usize = 5 * 1024 * 1024; // 5 MB
+
+/// Image extensions eligible for inline base64 preview.
+pub const IMAGE_EXTENSIONS: &[&str] = &["png", "jpg", "jpeg", "gif", "webp"];
+
+/// Content of a file - either text lines, binary marker, or base64-encoded image
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 #[serde(tag = "type")]
 pub enum FileContent {
-    Text { lines: Vec<String> },
+    Text {
+        lines: Vec<String>,
+    },
     Binary,
+    ImageBase64 {
+        #[serde(rename = "mimeType")]
+        mime_type: String,
+        data: String,
+    },
 }
 
 /// A file with its path and content
diff --git a/packages/diff-viewer/src/lib/components/DiffViewer.svelte b/packages/diff-viewer/src/lib/components/DiffViewer.svelte
index 035beb64..e247880c 100644
--- a/packages/diff-viewer/src/lib/components/DiffViewer.svelte
+++ b/packages/diff-viewer/src/lib/components/DiffViewer.svelte
@@ -38,8 +38,10 @@
     getLanguageFromDiff,
     getFilePath,
     isBinaryDiff,
+    isImageDiff,
     getTextLines,
   } from '../utils/diffUtils';
+  import ImageDiffViewer from './ImageDiffViewer.svelte';
   import type { SearchState, FileSearchResult } from '../state/searchState.svelte';
   import type { SearchMatch, MatchLocation } from '../utils/diffSearch';
   import {
@@ -237,6 +239,7 @@
   let isDeletedFile = $derived(diff !== null && !isEmptyDiff && diff.after === null);
   let isTwoPaneMode = $derived(!isNewFile && !isDeletedFile);
   let isBinary = $derived(diff !== null && isBinaryDiff(diff));
+  let isImage = $derived(diff !== null && isImageDiff(diff));
 
   // Extract lines from the diff
   let beforeLines = $derived(diff ? getTextLines(diff, 'before') : []);
@@ -1659,6 +1662,15 @@
     <div class="empty-state">
       <p>File not found in this diff</p>
     </div>
+  {:else if isImage}
+    <ImageDiffViewer
+      beforeSrc={diff.before?.content.type === 'ImageBase64'
+        ? `data:${diff.before.content.mimeType};base64,${diff.before.content.data}`
+        : null}
+      afterSrc={diff.after?.content.type === 'ImageBase64'
+        ? `data:${diff.after.content.mimeType};base64,${diff.after.content.data}`
+        : null}
+    />
   {:else if isBinary}
     <div class="binary-notice">
       <p>Binary file - cannot display diff</p>
diff --git a/packages/diff-viewer/src/lib/components/ImageDiffViewer.svelte b/packages/diff-viewer/src/lib/components/ImageDiffViewer.svelte
new file mode 100644
index 00000000..fa119c66
--- /dev/null
+++ b/packages/diff-viewer/src/lib/components/ImageDiffViewer.svelte
@@ -0,0 +1,476 @@
+<!--
+  ImageDiffViewer.svelte - Rich image diff viewer
+
+  Displays before/after images with three viewing modes:
+  1. Classic: before and after images in left/right panes
+  2. Highlight: canvas-based pixel difference visualization
+  3. Slider: draggable vertical divider revealing before vs after
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  interface Props {
+    beforeSrc: string | null;
+    afterSrc: string | null;
+  }
+
+  let { beforeSrc, afterSrc }: Props = $props();
+
+  type ViewMode = 'classic' | 'highlight' | 'slider';
+  let mode: ViewMode = $state('classic');
+
+  // Slider state
+  let sliderPosition = $state(50);
+  let isDragging = $state(false);
+  let sliderContainer: HTMLDivElement | undefined = $state();
+
+  // Highlight canvas
+  let highlightCanvas: HTMLCanvasElement | undefined = $state();
+  let highlightReady = $state(false);
+
+  // Shared image dimensions (for slider/highlight modes)
+  let sharedWidth = $state(0);
+  let sharedHeight = $state(0);
+
+  // Track loaded images for highlight mode
+  let beforeImg: HTMLImageElement | null = $state(null);
+  let afterImg: HTMLImageElement | null = $state(null);
+
+  function loadImage(src: string): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+
+  async function loadImages() {
+    const [bImg, aImg] = await Promise.all([
+      beforeSrc ? loadImage(beforeSrc) : Promise.resolve(null),
+      afterSrc ? loadImage(afterSrc) : Promise.resolve(null),
+    ]);
+    beforeImg = bImg;
+    afterImg = aImg;
+
+    // Compute shared dimensions based on the larger image
+    const bw = bImg?.naturalWidth ?? 0;
+    const bh = bImg?.naturalHeight ?? 0;
+    const aw = aImg?.naturalWidth ?? 0;
+    const ah = aImg?.naturalHeight ?? 0;
+    sharedWidth = Math.max(bw, aw);
+    sharedHeight = Math.max(bh, ah);
+  }
+
+  $effect(() => {
+    // Re-load when sources change
+    beforeSrc;
+    afterSrc;
+    loadImages();
+  });
+
+  // Draw highlight canvas when images or mode change
+  $effect(() => {
+    if (mode !== 'highlight' || !highlightCanvas) return;
+    if (!beforeImg && !afterImg) return;
+
+    drawHighlight();
+  });
+
+  function drawHighlight() {
+    if (!highlightCanvas) return;
+    const ctx = highlightCanvas.getContext('2d');
+    if (!ctx) return;
+
+    const w = sharedWidth;
+    const h = sharedHeight;
+    if (w === 0 || h === 0) return;
+
+    highlightCanvas.width = w;
+    highlightCanvas.height = h;
+
+    if (!beforeImg || !afterImg) {
+      // Only one image — just draw it with a note
+      const img = beforeImg ?? afterImg;
+      if (img) ctx.drawImage(img, 0, 0);
+      highlightReady = true;
+      return;
+    }
+
+    // Draw both images onto offscreen canvases
+    const offBefore = new OffscreenCanvas(w, h);
+    const ctxB = offBefore.getContext('2d')!;
+    ctxB.drawImage(beforeImg, 0, 0);
+
+    const offAfter = new OffscreenCanvas(w, h);
+    const ctxA = offAfter.getContext('2d')!;
+    ctxA.drawImage(afterImg, 0, 0);
+
+    const dataBefore = ctxB.getImageData(0, 0, w, h);
+    const dataAfter = ctxA.getImageData(0, 0, w, h);
+    const output = ctx.createImageData(w, h);
+
+    for (let i = 0; i < dataBefore.data.length; i += 4) {
+      const rDiff = Math.abs(dataBefore.data[i] - dataAfter.data[i]);
+      const gDiff = Math.abs(dataBefore.data[i + 1] - dataAfter.data[i + 1]);
+      const bDiff = Math.abs(dataBefore.data[i + 2] - dataAfter.data[i + 2]);
+      const maxDiff = Math.max(rDiff, gDiff, bDiff);
+
+      if (maxDiff > 10) {
+        // Changed pixel: show magenta highlight blended with the after image
+        const intensity = Math.min(maxDiff / 255, 1);
+        output.data[i] = Math.round(dataAfter.data[i] * (1 - intensity) + 255 * intensity);
+        output.data[i + 1] = Math.round(dataAfter.data[i + 1] * (1 - intensity) + 0 * intensity);
+        output.data[i + 2] = Math.round(
+          dataAfter.data[i + 2] * (1 - intensity) + 255 * intensity
+        );
+        output.data[i + 3] = 255;
+      } else {
+        // Unchanged pixel: desaturate and dim
+        const avg = (dataAfter.data[i] + dataAfter.data[i + 1] + dataAfter.data[i + 2]) / 3;
+        const dimmed = avg * 0.4;
+        output.data[i] = dimmed;
+        output.data[i + 1] = dimmed;
+        output.data[i + 2] = dimmed;
+        output.data[i + 3] = 255;
+      }
+    }
+
+    ctx.putImageData(output, 0, 0);
+    highlightReady = true;
+  }
+
+  // Slider drag handling
+  function onPointerDown(e: PointerEvent) {
+    isDragging = true;
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    updateSlider(e);
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!isDragging) return;
+    updateSlider(e);
+  }
+
+  function onPointerUp() {
+    isDragging = false;
+  }
+
+  function updateSlider(e: PointerEvent) {
+    if (!sliderContainer) return;
+    const rect = sliderContainer.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    sliderPosition = Math.max(0, Math.min(100, (x / rect.width) * 100));
+  }
+</script>
+
+<div class="image-diff-viewer">
+  {#if beforeSrc && afterSrc}
+    <div class="mode-toolbar">
+      <button
+        class="mode-btn"
+        class:active={mode === 'classic'}
+        onclick={() => (mode = 'classic')}
+      >
+        Classic
+      </button>
+      <button
+        class="mode-btn"
+        class:active={mode === 'highlight'}
+        onclick={() => (mode = 'highlight')}
+      >
+        Highlight
+      </button>
+      <button
+        class="mode-btn"
+        class:active={mode === 'slider'}
+        onclick={() => (mode = 'slider')}
+      >
+        Slider
+      </button>
+    </div>
+  {/if}
+
+  <div class="image-content" class:slider-active={mode === 'slider'}>
+    {#if mode === 'classic'}
+      <div class="side-by-side">
+        <div class="image-pane">
+          {#if beforeSrc}
+            <img src={beforeSrc} alt="Before" />
+          {:else}
+            <div class="no-image">No previous version</div>
+          {/if}
+        </div>
+        <div class="image-pane">
+          {#if afterSrc}
+            <img src={afterSrc} alt="After" />
+          {:else}
+            <div class="no-image">File deleted</div>
+          {/if}
+        </div>
+      </div>
+    {:else if mode === 'highlight'}
+      <div class="highlight-container">
+        {#if !beforeSrc || !afterSrc}
+          <div class="no-comparison">
+            {#if beforeSrc}
+              <img src={beforeSrc} alt="Before (no comparison available)" />
+            {:else if afterSrc}
+              <img src={afterSrc} alt="After (no comparison available)" />
+            {/if}
+            <p class="no-comparison-note">No comparison available</p>
+          </div>
+        {:else}
+          <canvas
+            bind:this={highlightCanvas}
+            style="max-width: 100%; height: auto;"
+          ></canvas>
+        {/if}
+      </div>
+    {:else if mode === 'slider'}
+      <div
+        class="slider-container"
+        bind:this={sliderContainer}
+        onpointerdown={onPointerDown}
+        onpointermove={onPointerMove}
+        onpointerup={onPointerUp}
+        role="slider"
+        aria-valuenow={Math.round(sliderPosition)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label="Image comparison slider"
+        tabindex={0}
+      >
+        {#if sharedWidth > 0 && sharedHeight > 0}
+          <div
+            class="slider-images"
+            style="aspect-ratio: {sharedWidth} / {sharedHeight};"
+          >
+            {#if afterSrc}
+              <img
+                src={afterSrc}
+                alt="After"
+                class="slider-img"
+                draggable="false"
+              />
+            {/if}
+            {#if beforeSrc}
+              <img
+                src={beforeSrc}
+                alt="Before"
+                class="slider-img"
+                draggable="false"
+                style="clip-path: inset(0 {100 - sliderPosition}% 0 0);"
+              />
+            {/if}
+          </div>
+          <div
+            class="slider-divider"
+            style="left: {sliderPosition}%;"
+          >
+            <div class="slider-handle"></div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .image-diff-viewer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .mode-toolbar {
+    display: flex;
+    justify-content: center;
+    gap: 2px;
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    flex-shrink: 0;
+  }
+
+  .mode-btn {
+    padding: 4px 12px;
+    border: 1px solid var(--border-muted);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.15s, color 0.15s;
+  }
+
+  .mode-btn:hover:not(:disabled) {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .mode-btn.active {
+    background: var(--ui-accent);
+    color: white;
+    border-color: var(--ui-accent);
+  }
+
+  .mode-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .image-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    overflow: auto;
+  }
+
+  .image-content.slider-active {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  /* Classic mode */
+  .side-by-side {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .image-pane {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    max-height: 100%;
+  }
+
+  .image-pane img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+    background: var(--bg-checkerboard, repeating-conic-gradient(#80808020 0% 25%, transparent 0% 50%) 50% / 16px 16px);
+  }
+
+  .no-image {
+    color: var(--text-muted);
+    font-size: var(--size-lg);
+    text-align: center;
+  }
+
+  /* Highlight mode */
+  .highlight-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .highlight-container canvas {
+    border-radius: 4px;
+  }
+
+  .no-comparison {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .no-comparison img {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    border-radius: 4px;
+  }
+
+  .no-comparison-note {
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+
+  /* Slider mode */
+  .slider-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    cursor: ew-resize;
+    user-select: none;
+    touch-action: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .slider-images {
+    position: relative;
+    width: 100%;
+    max-height: 70vh;
+  }
+
+  .slider-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .slider-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--ui-accent, #3b82f6);
+    transform: translateX(-50%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .slider-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--ui-accent, #3b82f6);
+    border: 2px solid white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+  }
+
+  .slider-handle::before,
+  .slider-handle::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+  }
+
+  .slider-handle::before {
+    left: 5px;
+    border-right: 6px solid white;
+  }
+
+  .slider-handle::after {
+    right: 5px;
+    border-left: 6px solid white;
+  }
+</style>
diff --git a/packages/diff-viewer/src/lib/components/index.ts b/packages/diff-viewer/src/lib/components/index.ts
index 4e1a13ec..237a0b6f 100644
--- a/packages/diff-viewer/src/lib/components/index.ts
+++ b/packages/diff-viewer/src/lib/components/index.ts
@@ -1,4 +1,5 @@
 export { default as DiffViewer } from './DiffViewer.svelte';
+export { default as ImageDiffViewer } from './ImageDiffViewer.svelte';
 export { default as CommentEditor } from './CommentEditor.svelte';
 export { default as AnnotationOverlay } from './AnnotationOverlay.svelte';
 export { default as BeforeAnnotationOverlay } from './BeforeAnnotationOverlay.svelte';
diff --git a/packages/diff-viewer/src/lib/state/searchState.svelte.ts b/packages/diff-viewer/src/lib/state/searchState.svelte.ts
index f5b734a7..935fa58f 100644
--- a/packages/diff-viewer/src/lib/state/searchState.svelte.ts
+++ b/packages/diff-viewer/src/lib/state/searchState.svelte.ts
@@ -65,7 +65,7 @@ function getTextLines(diff: FileDiff, side: 'before' | 'after'): string[] {
 	if (!file) return [];
 
 	const content = file.content;
-	if (content.type === 'Binary') return [];
+	if (content.type !== 'Text') return [];
 
 	return content.lines;
 }
diff --git a/packages/diff-viewer/src/lib/types.ts b/packages/diff-viewer/src/lib/types.ts
index a1651826..adfec950 100644
--- a/packages/diff-viewer/src/lib/types.ts
+++ b/packages/diff-viewer/src/lib/types.ts
@@ -15,8 +15,11 @@ export interface Span {
   end: number;
 }
 
-/** Content of a file — either text lines or binary marker. */
-export type FileContent = { type: 'Text'; lines: string[] } | { type: 'Binary' };
+/** Content of a file — text lines, binary marker, or base64-encoded image. */
+export type FileContent =
+  | { type: 'Text'; lines: string[] }
+  | { type: 'Binary' }
+  | { type: 'ImageBase64'; mimeType: string; data: string };
 
 /** A file with its path and content. */
 export interface File {
diff --git a/packages/diff-viewer/src/lib/utils/diffUtils.ts b/packages/diff-viewer/src/lib/utils/diffUtils.ts
index 4135117e..ac01d463 100644
--- a/packages/diff-viewer/src/lib/utils/diffUtils.ts
+++ b/packages/diff-viewer/src/lib/utils/diffUtils.ts
@@ -78,7 +78,7 @@ export function getLanguageFromDiff<T>(
 }
 
 /**
- * Check if a diff represents a binary file.
+ * Check if a diff represents a binary file (excludes images).
  */
 export function isBinaryDiff(diff: FileDiff): boolean {
   const beforeBinary = diff.before?.content.type === 'Binary';
@@ -87,11 +87,20 @@ export function isBinaryDiff(diff: FileDiff): boolean {
 }
 
 /**
- * Get text lines from a file, or empty array if binary/null.
+ * Check if a diff represents an image file.
+ */
+export function isImageDiff(diff: FileDiff): boolean {
+  const beforeImage = diff.before?.content.type === 'ImageBase64';
+  const afterImage = diff.after?.content.type === 'ImageBase64';
+  return beforeImage || afterImage;
+}
+
+/**
+ * Get text lines from a file, or empty array if binary/image/null.
  */
 export function getTextLines(diff: FileDiff, side: 'before' | 'after'): string[] {
   const file = side === 'before' ? diff.before : diff.after;
-  if (!file || file.content.type === 'Binary') return [];
+  if (!file || file.content.type !== 'Text') return [];
   return file.content.lines;
 }
 
diff --git a/packages/diff-viewer/src/lib/utils/index.ts b/packages/diff-viewer/src/lib/utils/index.ts
index 1c322f76..f662b619 100644
--- a/packages/diff-viewer/src/lib/utils/index.ts
+++ b/packages/diff-viewer/src/lib/utils/index.ts
@@ -4,6 +4,7 @@ export {
   getLineBoundary,
   getLanguageFromDiff,
   isBinaryDiff,
+  isImageDiff,
   getTextLines,
   referenceFileAsDiff,
 } from './diffUtils';