How to Configure Strict CSS View-Transition-Old and New Image-Set Resolutions in Google Chrome

Modern high-DPI viewports—ranging from Apple Retina screens to 4K desktop displays—require crisp resolution handling across visual state transitions. When coordinating photographic transitions with Chromium’s native View Transition API, binding CSS image-set() properties directly to ::view-transition-old and ::view-transition-new ensures hardware-accelerated high-resolution rendering without wasteful over-fetching on mobile network connections.

High-DPI Snapshot Mechanics in Chromium

By default, Chromium captures pseudo-element snapshots at the device pixel ratio (DPR) of the current monitor. However, when switching between high-resolution art-directed image states, supplying explicit image-set() source candidates inside the transition stylesheet allows Chromium to allocate appropriately scaled texture buffers.

Authoring Strict Image-Set Transition Styles

Configure complementary high-DPI resolution transitions in your stylesheet:

::view-transition-old(hero-photo) {
  animation: 340ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both photoFadeOut;
  content: -webkit-image-set(
    url("/images/hero-1x.avif") 1x,
    url("/images/hero-2x.avif") 2x
  );
  content: image-set(
    url("/images/hero-1x.avif") 1x,
    url("/images/hero-2x.avif") 2x
  );
}

::view-transition-new(hero-photo) {
  animation: 340ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both photoFadeIn;
  content: -webkit-image-set(
    url("/images/hero-next-1x.avif") 1x,
    url("/images/hero-next-2x.avif") 2x
  );
  content: image-set(
    url("/images/hero-next-1x.avif") 1x,
    url("/images/hero-next-2x.avif") 2x
  );
}

@keyframes photoFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes photoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Texture Memory and Format Optimisation

Leverage AVIF and WebP inside the image-set() declaration to reduce GPU memory footprint while maintaining high dynamic range color fidelity.

Auditing in Chrome DevTools

Open Chrome DevTools > Network and filter by Img to verify that only the matching DPR asset is downloaded during navigation.