diff --git a/e2e/src/web/specs/photo-viewer.e2e-spec.ts b/e2e/src/web/specs/photo-viewer.e2e-spec.ts
new file mode 100644
index 0000000000..0918309596
--- /dev/null
+++ b/e2e/src/web/specs/photo-viewer.e2e-spec.ts
@@ -0,0 +1,54 @@
+import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import { utils } from 'src/utils';
+
+test.describe('Photo Viewer', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetMediaResponseDto;
+  let rawAsset: AssetMediaResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+    asset = await utils.createAsset(admin.accessToken);
+    rawAsset = await utils.createAsset(admin.accessToken, { assetData: { filename: 'test.arw' } });
+  });
+
+  test.beforeEach(async ({ context, page }) => {
+    // before each test, login as user
+    await utils.setAuthCookies(context, admin.accessToken);
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('loads original photo when zoomed', async ({ page }) => {
+    await page.goto(`/photos/${asset.id}`);
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const box = await page.getByTestId('thumbnail').boundingBox();
+    expect(box).toBeTruthy();
+    const { x, y, width, height } = box!;
+    await page.mouse.move(x + width / 2, y + height / 2);
+    await page.mouse.wheel(0, -1);
+    await expect(page.getByTestId('original')).toBeInViewport();
+    await expect(page.getByTestId('original')).toHaveAttribute('src', /original/);
+  });
+
+  test('loads fullsize image when zoomed and original is web-incompatible', async ({ page }) => {
+    await page.goto(`/photos/${rawAsset.id}`);
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const box = await page.getByTestId('thumbnail').boundingBox();
+    expect(box).toBeTruthy();
+    const { x, y, width, height } = box!;
+    await page.mouse.move(x + width / 2, y + height / 2);
+    await page.mouse.wheel(0, -1);
+    await expect(page.getByTestId('original')).toHaveAttribute('src', /fullsize/);
+  });
+
+  test('reloads photo when checksum changes', async ({ page }) => {
+    await page.goto(`/photos/${asset.id}`);
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const initialSrc = await page.getByTestId('thumbnail').getAttribute('src');
+    await utils.replaceAsset(admin.accessToken, asset.id);
+    await expect(page.getByTestId('preview')).not.toHaveAttribute('src', initialSrc!);
+  });
+});
diff --git a/e2e/src/web/specs/timeline/utils.ts b/e2e/src/web/specs/timeline/utils.ts
new file mode 100644
index 0000000000..6cd44cd784
--- /dev/null
+++ b/e2e/src/web/specs/timeline/utils.ts
@@ -0,0 +1,225 @@
+import { BrowserContext, expect, Page } from '@playwright/test';
+import { DateTime } from 'luxon';
+import { TimelineAssetConfig } from 'src/generators/timeline';
+
+export const sleep = (ms: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export const padYearMonth = (yearMonth: string) => {
+  const [year, month] = yearMonth.split('-');
+  return `${year}-${month.padStart(2, '0')}`;
+};
+
+export async function throttlePage(context: BrowserContext, page: Page) {
+  const session = await context.newCDPSession(page);
+  await session.send('Network.emulateNetworkConditions', {
+    offline: false,
+    downloadThroughput: (1.5 * 1024 * 1024) / 8,
+    uploadThroughput: (750 * 1024) / 8,
+    latency: 40,
+    connectionType: 'cellular3g',
+  });
+  await session.send('Emulation.setCPUThrottlingRate', { rate: 10 });
+}
+
+export const poll = async <T>(
+  page: Page,
+  query: () => Promise<T>,
+  callback?: (result: Awaited<T> | undefined) => boolean,
+) => {
+  let result;
+  const timeout = Date.now() + 10_000;
+
+  const terminate = callback || ((result: Awaited<T> | undefined) => !!result);
+  while (!terminate(result) && Date.now() < timeout) {
+    try {
+      result = await query();
+    } catch {
+      // ignore
+    }
+    if (page.isClosed()) {
+      return;
+    }
+    try {
+      await page.waitForTimeout(50);
+    } catch {
+      return;
+    }
+  }
+  if (!result) {
+    // rerun to trigger error if any
+    result = await query();
+  }
+  return result;
+};
+
+export const thumbnailUtils = {
+  locator(page: Page) {
+    return page.locator('[data-thumbnail-focus-container]');
+  },
+  withAssetId(page: Page, assetId: string) {
+    return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"]`);
+  },
+  selectButton(page: Page, assetId: string) {
+    return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"] button`);
+  },
+  selectedAsset(page: Page) {
+    return page.locator('[data-thumbnail-focus-container][data-selected]');
+  },
+  async clickAssetId(page: Page, assetId: string) {
+    await thumbnailUtils.withAssetId(page, assetId).click();
+  },
+  async queryThumbnailInViewport(page: Page, collector: (assetId: string) => boolean) {
+    const assetIds: string[] = [];
+    for (const thumb of await this.locator(page).all()) {
+      const box = await thumb.boundingBox();
+      if (box) {
+        const assetId = await thumb.evaluate((e) => e.dataset.asset);
+        if (collector?.(assetId!)) {
+          return [assetId!];
+        }
+        assetIds.push(assetId!);
+      }
+    }
+    return assetIds;
+  },
+  async getFirstInViewport(page: Page) {
+    return await poll(page, () => thumbnailUtils.queryThumbnailInViewport(page, () => true));
+  },
+  async getAllInViewport(page: Page, collector: (assetId: string) => boolean) {
+    return await poll(page, () => thumbnailUtils.queryThumbnailInViewport(page, collector));
+  },
+  async expectThumbnailIsFavorite(page: Page, assetId: string) {
+    await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-favorite]')).toHaveCount(1);
+  },
+  async expectThumbnailIsNotFavorite(page: Page, assetId: string) {
+    await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-favorite]')).toHaveCount(0);
+  },
+  async expectThumbnailIsArchive(page: Page, assetId: string) {
+    await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-archive]')).toHaveCount(1);
+  },
+  async expectThumbnailIsNotArchive(page: Page, assetId: string) {
+    await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-archive]')).toHaveCount(0);
+  },
+  async expectSelectedReadonly(page: Page, assetId: string) {
+    await expect(
+      page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"][data-selected]`),
+    ).toBeVisible();
+  },
+  async expectTimelineHasOnScreenAssets(page: Page) {
+    const first = await thumbnailUtils.getFirstInViewport(page);
+    if (page.isClosed()) {
+      return;
+    }
+    expect(first).toBeTruthy();
+  },
+  async expectInViewport(page: Page, assetId: string) {
+    const box = await poll(page, () => thumbnailUtils.withAssetId(page, assetId).boundingBox());
+    if (page.isClosed()) {
+      return;
+    }
+    expect(box).toBeTruthy();
+  },
+  async expectBottomIsTimelineBottom(page: Page, assetId: string) {
+    const box = await thumbnailUtils.withAssetId(page, assetId).boundingBox();
+    const gridBox = await timelineUtils.locator(page).boundingBox();
+    if (page.isClosed()) {
+      return;
+    }
+    expect(box!.y + box!.height).toBeCloseTo(gridBox!.y + gridBox!.height, 0);
+  },
+  async expectTopIsTimelineTop(page: Page, assetId: string) {
+    const box = await thumbnailUtils.withAssetId(page, assetId).boundingBox();
+    const gridBox = await timelineUtils.locator(page).boundingBox();
+    if (page.isClosed()) {
+      return;
+    }
+    expect(box!.y).toBeCloseTo(gridBox!.y, 0);
+  },
+};
+export const timelineUtils = {
+  locator(page: Page) {
+    return page.locator('#asset-grid');
+  },
+  async waitForTimelineLoad(page: Page) {
+    await expect(timelineUtils.locator(page)).toBeInViewport();
+    await expect.poll(() => thumbnailUtils.locator(page).count()).toBeGreaterThan(0);
+  },
+  async getScrollTop(page: Page) {
+    const queryTop = () =>
+      page.evaluate(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return document.querySelector('#asset-grid').scrollTop;
+      });
+    await expect.poll(queryTop).toBeGreaterThan(0);
+    return await queryTop();
+  },
+};
+
+export const assetViewerUtils = {
+  locator(page: Page) {
+    return page.locator('#immich-asset-viewer');
+  },
+  async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
+    await page
+      .locator(
+        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
+      )
+      .or(
+        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
+      )
+      .waitFor();
+  },
+  async expectActiveAssetToBe(page: Page, assetId: string) {
+    const activeElement = () =>
+      page.evaluate(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return document.activeElement?.dataset?.asset;
+      });
+    await expect(poll(page, activeElement, (result) => result === assetId)).resolves.toBe(assetId);
+  },
+};
+export const pageUtils = {
+  async deepLinkPhotosPage(page: Page, assetId: string) {
+    await page.goto(`/photos?at=${assetId}`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async openPhotosPage(page: Page) {
+    await page.goto(`/photos`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async openFavorites(page: Page) {
+    await page.goto(`/favorites`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async openAlbumPage(page: Page, albumId: string) {
+    await page.goto(`/albums/${albumId}`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async openArchivePage(page: Page) {
+    await page.goto(`/archive`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async deepLinkAlbumPage(page: Page, albumId: string, assetId: string) {
+    await page.goto(`/albums/${albumId}?at=${assetId}`);
+    await timelineUtils.waitForTimelineLoad(page);
+  },
+  async goToAsset(page: Page, assetDate: string) {
+    await timelineUtils.locator(page).hover();
+    const stringDate = DateTime.fromISO(assetDate).toFormat('MMddyyyy,hh:mm:ss.SSSa');
+    await page.keyboard.press('g');
+    await page.locator('#datetime').pressSequentially(stringDate);
+    await page.getByText('Confirm').click();
+  },
+  async selectDay(page: Page, day: string) {
+    await page.getByTitle(day).hover();
+    await page.locator('[data-group] .w-8').click();
+  },
+  async pauseTestDebug() {
+    console.log('NOTE: pausing test indefinately for debug');
+    await new Promise(() => void 0);
+  },
+};
diff --git a/web/src/lib/actions/image-loader.svelte.ts b/web/src/lib/actions/image-loader.svelte.ts
new file mode 100644
index 0000000000..10b642065c
--- /dev/null
+++ b/web/src/lib/actions/image-loader.svelte.ts
@@ -0,0 +1,207 @@
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import type { ClassValue } from 'svelte/elements';
+
+/**
+ * Converts a ClassValue to a string suitable for className assignment.
+ * Handles strings, arrays, and objects similar to how clsx works.
+ */
+function classValueToString(value: ClassValue | undefined): string {
+  if (!value) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value
+      .map((v) => classValueToString(v))
+      .filter(Boolean)
+      .join(' ');
+  }
+  // Object/dictionary case
+  return Object.entries(value)
+    .filter(([, v]) => v)
+    .map(([k]) => k)
+    .join(' ');
+}
+
+export type ImageLoaderProperties = {
+  imgClass?: ClassValue;
+  alt?: string;
+  draggable?: boolean;
+  role?: string;
+  style?: string;
+  title?: string | null;
+  loading?: 'lazy' | 'eager';
+  dataAttributes?: Record<string, string>;
+};
+export type ImageSourceProperty = {
+  src: string | undefined;
+};
+export type ImageLoaderCallbacks = {
+  onStart?: () => void;
+  onLoad?: () => void;
+  onError?: (error: Error) => void;
+  onElementCreated?: (element: HTMLImageElement) => void;
+};
+
+const updateImageAttributes = (img: HTMLImageElement, params: ImageLoaderProperties) => {
+  if (params.alt !== undefined) {
+    img.alt = params.alt;
+  }
+  if (params.draggable !== undefined) {
+    img.draggable = params.draggable;
+  }
+  if (params.imgClass) {
+    img.className = classValueToString(params.imgClass);
+  }
+  if (params.role) {
+    img.role = params.role;
+  }
+  if (params.style !== undefined) {
+    img.setAttribute('style', params.style);
+  }
+  if (params.title !== undefined && params.title !== null) {
+    img.title = params.title;
+  }
+  if (params.loading !== undefined) {
+    img.loading = params.loading;
+  }
+  if (params.dataAttributes) {
+    for (const [key, value] of Object.entries(params.dataAttributes)) {
+      img.setAttribute(key, value);
+    }
+  }
+};
+
+const destroyImageElement = (
+  imgElement: HTMLImageElement,
+  currentSrc: string | undefined,
+  handleLoad: () => void,
+  handleError: () => void,
+) => {
+  imgElement.removeEventListener('load', handleLoad);
+  imgElement.removeEventListener('error', handleError);
+  cancelImageUrl(currentSrc);
+  imgElement.remove();
+};
+
+const createImageElement = (
+  src: string | undefined,
+  properties: ImageLoaderProperties,
+  onLoad: () => void,
+  onError: () => void,
+  onStart?: () => void,
+  onElementCreated?: (imgElement: HTMLImageElement) => void,
+) => {
+  if (!src) {
+    return undefined;
+  }
+  const img = document.createElement('img');
+  updateImageAttributes(img, properties);
+
+  img.addEventListener('load', onLoad);
+  img.addEventListener('error', onError);
+
+  onStart?.();
+
+  if (src) {
+    img.src = src;
+    onElementCreated?.(img);
+  }
+
+  return img;
+};
+
+export function loadImage(
+  src: string,
+  properties: ImageLoaderProperties,
+  onLoad: () => void,
+  onError: () => void,
+  onStart?: () => void,
+) {
+  let destroyed = false;
+  const wrapper = (fn: (() => void) | undefined) => () => {
+    if (destroyed) {
+      return;
+    }
+    fn?.();
+  };
+  const wrappedOnLoad = wrapper(onLoad);
+  const wrappedOnError = wrapper(onError);
+  const wrappedOnStart = wrapper(onStart);
+  const img = createImageElement(src, properties, wrappedOnLoad, wrappedOnError, wrappedOnStart);
+  if (!img) {
+    return () => {};
+  }
+  return () => {
+    destroyed = true;
+    destroyImageElement(img, src, wrappedOnLoad, wrappedOnError);
+  };
+}
+
+export type LoadImageFunction = typeof loadImage;
+
+/**
+ * 1. Creates and appends an <img> element to the parent
+ * 2. Coordinates with service worker before src triggers fetch
+ * 3. Adds load/error listeners
+ * 4. Cancels SW request when element is removed from DOM
+ */
+export function imageLoader(
+  node: HTMLElement,
+  params: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks,
+) {
+  let currentSrc = params.src;
+  let currentCallbacks = params;
+  let imgElement: HTMLImageElement | undefined = undefined;
+
+  const handleLoad = () => {
+    currentCallbacks.onLoad?.();
+  };
+
+  const handleError = () => {
+    currentCallbacks.onError?.(new Error(`Failed to load image: ${currentSrc}`));
+  };
+
+  const handleElementCreated = (img: HTMLImageElement) => {
+    if (img) {
+      node.append(img);
+      currentCallbacks.onElementCreated?.(img);
+    }
+  };
+
+  const createImage = () => {
+    imgElement = createImageElement(currentSrc, params, handleLoad, handleError, params.onStart, handleElementCreated);
+  };
+  createImage();
+
+  return {
+    update(newParams: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks) {
+      // If src changed, recreate the image element
+      if (newParams.src !== currentSrc) {
+        if (imgElement) {
+          destroyImageElement(imgElement, currentSrc, handleLoad, handleError);
+        }
+        currentSrc = newParams.src;
+        currentCallbacks = newParams;
+
+        createImage();
+        return;
+      }
+
+      currentCallbacks = newParams;
+
+      if (!imgElement) {
+        return;
+      }
+      updateImageAttributes(imgElement, newParams);
+    },
+
+    destroy() {
+      if (imgElement) {
+        destroyImageElement(imgElement, currentSrc, handleLoad, handleError);
+      }
+    },
+  };
+}
diff --git a/web/src/lib/actions/zoom-image.ts b/web/src/lib/actions/zoom-image.ts
index 6288daa380..502565ef6c 100644
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -1,8 +1,12 @@
 import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 import { createZoomImageWheel } from '@zoom-image/core';
 
-export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
-  const zoomInstance = createZoomImageWheel(node, { maxZoom: 10, initialState: assetViewerManager.zoomState });
+export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean; zoomTarget?: HTMLElement }) => {
+  const zoomInstance = createZoomImageWheel(node, {
+    maxZoom: 10,
+    initialState: assetViewerManager.zoomState,
+    zoomTarget: options?.zoomTarget ?? null,
+  });
 
   const unsubscribes = [
     assetViewerManager.on({ ZoomChange: (state) => zoomInstance.setState(state) }),
@@ -20,8 +24,9 @@ export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolea
 
   node.style.overflow = 'visible';
   return {
-    update(newOptions?: { disabled?: boolean }) {
+    update(newOptions?: { disabled?: boolean; zoomTarget?: HTMLElement }) {
       options = newOptions;
+      zoomInstance.setState({ zoomTarget: newOptions?.zoomTarget ?? null });
     },
     destroy() {
       for (const unsubscribe of unsubscribes) {
diff --git a/web/src/lib/components/asset-viewer/actions/action.ts b/web/src/lib/components/asset-viewer/actions/action.ts
index 19cc5afa8d..761887a465 100644
--- a/web/src/lib/components/asset-viewer/actions/action.ts
+++ b/web/src/lib/components/asset-viewer/actions/action.ts
@@ -14,7 +14,7 @@ type ActionMap = {
   [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
   [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: TimelineAsset };
   [AssetAction.SET_STACK_PRIMARY_ASSET]: { stack: StackResponseDto };
-  [AssetAction.REMOVE_ASSET_FROM_STACK]: { stack: StackResponseDto | null; asset: AssetResponseDto };
+  [AssetAction.REMOVE_ASSET_FROM_STACK]: { stack: StackResponseDto | undefined; asset: AssetResponseDto };
   [AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
   [AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
   [AssetAction.SET_PERSON_FEATURED_PHOTO]: { asset: AssetResponseDto; person: PersonResponseDto };
diff --git a/web/src/lib/components/asset-viewer/adaptive-image.svelte b/web/src/lib/components/asset-viewer/adaptive-image.svelte
new file mode 100644
index 0000000000..2fe919c7f8
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/adaptive-image.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { imageLoader } from '$lib/actions/image-loader.svelte';
+  import { thumbhash } from '$lib/actions/thumbhash';
+  import { zoomImageAction } from '$lib/actions/zoom-image';
+  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
+  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
+  import { getDimensions } from '$lib/utils/asset-utils';
+  import { scaleToFit } from '$lib/utils/layout-utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
+  import { LoadingSpinner } from '@immich/ui';
+  import { onDestroy, untrack, type Snippet } from 'svelte';
+
+  interface Props {
+    asset: AssetResponseDto;
+    sharedLink?: SharedLinkResponseDto;
+    zoomDisabled?: boolean;
+    imageClass?: string;
+    container: {
+      width: number;
+      height: number;
+    };
+    slideshowState: SlideshowState;
+    slideshowLook: SlideshowLook;
+    onImageReady?: () => void;
+    onError?: () => void;
+    imgElement?: HTMLImageElement;
+    overlays?: Snippet;
+  }
+
+  let {
+    imgElement = $bindable<HTMLImageElement | undefined>(),
+    asset,
+    sharedLink,
+    zoomDisabled = false,
+    imageClass = '',
+    container,
+    slideshowState,
+    slideshowLook,
+    onImageReady,
+    onError,
+    overlays,
+  }: Props = $props();
+
+  let previousLoader = $state<AdaptiveImageLoader>();
+  let previousAssetId: string | undefined;
+  let previousSharedLinkId: string | undefined;
+
+  const adaptiveImageLoader = $derived.by(() => {
+    if (previousAssetId === asset.id && previousSharedLinkId === sharedLink?.id) {
+      return previousLoader!;
+    }
+
+    return untrack(() => {
+      previousAssetId = asset.id;
+      previousSharedLinkId = sharedLink?.id;
+
+      previousLoader?.destroy();
+      assetViewerManager.resetZoomState();
+      const loader = new AdaptiveImageLoader(asset, sharedLink, {
+        currentZoomFn: () => assetViewerManager.zoom,
+        onImageReady,
+        onError,
+      });
+      previousLoader = loader;
+      return loader;
+    });
+  });
+  onDestroy(() => adaptiveImageLoader.destroy());
+
+  const imageDimensions = $derived.by(() => {
+    if ((asset.width ?? 0) > 0 && (asset.height ?? 0) > 0) {
+      return { width: asset.width!, height: asset.height! };
+    }
+
+    if (asset.exifInfo?.exifImageHeight && asset.exifInfo.exifImageWidth) {
+      return getDimensions(asset.exifInfo) as { width: number; height: number };
+    }
+
+    return { width: 1, height: 1 };
+  });
+
+  const scaledDimensions = $derived(scaleToFit(imageDimensions, container));
+
+  const renderDimensions = $derived.by(() => {
+    const { width, height } = scaledDimensions;
+    return {
+      width: width + 'px',
+      height: height + 'px',
+      left: (container.width - width) / 2 + 'px',
+      top: (container.height - height) / 2 + 'px',
+    };
+  });
+
+  const blurredSlideshow = $derived(
+    slideshowState !== SlideshowState.None && slideshowLook === SlideshowLook.BlurredBackground && !!asset.thumbhash,
+  );
+
+  const loaderState = $derived(adaptiveImageLoader.state);
+  const imageAltText = $derived(loaderState.previewUrl ? $getAltText(toTimelineAsset(asset)) : '');
+  const showSpinner = $derived(!asset.thumbhash && loaderState.quality === 'basic');
+  const showBrokenAsset = $derived(loaderState.hasError);
+
+  // Effect: Upgrade to original when user zooms in
+  $effect(() => {
+    if (assetViewerManager.zoom > 1 && loaderState.quality === 'preview') {
+      void adaptiveImageLoader.triggerOriginal();
+    }
+  });
+  let thumbnailElement = $state<HTMLImageElement>();
+  let previewElement = $state<HTMLImageElement>();
+  let originalElement = $state<HTMLImageElement>();
+  let mainImageBox = $state<HTMLElement>();
+
+  // Effect: Synchronize highest quality element as main imgElement
+  $effect(() => {
+    imgElement = originalElement ?? previewElement ?? thumbnailElement;
+  });
+</script>
+
+<div class="relative h-full w-full" use:zoomImageAction={{ disabled: zoomDisabled, zoomTarget: mainImageBox }}>
+  <!-- Blurred slideshow background (full viewport) -->
+  {#if blurredSlideshow}
+    <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash! }} class="-z-1 absolute top-0 left-0 start-0 h-dvh w-dvw"
+    ></canvas>
+  {/if}
+
+  <!-- Main image box with transition -->
+  <div
+    bind:this={mainImageBox}
+    class="absolute"
+    style:left={renderDimensions.left}
+    style:top={renderDimensions.top}
+    style:width={renderDimensions.width}
+    style:height={renderDimensions.height}
+  >
+    {#if asset.thumbhash}
+      <!-- Thumbhash / spinner layer  -->
+      <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute -z-2"></canvas>
+    {:else if showSpinner}
+      <div id="spinner" class="absolute flex h-full items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    {/if}
+
+    <div
+      class="absolute top-0"
+      style:width={renderDimensions.width}
+      style:height={renderDimensions.height}
+      use:imageLoader={{
+        src: loaderState.thumbnailUrl,
+        onStart: () => adaptiveImageLoader.onThumbnailStart(),
+        onLoad: () => adaptiveImageLoader.onThumbnailLoad(),
+        onError: () => adaptiveImageLoader.onThumbnailError(),
+        onElementCreated: (element) => (thumbnailElement = element),
+        imgClass: ['absolute h-full', 'w-full'],
+        alt: '',
+        role: 'presentation',
+        dataAttributes: {
+          'data-testid': 'thumbnail',
+        },
+      }}
+    ></div>
+
+    {#if showBrokenAsset}
+      <BrokenAsset class="text-xl h-full w-full absolute" />
+    {:else}
+      <div
+        class="absolute top-0"
+        style:width={renderDimensions.width}
+        style:height={renderDimensions.height}
+        use:imageLoader={{
+          src: loaderState.previewUrl,
+          onStart: () => adaptiveImageLoader.onPreviewStart(),
+          onLoad: () => adaptiveImageLoader.onPreviewLoad(),
+          onError: () => adaptiveImageLoader.onPreviewError(),
+          onElementCreated: (element) => (previewElement = element),
+          imgClass: ['h-full', 'w-full', imageClass],
+          alt: imageAltText,
+          draggable: false,
+          dataAttributes: {
+            'data-testid': 'preview',
+          },
+        }}
+      >
+        {@render overlays?.()}
+      </div>
+
+      <div
+        class="absolute top-0"
+        style:width={renderDimensions.width}
+        style:height={renderDimensions.height}
+        use:imageLoader={{
+          src: loaderState.originalUrl,
+          onStart: () => adaptiveImageLoader.onOriginalStart(),
+          onLoad: () => adaptiveImageLoader.onOriginalLoad(),
+          onError: () => adaptiveImageLoader.onOriginalError(),
+          onElementCreated: (element) => (originalElement = element),
+          imgClass: ['h-full', 'w-full', imageClass],
+          alt: imageAltText,
+          draggable: false,
+          dataAttributes: {
+            'data-testid': 'original',
+          },
+        }}
+      >
+        {@render overlays?.()}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  #spinner {
+    visibility: hidden;
+    animation: 0s linear 0.4s forwards delayedVisibility;
+  }
+  :global(.checkerboard) {
+    background-image: conic-gradient(#808080 25%, #b0b0b0 25% 50%, #808080 50% 75%, #b0b0b0 75%);
+    background-size: 20px 20px;
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 848870b654..eb46673d49 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import { loadImage } from '$lib/actions/image-loader.svelte';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
   import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
@@ -12,7 +13,6 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { imageManager } from '$lib/managers/ImageManager.svelte';
   import { Route } from '$lib/route';
   import { getAssetActions } from '$lib/services/asset.service';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -22,14 +22,15 @@
   import { user } from '$lib/stores/user.store';
   import { getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
+  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
+
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetTypeEnum,
-    getAllAlbums,
     getAssetInfo,
     getStack,
     type AlbumResponseDto,
@@ -95,21 +96,21 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
-    slideshowTransition,
     slideshowRepeat,
   } = slideshowStore;
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
 
-  const asset = $derived(cursor.current);
+  let stack: StackResponseDto | undefined = $state();
+  let selectedStackAsset = $derived(stack?.assets.find(({ id }) => id === stack?.primaryAssetId));
+  let previewStackedAsset: AssetResponseDto | undefined = $state();
+
+  const asset = $derived(previewStackedAsset ?? selectedStackAsset ?? cursor.current);
   const nextAsset = $derived(cursor.nextAsset);
   const previousAsset = $derived(cursor.previousAsset);
-  let appearsInAlbums: AlbumResponseDto[] = $state([]);
+
   let sharedLink = getSharedLink();
-  let previewStackedAsset: AssetResponseDto | undefined = $state();
   let fullscreenElement = $state<Element>();
-  let unsubscribes: (() => void)[] = [];
-  let stack: StackResponseDto | null = $state(null);
 
   let playOriginalVideo = $state($alwaysLoadOriginalVideo);
   let slideshowStartAssetId = $state<string>();
@@ -119,78 +120,61 @@
   };
 
   const refreshStack = async () => {
-    if (authManager.isSharedLink) {
+    if (authManager.isSharedLink || !withStacked) {
       return;
     }
 
-    if (asset.stack) {
-      stack = await getStack({ id: asset.stack.id });
+    if (!cursor.current.stack) {
+      stack = undefined;
+      return;
     }
 
-    if (!stack?.assets.some(({ id }) => id === asset.id)) {
-      stack = null;
-    }
-
-    untrack(() => {
-      imageManager.preload(stack?.assets[1]);
-    });
+    stack = await getStack({ id: cursor.current.stack.id });
   };
 
   const handleFavorite = async () => {
-    if (album && album.isActivityEnabled) {
-      try {
-        await activityManager.toggleLike();
-      } catch (error) {
-        handleError(error, $t('errors.unable_to_change_favorite'));
-      }
-    }
-  };
-
-  onMount(async () => {
-    unsubscribes.push(
-      slideshowState.subscribe((value) => {
-        if (value === SlideshowState.PlaySlideshow) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-          handlePromiseError(handlePlaySlideshow());
-        } else if (value === SlideshowState.StopSlideshow) {
-          handlePromiseError(handleStopSlideshow());
-        }
-      }),
-      slideshowNavigation.subscribe((value) => {
-        if (value === SlideshowNavigation.Shuffle) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-        }
-      }),
-    );
-
-    if (!sharedLink) {
-      await handleGetAllAlbums();
-    }
-  });
-
-  onDestroy(() => {
-    for (const unsubscribe of unsubscribes) {
-      unsubscribe();
-    }
-
-    activityManager.reset();
-    assetViewerManager.closeEditor();
-  });
-
-  const handleGetAllAlbums = async () => {
-    if (authManager.isSharedLink) {
+    if (!album || !album.isActivityEnabled) {
       return;
     }
 
     try {
-      appearsInAlbums = await getAllAlbums({ assetId: asset.id });
+      await activityManager.toggleLike();
     } catch (error) {
-      console.error('Error getting album that asset belong to', error);
+      handleError(error, $t('errors.unable_to_change_favorite'));
     }
   };
 
+  onMount(() => {
+    const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
+      if (value === SlideshowState.PlaySlideshow) {
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+        handlePromiseError(handlePlaySlideshow());
+      } else if (value === SlideshowState.StopSlideshow) {
+        handlePromiseError(handleStopSlideshow());
+      }
+    });
+
+    const slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
+      if (value === SlideshowNavigation.Shuffle) {
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+      }
+    });
+
+    return () => {
+      slideshowStateUnsubscribe();
+      slideshowNavigationUnsubscribe();
+    };
+  });
+
+  onDestroy(() => {
+    activityManager.reset();
+    assetViewerManager.closeEditor();
+    destroyNextPreloader();
+    destroyPreviousPreloader();
+  });
+
   const closeViewer = () => {
     onClose?.(asset);
   };
@@ -204,9 +188,64 @@
     assetViewerManager.closeEditor();
   };
 
-  const tracker = new InvocationTracker();
+  let nextPreloader: AdaptiveImageLoader | undefined;
+  let previousPreloader: AdaptiveImageLoader | undefined;
 
-  const navigateAsset = (order?: 'previous' | 'next', e?: Event) => {
+  const startPreloader = (asset: AssetResponseDto | undefined) => {
+    if (!asset) {
+      return;
+    }
+    const loader = new AdaptiveImageLoader(asset, undefined, undefined, loadImage);
+    loader.start();
+    return loader;
+  };
+
+  const destroyPreviousPreloader = () => {
+    previousPreloader?.destroy();
+    previousPreloader = undefined;
+  };
+
+  const destroyNextPreloader = () => {
+    nextPreloader?.destroy();
+    nextPreloader = undefined;
+  };
+
+  const cancelPreloadsBeforeNavigation = (direction: 'previous' | 'next') => {
+    if (direction === 'next') {
+      destroyPreviousPreloader();
+      return;
+    }
+    destroyNextPreloader();
+  };
+
+  const updatePreloadsAfterNavigation = (oldCursor: AssetCursor, newCursor: AssetCursor) => {
+    const movedForward = newCursor.current.id === oldCursor.nextAsset?.id;
+    const movedBackward = newCursor.current.id === oldCursor.previousAsset?.id;
+
+    const shouldDestroyPrevious = movedForward || !movedBackward;
+    const shouldDestroyNext = movedBackward || !movedForward;
+
+    if (shouldDestroyPrevious) {
+      destroyPreviousPreloader();
+    }
+
+    if (shouldDestroyNext) {
+      destroyNextPreloader();
+    }
+
+    if (movedForward) {
+      nextPreloader = startPreloader(newCursor.nextAsset);
+    } else if (movedBackward) {
+      previousPreloader = startPreloader(newCursor.previousAsset);
+    } else {
+      // Non-adjacent navigation (e.g., slideshow random)
+      previousPreloader = startPreloader(newCursor.previousAsset);
+      nextPreloader = startPreloader(newCursor.nextAsset);
+    }
+  };
+
+  const tracker = new InvocationTracker();
+  const navigateAsset = (order?: 'previous' | 'next') => {
     if (!order) {
       if ($slideshowState === SlideshowState.PlaySlideshow) {
         order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
@@ -215,8 +254,8 @@
       }
     }
 
-    e?.stopPropagation();
-    imageManager.cancel(asset);
+    cancelPreloadsBeforeNavigation(order);
+
     if (tracker.isActive()) {
       return;
     }
@@ -238,16 +277,18 @@
           order === 'previous' ? await navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
       }
 
-      if ($slideshowState === SlideshowState.PlaySlideshow) {
-        if (hasNext) {
-          $restartSlideshowProgress = true;
-        } else if ($slideshowRepeat && slideshowStartAssetId) {
-          // Loop back to starting asset
-          await setAssetId(slideshowStartAssetId);
-          $restartSlideshowProgress = true;
-        } else {
-          await handleStopSlideshow();
-        }
+      if ($slideshowState !== SlideshowState.PlaySlideshow) {
+        return;
+      }
+
+      if (hasNext) {
+        $restartSlideshowProgress = true;
+      } else if ($slideshowRepeat && slideshowStartAssetId) {
+        // Loop back to starting asset
+        await setAssetId(slideshowStartAssetId);
+        $restartSlideshowProgress = true;
+      } else {
+        await handleStopSlideshow();
       }
     }, $t('error_while_navigating'));
   };
@@ -292,16 +333,24 @@
     }
   };
 
-  const handleStackedAssetMouseEvent = (isMouseOver: boolean, asset: AssetResponseDto) => {
-    previewStackedAsset = isMouseOver ? asset : undefined;
+  const handleStackedAssetMouseEvent = (isMouseOver: boolean, stackedAsset: AssetResponseDto) => {
+    if (isMouseOver) {
+      previewStackedAsset = stackedAsset;
+    }
   };
+
+  const handleStackedAssetsMouseLeave = () => {
+    previewStackedAsset = undefined;
+  };
+
   const handlePreAction = (action: Action) => {
     preAction?.(action);
   };
+
   const handleAction = async (action: Action) => {
     switch (action.type) {
       case AssetAction.ADD_TO_ALBUM: {
-        await handleGetAllAlbums();
+        eventManager.emit('AlbumAddAssets');
         break;
       }
       case AssetAction.DELETE:
@@ -361,21 +410,44 @@
 
   const refresh = async () => {
     await refreshStack();
-    await handleGetAllAlbums();
     ocrManager.clear();
-    if (!sharedLink) {
-      if (previewStackedAsset) {
-        await ocrManager.getAssetOcr(previewStackedAsset.id);
-      }
-      await ocrManager.getAssetOcr(asset.id);
+    if (sharedLink) {
+      return;
     }
+
+    if (previewStackedAsset) {
+      await ocrManager.getAssetOcr(previewStackedAsset.id);
+    }
+    await ocrManager.getAssetOcr(asset.id);
   };
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    asset;
+    cursor.current;
     untrack(() => handlePromiseError(refresh()));
-    imageManager.preload(cursor.nextAsset);
-    imageManager.preload(cursor.previousAsset);
+  });
+
+  let lastCursor = $state<AssetCursor>();
+
+  $effect(() => {
+    if (cursor.current.id === lastCursor?.current.id) {
+      return;
+    }
+    if (lastCursor) {
+      selectedStackAsset = undefined;
+      previewStackedAsset = undefined;
+      // After navigation completes, reconcile preloads with full state information
+      updatePreloadsAfterNavigation(lastCursor, cursor);
+    }
+    if (!lastCursor && cursor) {
+      // "first time" load, start preloads
+      if (cursor.nextAsset) {
+        nextPreloader = startPreloader(cursor.nextAsset);
+      }
+      if (cursor.previousAsset) {
+        previousPreloader = startPreloader(cursor.previousAsset);
+      }
+    }
+    lastCursor = cursor;
   });
 
   const onAssetReplace = async ({ oldAssetId, newAssetId }: { oldAssetId: string; newAssetId: string }) => {
@@ -395,7 +467,7 @@
 
   const viewerKind = $derived.by(() => {
     if (previewStackedAsset) {
-      return asset.type === AssetTypeEnum.Image ? 'StackPhotoViewer' : 'StackVideoViewer';
+      return asset.type === AssetTypeEnum.Image ? 'PhotoViewer' : 'StackVideoViewer';
     }
     if (asset.type === AssetTypeEnum.Video) {
       return 'VideoViewer';
@@ -485,15 +557,7 @@
 
   <!-- Asset Viewer -->
   <div class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
-    {#if viewerKind === 'StackPhotoViewer'}
-      <PhotoViewer
-        cursor={{ ...cursor, current: previewStackedAsset! }}
-        onPreviousAsset={() => navigateAsset('previous')}
-        onNextAsset={() => navigateAsset('next')}
-        haveFadeTransition={false}
-        {sharedLink}
-      />
-    {:else if viewerKind === 'StackVideoViewer'}
+    {#if viewerKind === 'StackVideoViewer'}
       <VideoViewer
         asset={previewStackedAsset!}
         cacheKey={previewStackedAsset!.thumbhash}
@@ -523,13 +587,7 @@
     {:else if viewerKind === 'CropArea'}
       <CropArea {asset} />
     {:else if viewerKind === 'PhotoViewer'}
-      <PhotoViewer
-        {cursor}
-        onPreviousAsset={() => navigateAsset('previous')}
-        onNextAsset={() => navigateAsset('next')}
-        {sharedLink}
-        haveFadeTransition={$slideshowState !== SlideshowState.None && $slideshowTransition}
-      />
+      <PhotoViewer cursor={{ ...cursor, current: asset }} {sharedLink} />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
         {asset}
@@ -577,7 +635,7 @@
       class="row-start-1 row-span-4 w-90 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >
-      <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} />
+      <DetailPanel {asset} currentAlbum={album} />
     </div>
   {/if}
 
@@ -595,10 +653,14 @@
   {#if stack && withStacked && !assetViewerManager.isShowEditor}
     {@const stackedAssets = stack.assets}
     <div id="stack-slideshow" class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none">
-      <div class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar">
+      <div
+        role="presentation"
+        class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar pointer-events-auto"
+        onmouseleave={handleStackedAssetsMouseLeave}
+      >
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
-            class={['inline-block px-1 relative transition-all pb-2 pointer-events-auto']}
+            class={['inline-block px-1 relative transition-all pb-2']}
             style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
@@ -607,7 +669,7 @@
               dimmed={stackedAsset.id !== asset.id}
               asset={toTimelineAsset(stackedAsset)}
               onClick={() => {
-                cursor.current = stackedAsset;
+                selectedStackAsset = stackedAsset;
                 previewStackedAsset = undefined;
               }}
               onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 6e934874e9..1df6662c06 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -7,6 +7,7 @@
   import { timeToLoadTheMap } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import AssetChangeDateModal from '$lib/modals/AssetChangeDateModal.svelte';
   import { Route } from '$lib/route';
@@ -17,9 +18,16 @@
   import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { delay, getDimensions } from '$lib/utils/asset-utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
+  import { handleError } from '$lib/utils/handle-error';
   import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
-  import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import {
+    AssetMediaSize,
+    getAllAlbums,
+    getAssetInfo,
+    type AlbumResponseDto,
+    type AssetResponseDto,
+  } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import {
     mdiCalendar,
@@ -34,6 +42,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -43,11 +52,10 @@
 
   interface Props {
     asset: AssetResponseDto;
-    albums?: AlbumResponseDto[];
     currentAlbum?: AlbumResponseDto | null;
   }
 
-  let { asset, albums = [], currentAlbum = null }: Props = $props();
+  let { asset, currentAlbum = null }: Props = $props();
 
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
@@ -74,14 +82,40 @@
   let previousId: string | undefined = $state();
   let previousRoute = $derived(currentAlbum?.id ? Route.viewAlbum(currentAlbum) : Route.photos());
 
+  let albums = $state<AlbumResponseDto[]>([]);
+
+  const refreshAlbums = async () => {
+    if (authManager.isSharedLink) {
+      return;
+    }
+
+    try {
+      albums = await getAllAlbums({ assetId: asset.id });
+    } catch (error) {
+      handleError(error, 'Error getting asset album membership');
+    }
+  };
+
+  onMount(() => eventManager.on({ AlbumAddAssets: () => void refreshAlbums() }));
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    asset;
+    untrack(() => void refreshAlbums());
+  });
+
   $effect(() => {
     if (!previousId) {
       previousId = asset.id;
+      return;
     }
-    if (asset.id !== previousId) {
-      showEditFaces = false;
-      previousId = asset.id;
+
+    if (asset.id === previousId) {
+      return;
     }
+
+    showEditFaces = false;
+    previousId = asset.id;
   });
 
   const getMegapixel = (width: number, height: number): number | undefined => {
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 2101107f6e..0c464cd306 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,65 +1,39 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import { zoomImageAction } from '$lib/actions/zoom-image';
+  import AdaptiveImage from '$lib/components/asset-viewer/adaptive-image.svelte';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
-  import { assetViewerFadeDuration } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { imageManager } from '$lib/managers/ImageManager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
-  import { getAssetUrl, targetImageSize as getTargetImageSize, handlePromiseError } from '$lib/utils';
+  import { SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
+  import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, toastManager } from '@immich/ui';
-  import { onDestroy, untrack } from 'svelte';
-  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
+  import { type SharedLinkResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import type { AssetCursor } from './asset-viewer.svelte';
 
   interface Props {
     cursor: AssetCursor;
-    element?: HTMLDivElement | undefined;
-    haveFadeTransition?: boolean;
-    sharedLink?: SharedLinkResponseDto | undefined;
-    onPreviousAsset?: (() => void) | null;
-    onNextAsset?: (() => void) | null;
+    element?: HTMLDivElement;
+    sharedLink?: SharedLinkResponseDto;
+    onReady?: () => void;
+    onError?: () => void;
   }
 
-  let {
-    cursor,
-    element = $bindable(),
-    haveFadeTransition = true,
-    sharedLink = undefined,
-    onPreviousAsset = null,
-    onNextAsset = null,
-  }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, onReady, onError }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
 
-  let imageLoaded: boolean = $state(false);
-  let originalImageLoaded: boolean = $state(false);
-  let imageError: boolean = $state(false);
-
-  let loader = $state<HTMLImageElement>();
-
-  $effect.pre(() => {
-    void asset.id;
-    untrack(() => assetViewerManager.resetZoomState());
-  });
-
   onDestroy(() => {
     $boundingBoxesArray = [];
   });
@@ -107,29 +81,11 @@
     handlePromiseError(onCopy());
   };
 
-  const onSwipe = (event: SwipeCustomEvent) => {
-    if (assetViewerManager.zoom > 1) {
-      return;
-    }
-
-    if (ocrManager.showOverlay) {
-      return;
-    }
-
-    if (onNextAsset && event.detail.direction === 'left') {
-      onNextAsset();
-    }
-
-    if (onPreviousAsset && event.detail.direction === 'right') {
-      onPreviousAsset();
-    }
-  };
-
-  const targetImageSize = $derived(getTargetImageSize(asset, originalImageLoaded || assetViewerManager.zoom > 1));
+  let currentPreviewUrl = $state<string>();
 
   $effect(() => {
-    if (imageLoaderUrl) {
-      void cast(imageLoaderUrl);
+    if (currentPreviewUrl) {
+      void cast(currentPreviewUrl);
     }
   });
 
@@ -147,35 +103,11 @@
     }
   };
 
-  const onload = () => {
-    imageLoaded = true;
-    originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
-  };
-
-  const onerror = () => {
-    imageError = imageLoaded = true;
-  };
-
-  onDestroy(() => imageManager.cancelPreloadUrl(imageLoaderUrl));
-
-  let imageLoaderUrl = $derived(
-    getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || assetViewerManager.zoom > 1 }),
-  );
-
   let containerWidth = $state(0);
   let containerHeight = $state(0);
-
-  let lastUrl: string | undefined;
-
-  $effect(() => {
-    if (lastUrl && lastUrl !== imageLoaderUrl) {
-      untrack(() => {
-        imageLoaded = false;
-        originalImageLoaded = false;
-        imageError = false;
-      });
-    }
-    lastUrl = imageLoaderUrl;
+  const container = $derived({
+    width: containerWidth,
+    height: containerHeight,
   });
 </script>
 
@@ -189,46 +121,29 @@
     { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
   ]}
 />
-{#if imageError}
-  <div id="broken-asset" class="h-full w-full">
-    <BrokenAsset class="text-xl h-full w-full" />
-  </div>
-{/if}
-<img bind:this={loader} style="display:none" src={imageLoaderUrl} alt="" aria-hidden="true" {onload} {onerror} />
+
 <div
   bind:this={element}
   class="relative h-full w-full select-none"
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
 >
-  {#if !imageLoaded}
-    <div id="spinner" class="flex h-full items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  {:else if !imageError}
-    <div
-      use:zoomImageAction={{ disabled: isOcrActive }}
-      {...useSwipe(onSwipe)}
-      class="h-full w-full"
-      transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
-    >
-      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
-        <img
-          src={imageLoaderUrl}
-          alt=""
-          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
-          draggable="false"
-        />
-      {/if}
-      <img
-        bind:this={assetViewerManager.imgRef}
-        src={imageLoaderUrl}
-        alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
-          ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
-        draggable="false"
-      />
+  <AdaptiveImage
+    {asset}
+    {sharedLink}
+    {container}
+    zoomDisabled={isOcrActive}
+    imageClass={`${$slideshowState === SlideshowState.None ? 'object-contain' : slideshowLookCssMapping[$slideshowLook]} checkerboard`}
+    slideshowState={$slideshowState}
+    slideshowLook={$slideshowLook}
+    onImageReady={() => onReady?.()}
+    onError={() => {
+      onError?.();
+      onReady?.();
+    }}
+    bind:imgElement={assetViewerManager.imgRef}
+  >
+    {#snippet overlays()}
       <!-- eslint-disable-next-line svelte/require-each-key -->
       {#each getBoundingBox($boundingBoxesArray, assetViewerManager.zoomState, assetViewerManager.imgRef) as boundingbox}
         <div
@@ -240,23 +155,10 @@
       {#each ocrBoxes as ocrBox (ocrBox.id)}
         <OcrBoundingBox {ocrBox} />
       {/each}
-    </div>
+    {/snippet}
+  </AdaptiveImage>
 
-    {#if isFaceEditMode.value}
-      <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
-    {/if}
+  {#if isFaceEditMode.value && assetViewerManager.imgRef}
+    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>
-
-<style>
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  #broken-asset,
-  #spinner {
-    visibility: hidden;
-    animation: 0s linear 0.4s forwards delayedVisibility;
-  }
-</style>
diff --git a/web/src/lib/components/assets/broken-asset.svelte b/web/src/lib/components/assets/broken-asset.svelte
index a15a787e64..16903112d3 100644
--- a/web/src/lib/components/assets/broken-asset.svelte
+++ b/web/src/lib/components/assets/broken-asset.svelte
@@ -2,24 +2,34 @@
   import { Icon } from '@immich/ui';
   import { mdiImageBrokenVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
-    class?: string;
+    class?: ClassValue;
     hideMessage?: boolean;
     width?: string | undefined;
     height?: string | undefined;
   }
 
   let { class: className = '', hideMessage = false, width = undefined, height = undefined }: Props = $props();
+
+  let clientWidth = $state(0);
+  let textClass = $derived(clientWidth < 100 ? 'text-xs' : clientWidth < 150 ? 'text-sm' : 'text-base');
 </script>
 
 <div
-  class="flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4 {className}"
+  bind:clientWidth
+  class={[
+    'flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
+    className,
+  ]}
   style:width
   style:height
 >
-  <Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full" />
+  {#if clientWidth >= 75}
+    <Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full min-w-6 min-h-6" />
+  {/if}
   {#if !hideMessage}
-    <span class="text-center">{$t('error_loading_image')}</span>
+    <span class="text-center {textClass}">{$t('error_loading_image')}</span>
   {/if}
 </div>
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
index a1dd22f44f..00ba3addb7 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
+  import { imageLoader } from '$lib/actions/image-loader.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { imageManager } from '$lib/managers/ImageManager.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
-  import type { ActionReturn } from 'svelte/action';
   import type { ClassValue } from 'svelte/elements';
 
   interface Props {
@@ -49,53 +48,46 @@
     loaded = true;
     onComplete?.(false);
   };
+
   const setErrored = () => {
     errored = true;
     onComplete?.(true);
   };
 
-  function mount(elem: HTMLImageElement): ActionReturn {
-    if (elem.complete) {
-      loaded = true;
-      onComplete?.(false);
-    }
-    return {
-      destroy: () => imageManager.cancelPreloadUrl(url),
-    };
-  }
-
-  let optionalClasses = $derived(
+  let optionalClasses = $derived([
     [
       curve && 'rounded-xl',
       circle && 'rounded-full',
       shadow && 'shadow-lg',
       (circle || !heightStyle) && 'aspect-square',
       border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
-      brokenAssetClass,
     ]
       .filter(Boolean)
       .join(' '),
+    brokenAssetClass,
+  ]);
+
+  let style = $derived(
+    `width: ${widthStyle}; height: ${heightStyle ?? ''}; filter: ${hidden ? 'grayscale(50%)' : 'none'}; opacity: ${hidden ? '0.5' : '1'};`,
   );
 </script>
 
 {#if errored}
   <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} />
 {:else}
-  <img
-    use:mount
-    onload={setLoaded}
-    onerror={setErrored}
-    style:width={widthStyle}
-    style:height={heightStyle}
-    style:filter={hidden ? 'grayscale(50%)' : 'none'}
-    style:opacity={hidden ? '0.5' : '1'}
-    src={url}
-    alt={loaded || errored ? altText : ''}
-    {title}
-    class={['object-cover', optionalClasses, imageClass]}
-    draggable="false"
-    loading={preload ? 'eager' : 'lazy'}
-  />
+  <div
+    use:imageLoader={{
+      src: url,
+      onLoad: setLoaded,
+      onError: setErrored,
+      imgClass: ['object-cover', imageClass],
+      style,
+      alt: loaded || errored ? altText : '',
+      draggable: false,
+      title,
+      loading: preload ? 'eager' : 'lazy',
+    }}
+  ></div>
 {/if}
 
 {#if hidden}
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 8270646470..e750d4bd77 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -200,8 +200,9 @@
 
 <div
   class={[
-    'focus-visible:outline-none flex overflow-hidden',
+    'group focus-visible:outline-none focus-visible:rounded-lg flex overflow-hidden',
     disabled ? 'bg-gray-300' : 'dark:bg-neutral-700 bg-neutral-200',
+    { 'rounded-xl': selected },
   ]}
   style:width="{width}px"
   style:height="{height}px"
@@ -223,18 +224,10 @@
   bind:this={element}
   data-asset={asset.id}
   data-thumbnail-focus-container
+  data-selected={selected ? true : undefined}
   tabindex={0}
   role="link"
 >
-  <!-- Outline on focus -->
-  <div
-    class={[
-      'pointer-events-none absolute z-1 size-full outline-hidden outline-4 -outline-offset-4 outline-immich-primary',
-      { 'rounded-xl': selected },
-    ]}
-    data-outline
-  ></div>
-
   <div
     class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
     style:width="inherit"
@@ -247,13 +240,81 @@
         { 'rounded-xl': selected },
       ]}
     >
+      <ImageThumbnail
+        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
+        url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
+        altText={$getAltText(asset)}
+        widthStyle="{width}px"
+        heightStyle="{height}px"
+        curve={selected}
+        onComplete={(errored) => ((loaded = true), (thumbError = errored))}
+      />
+      {#if asset.isVideo}
+        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+          <VideoThumbnail
+            class="group-focus-visible:rounded-lg"
+            url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
+            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
+            curve={selected}
+            durationInSeconds={asset.duration ? timeToSeconds(asset.duration) : 0}
+            playbackOnIconHover={!$playVideoThumbnailOnHover}
+          />
+        </div>
+      {:else if asset.isImage && asset.livePhotoVideoId}
+        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+          <VideoThumbnail
+            class="group-focus-visible:rounded-lg"
+            url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
+            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
+            pauseIcon={mdiMotionPauseOutline}
+            playIcon={mdiMotionPlayOutline}
+            showTime={false}
+            curve={selected}
+            playbackOnIconHover={!$playVideoThumbnailOnHover}
+          />
+        </div>
+      {:else if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000') && mouseOver}
+        <!-- GIF -->
+        <div class="absolute top-0 h-full w-full pointer-events-none">
+          <div class="absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%]"></div>
+          <ImageThumbnail
+            class={imageClass}
+            {brokenAssetClass}
+            url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Original, cacheKey: asset.thumbhash })}
+            altText={$getAltText(asset)}
+            widthStyle="{width}px"
+            heightStyle="{height}px"
+            curve={selected}
+          />
+          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+            <span class="pe-2 pt-2">
+              <Icon data-icon-playable-pause icon={mdiMotionPauseOutline} size="24" />
+            </span>
+          </div>
+        </div>
+      {/if}
+
+      {#if (!loaded || thumbError) && asset.thumbhash}
+        <canvas
+          use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
+          data-testid="thumbhash"
+          class="absolute top-0 object-cover group-focus-visible:rounded-lg"
+          style:width="{width}px"
+          style:height="{height}px"
+          class:rounded-xl={selected}
+          draggable="false"
+          out:fade={{ duration: THUMBHASH_FADE_DURATION }}
+        ></canvas>
+      {/if}
+
       <!-- icon overlay -->
       <div>
         <!-- Gradient overlay on hover -->
         {#if !usingMobileDevice && !disabled}
           <div
             class={[
-              'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100',
+              'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:rounded-lg',
               { 'rounded-xl': selected },
             ]}
           ></div>
@@ -261,7 +322,10 @@
 
         <!-- Dimmed support -->
         {#if dimmed && !mouseOver}
-          <div id="a" class={['absolute h-full w-full bg-gray-700/40', { 'rounded-xl': selected }]}></div>
+          <div
+            id="a"
+            class={['absolute h-full w-full bg-gray-700/40 group-focus-visible:rounded-lg', { 'rounded-xl': selected }]}
+          ></div>
         {/if}
 
         <!-- Favorite asset star -->
@@ -329,72 +393,6 @@
         >
         </a>
       {/if}
-
-      <ImageThumbnail
-        class={imageClass}
-        {brokenAssetClass}
-        url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
-        altText={$getAltText(asset)}
-        widthStyle="{width}px"
-        heightStyle="{height}px"
-        curve={selected}
-        onComplete={(errored) => ((loaded = true), (thumbError = errored))}
-      />
-      {#if asset.isVideo}
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <VideoThumbnail
-            url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
-            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
-            curve={selected}
-            durationInSeconds={asset.duration ? timeToSeconds(asset.duration) : 0}
-            playbackOnIconHover={!$playVideoThumbnailOnHover}
-          />
-        </div>
-      {:else if asset.isImage && asset.livePhotoVideoId}
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <VideoThumbnail
-            url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
-            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
-            pauseIcon={mdiMotionPauseOutline}
-            playIcon={mdiMotionPlayOutline}
-            showTime={false}
-            curve={selected}
-            playbackOnIconHover={!$playVideoThumbnailOnHover}
-          />
-        </div>
-      {:else if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000') && mouseOver}
-        <!-- GIF -->
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <div class="absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%]"></div>
-          <ImageThumbnail
-            class={imageClass}
-            {brokenAssetClass}
-            url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Original, cacheKey: asset.thumbhash })}
-            altText={$getAltText(asset)}
-            widthStyle="{width}px"
-            heightStyle="{height}px"
-            curve={selected}
-          />
-          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
-            <span class="pe-2 pt-2">
-              <Icon data-icon-playable-pause icon={mdiMotionPauseOutline} size="24" />
-            </span>
-          </div>
-        </div>
-      {/if}
-
-      {#if (!loaded || thumbError) && asset.thumbhash}
-        <canvas
-          use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
-          data-testid="thumbhash"
-          class="absolute top-0 object-cover"
-          style:width="{width}px"
-          style:height="{height}px"
-          class:rounded-xl={selected}
-          draggable="false"
-          out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-        ></canvas>
-      {/if}
     </div>
 
     {#if selectionCandidate}
@@ -427,11 +425,14 @@
         {/if}
       </button>
     {/if}
+
+    <!-- Outline on focus -->
+    <div
+      class={[
+        'pointer-events-none absolute z-1 size-full outline-immich-primary dark:outline-immich-dark-primary group-focus-visible:rounded-lg group-focus-visible:outline-2 group-focus-visible:-outline-offset-2',
+        { 'rounded-xl': selected },
+      ]}
+      data-outline
+    ></div>
   </div>
 </div>
-
-<style>
-  [data-asset]:focus > [data-outline] {
-    outline-style: solid;
-  }
-</style>
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index 222fa7a8ec..6a9df58a61 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -2,6 +2,7 @@
   import { Icon, LoadingSpinner } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
     url: string;
@@ -12,6 +13,7 @@
     curve?: boolean;
     playIcon?: string;
     pauseIcon?: string;
+    class?: ClassValue;
   }
 
   let {
@@ -23,6 +25,7 @@
     curve = false,
     playIcon = mdiPlayCircleOutline,
     pauseIcon = mdiPauseCircleOutline,
+    class: className,
   }: Props = $props();
 
   let remainingSeconds = $state(durationInSeconds);
@@ -57,7 +60,7 @@
 {#if enablePlayback}
   <video
     bind:this={player}
-    class="h-full w-full object-cover"
+    class={['h-full w-full object-cover', className]}
     class:rounded-xl={curve}
     muted
     autoplay
diff --git a/web/src/lib/managers/ImageManager.svelte.ts b/web/src/lib/managers/ImageManager.svelte.ts
index e75b5bc971..39cd02fd9d 100644
--- a/web/src/lib/managers/ImageManager.svelte.ts
+++ b/web/src/lib/managers/ImageManager.svelte.ts
@@ -4,7 +4,38 @@ import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
 
 type AllAssetMediaSize = AssetMediaSize | 'all';
 
+type AssetLoadState = 'loading' | 'cancelled';
+
 class ImageManager {
+  // track recently canceled assets, so know if an load "error" is due to
+  // cancelation
+  private assetStates = new Map<string, AssetLoadState>();
+  private readonly MAX_TRACKED_ASSETS = 10;
+
+  private trackAction(asset: AssetResponseDto, action: AssetLoadState) {
+    // Remove if exists to reset insertion order
+    this.assetStates.delete(asset.id);
+    this.assetStates.set(asset.id, action);
+
+    // Only keep recent assets (Map maintains insertion order)
+    if (this.assetStates.size > this.MAX_TRACKED_ASSETS) {
+      const firstKey = this.assetStates.keys().next().value!;
+      this.assetStates.delete(firstKey);
+    }
+  }
+
+  isCanceled(asset: AssetResponseDto) {
+    return 'cancelled' === this.assetStates.get(asset.id);
+  }
+
+  trackLoad(asset: AssetResponseDto) {
+    this.trackAction(asset, 'loading');
+  }
+
+  trackCancelled(asset: AssetResponseDto) {
+    this.trackAction(asset, 'cancelled');
+  }
+
   preload(asset: AssetResponseDto | undefined, size: AssetMediaSize = AssetMediaSize.Preview) {
     if (!asset) {
       return;
@@ -15,6 +46,8 @@ class ImageManager {
       return;
     }
 
+    this.trackLoad(asset);
+
     const img = new Image();
     img.src = url;
   }
@@ -24,6 +57,8 @@ class ImageManager {
       return;
     }
 
+    this.trackCancelled(asset);
+
     const sizes = size === 'all' ? Object.values(AssetMediaSize) : [size];
     for (const size of sizes) {
       const url = getAssetMediaUrl({ id: asset.id, size, cacheKey: asset.thumbhash });
@@ -32,12 +67,6 @@ class ImageManager {
       }
     }
   }
-
-  cancelPreloadUrl(url: string | undefined) {
-    if (url) {
-      cancelImageUrl(url);
-    }
-  }
 }
 
 export const imageManager = new ImageManager();
diff --git a/web/src/lib/stores/assets-store.svelte.ts b/web/src/lib/stores/assets-store.svelte.ts
new file mode 100644
index 0000000000..4607f402b4
--- /dev/null
+++ b/web/src/lib/stores/assets-store.svelte.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isSelectingAllAssets = writable(false);
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 3204b35576..e3cdcbe2e3 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -198,13 +198,10 @@ export const getAssetUrl = ({
   sharedLink,
   forceOriginal = false,
 }: {
-  asset: AssetResponseDto | undefined;
+  asset: AssetResponseDto;
   sharedLink?: SharedLinkResponseDto;
   forceOriginal?: boolean;
 }) => {
-  if (!asset) {
-    return;
-  }
   const id = asset.id;
   const cacheKey = asset.thumbhash;
   if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
diff --git a/web/src/lib/utils/adaptive-image-loader.svelte.ts b/web/src/lib/utils/adaptive-image-loader.svelte.ts
new file mode 100644
index 0000000000..8878e62793
--- /dev/null
+++ b/web/src/lib/utils/adaptive-image-loader.svelte.ts
@@ -0,0 +1,241 @@
+import type { LoadImageFunction } from '$lib/actions/image-loader.svelte';
+import { imageManager } from '$lib/managers/ImageManager.svelte';
+import { getAssetMediaUrl, getAssetUrl } from '$lib/utils';
+import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+
+/**
+ * Quality levels for progressive image loading
+ */
+type ImageQuality =
+  | 'basic'
+  | 'loading-thumbnail'
+  | 'thumbnail'
+  | 'loading-preview'
+  | 'preview'
+  | 'loading-original'
+  | 'original';
+
+export interface ImageLoaderState {
+  previewUrl?: string;
+  thumbnailUrl?: string;
+  originalUrl?: string;
+  quality: ImageQuality;
+  hasError: boolean;
+  thumbnailImage: ImageStatus;
+  previewImage: ImageStatus;
+  originalImage: ImageStatus;
+}
+enum ImageStatus {
+  Unloaded = 'Unloaded',
+  Success = 'Success',
+  Error = 'Error',
+}
+
+/**
+ * Coordinates adaptive loading of a single asset image:
+ * thumbhash → thumbnail → preview → original (on zoom)
+ *
+ */
+export class AdaptiveImageLoader {
+  private internalState = $state<ImageLoaderState>({
+    quality: 'basic',
+    hasError: false,
+    thumbnailImage: ImageStatus.Unloaded,
+    previewImage: ImageStatus.Unloaded,
+    originalImage: ImageStatus.Unloaded,
+  });
+
+  private readonly currentZoomFn?: () => number;
+  private readonly imageLoader?: LoadImageFunction;
+  private readonly destroyFunctions: (() => void)[] = [];
+  readonly thumbnailUrl: string;
+  readonly previewUrl: string;
+  readonly originalUrl: string;
+  readonly asset: AssetResponseDto;
+  readonly callbacks?: {
+    currentZoomFn: () => number;
+    onImageReady?: () => void;
+    onError?: () => void;
+  };
+  destroyed = false;
+
+  constructor(
+    asset: AssetResponseDto,
+    sharedLink: SharedLinkResponseDto | undefined,
+    callbacks?: {
+      currentZoomFn: () => number;
+      onImageReady?: () => void;
+      onError?: () => void;
+    },
+    imageLoader?: LoadImageFunction,
+  ) {
+    imageManager.trackLoad(asset);
+    this.asset = asset;
+    this.callbacks = callbacks;
+    this.imageLoader = imageLoader;
+    this.thumbnailUrl = getAssetMediaUrl({ id: asset.id, cacheKey: asset.thumbhash, size: AssetMediaSize.Thumbnail });
+    this.previewUrl = getAssetUrl({ asset, sharedLink });
+    this.originalUrl = getAssetUrl({ asset, sharedLink, forceOriginal: true });
+    this.internalState.thumbnailUrl = this.thumbnailUrl;
+  }
+
+  start() {
+    if (!this.imageLoader) {
+      throw new Error('Start requires imageLoader to be specified');
+    }
+    this.destroyFunctions.push(
+      this.imageLoader(
+        this.thumbnailUrl,
+        {},
+        () => this.onThumbnailLoad(),
+        () => this.onThumbnailError(),
+        () => this.onThumbnailStart(),
+      ),
+    );
+  }
+
+  get state(): ImageLoaderState {
+    return this.internalState;
+  }
+
+  onThumbnailStart() {
+    if (this.destroyed) {
+      return;
+    }
+    this.internalState.quality = 'loading-thumbnail';
+  }
+
+  onThumbnailLoad() {
+    if (this.destroyed) {
+      return;
+    }
+    this.internalState.quality = 'thumbnail';
+    this.internalState.thumbnailImage = ImageStatus.Success;
+    this.callbacks?.onImageReady?.();
+    this.triggerMainImage();
+  }
+
+  onThumbnailError() {
+    if (this.destroyed) {
+      return;
+    }
+    this.internalState.hasError = true;
+    this.internalState.thumbnailUrl = undefined;
+    this.internalState.thumbnailImage = ImageStatus.Error;
+    this.callbacks?.onError?.();
+    this.triggerMainImage();
+  }
+
+  triggerMainImage() {
+    const wantsOriginal = (this.currentZoomFn?.() ?? 1) > 1;
+    return wantsOriginal ? this.triggerOriginal() : this.triggerPreview();
+  }
+
+  triggerPreview() {
+    if (!this.previewUrl) {
+      // no preview, try original?
+      this.triggerOriginal();
+      return false;
+    }
+    this.internalState.hasError = false;
+    this.internalState.previewUrl = this.previewUrl;
+    if (this.imageLoader) {
+      this.destroyFunctions.push(
+        this.imageLoader(
+          this.previewUrl,
+          {},
+          () => this.onPreviewLoad(),
+          () => this.onPreviewError(),
+          () => this.onPreviewStart(),
+        ),
+      );
+    }
+  }
+
+  onPreviewStart() {
+    if (this.destroyed) {
+      return;
+    }
+    this.internalState.quality = 'loading-preview';
+  }
+
+  onPreviewLoad() {
+    if (this.destroyed) {
+      return;
+    }
+    this.internalState.quality = 'preview';
+    this.internalState.previewImage = ImageStatus.Success;
+    this.callbacks?.onImageReady?.();
+  }
+
+  onPreviewError() {
+    if (this.destroyed || imageManager.isCanceled(this.asset)) {
+      return;
+    }
+
+    this.internalState.hasError = true;
+    this.internalState.previewImage = ImageStatus.Error;
+    this.internalState.previewUrl = undefined;
+    this.callbacks?.onError?.();
+    this.triggerOriginal();
+  }
+
+  triggerOriginal() {
+    if (!this.originalUrl) {
+      return false;
+    }
+    this.internalState.hasError = false;
+
+    this.internalState.originalUrl = this.originalUrl;
+
+    if (this.imageLoader) {
+      this.destroyFunctions.push(
+        this.imageLoader(
+          this.originalUrl,
+          {},
+          () => this.onOriginalLoad(),
+          () => this.onOriginalError(),
+          () => this.onOriginalStart(),
+        ),
+      );
+    }
+  }
+
+  onOriginalStart() {
+    if (this.destroyed || imageManager.isCanceled(this.asset)) {
+      return;
+    }
+    this.internalState.quality = 'loading-original';
+  }
+
+  onOriginalLoad() {
+    if (this.destroyed || imageManager.isCanceled(this.asset)) {
+      return;
+    }
+    this.internalState.quality = 'original';
+    this.internalState.originalImage = ImageStatus.Success;
+    this.callbacks?.onImageReady?.();
+  }
+
+  onOriginalError() {
+    if (this.destroyed || imageManager.isCanceled(this.asset)) {
+      return;
+    }
+
+    this.internalState.hasError = true;
+    this.internalState.originalImage = ImageStatus.Error;
+    this.internalState.originalUrl = undefined;
+    this.callbacks?.onError?.();
+  }
+
+  destroy(): void {
+    this.destroyed = true;
+    if (this.imageLoader) {
+      for (const destroy of this.destroyFunctions) {
+        destroy();
+      }
+      return;
+    }
+    imageManager.cancel(this.asset);
+  }
+}
diff --git a/web/src/lib/utils/layout-utils.ts b/web/src/lib/utils/layout-utils.ts
index 3533851ddf..1864933a0b 100644
--- a/web/src/lib/utils/layout-utils.ts
+++ b/web/src/lib/utils/layout-utils.ts
@@ -129,3 +129,19 @@ export type CommonPosition = {
   width: number;
   height: number;
 };
+
+// Scales dimensions to fit within a container (like object-fit: contain)
+export const scaleToFit = (
+  dimensions: { width: number; height: number },
+  container: { width: number; height: number },
+) => {
+  const scaleX = container.width / dimensions.width;
+  const scaleY = container.height / dimensions.height;
+
+  const scale = Math.min(scaleX, scaleY);
+
+  return {
+    width: dimensions.width * scale,
+    height: dimensions.height * scale,
+  };
+};