diff --git a/client/src/components/tapestry-elements/item-toolbar/change-thumbnail-button/index.tsx b/client/src/components/tapestry-elements/item-toolbar/change-thumbnail-button/index.tsx
index c8d77ac..c0036bd 100644
--- a/client/src/components/tapestry-elements/item-toolbar/change-thumbnail-button/index.tsx
+++ b/client/src/components/tapestry-elements/item-toolbar/change-thumbnail-button/index.tsx
@@ -4,7 +4,6 @@ import { SimpleModal } from 'tapestry-core-client/src/components/lib/modal/index
 import styles from './styles.module.css'
 import { Icon } from 'tapestry-core-client/src/components/lib/icon/index'
 import { Text } from 'tapestry-core-client/src/components/lib/text/index'
-import { hasThumbnail } from 'tapestry-core/src/utils'
 import { FilePicker } from 'tapestry-core-client/src/components/lib/file-picker/index'
 import { CSSProperties, useState } from 'react'
 import { DropArea } from 'tapestry-core-client/src/components/lib/drop-area'
@@ -17,6 +16,7 @@ import { itemSizes, uploadAsset } from '../../../../model/data/utils'
 import { LoadingSpinner } from 'tapestry-core-client/src/components/lib/loading-spinner/index'
 import { compressImage, getImageSize } from '../../../../lib/media'
 import { Size } from 'tapestry-core/src/data-format/schemas/common'
+import { pick } from 'lodash-es'
 import { aspectRatio } from 'tapestry-core/src/lib/geometry'
 
 interface NoCustomThumbnailOptionProps {
@@ -55,25 +55,14 @@ export function ChangeThumbnailButton({ onClick, className }: ChangeThumbnailBut
 }
 
 interface ItemThumbnailProps {
-  item: ItemDto
+  thumbnail?: string | null
   className?: string
-  useAutoGenerated: boolean
   customBlobUrl: string | null
   style?: CSSProperties
 }
 
-function ItemThumbnail({
-  item,
-  className,
-  useAutoGenerated,
-  customBlobUrl,
-  style,
-}: ItemThumbnailProps) {
-  const autoThumbnail = hasThumbnail(item) ? item.thumbnail.source : null
-
-  const src = useAutoGenerated
-    ? autoThumbnail
-    : (customBlobUrl ?? item.customThumbnail ?? autoThumbnail)
+function ItemThumbnail({ thumbnail, className, customBlobUrl, style }: ItemThumbnailProps) {
+  const src = customBlobUrl ?? thumbnail
 
   return src ? <img src={src} className={className} style={style} alt="Thumbnail preview" /> : null
 }
@@ -89,6 +78,15 @@ async function getNewItemSize(item: ItemDto, thumbnail?: File) {
   }
 }
 
+async function getImageDimensions(file: File): Promise<Size> {
+  const objectUrl = URL.createObjectURL(file)
+  const img = new Image()
+  img.src = objectUrl
+  await img.decode()
+  URL.revokeObjectURL(objectUrl)
+  return pick(img, 'width', 'height')
+}
+
 interface ChangeThumbnailDialogProps {
   onClose: () => unknown
   item: ItemDto
@@ -96,27 +94,30 @@ interface ChangeThumbnailDialogProps {
 
 export function ChangeThumbnailDialog({ onClose, item }: ChangeThumbnailDialogProps) {
   const [useAutoGenerated, setUseAutoGenerated] = useState(false)
-  const [selectedFile, setSelectedFile] = useState<File>()
+  const [selectedFile, setSelectedFile] = useState<{ file: File; size: Size }>()
   const [customThumbnailItemSize, setCustomThumbnailItemSize] = useState<Size>()
-  const blobUrl = useMediaSource(selectedFile ?? item.customThumbnail ?? null)
+  const customThumbnail = item.thumbnail?.renditions.find((r) => !r.isAutoGenerated)
+  const thumbnail = customThumbnail ?? item.thumbnail?.renditions.find((r) => r.isPrimary)
+  const blobUrl = useMediaSource(selectedFile?.file ?? customThumbnail?.source ?? null)
 
   const onNewFile = async (file: File) => {
     const newItemSize = await getNewItemSize(item, file)
     setCustomThumbnailItemSize(newItemSize)
     const compressed = await compressImage(file, newItemSize)
+    const size = await getImageDimensions(compressed)
     setUseAutoGenerated(false)
-    setSelectedFile(compressed)
+    setSelectedFile({ file: compressed, size })
   }
 
   const { trigger: save, loading } = useAsyncAction(async ({ signal }) => {
     const newSize = useAutoGenerated ? await getNewItemSize(item) : customThumbnailItemSize
     if (useAutoGenerated) {
-      if (item.customThumbnail) {
+      if (customThumbnail) {
         await resource('items').update(
           { id: item.id },
           {
             type: item.type,
-            customThumbnail: null,
+            thumbnail: null,
             ...(newSize ? { size: newSize } : {}),
           },
           undefined,
@@ -128,7 +129,7 @@ export function ChangeThumbnailDialog({ onClose, item }: ChangeThumbnailDialogPr
     }
     if (selectedFile) {
       const key = await uploadAsset(
-        selectedFile,
+        selectedFile.file,
         {
           tapestryId: item.tapestryId,
           type: 'tapestry-asset',
@@ -139,7 +140,10 @@ export function ChangeThumbnailDialog({ onClose, item }: ChangeThumbnailDialogPr
         { id: item.id },
         {
           type: item.type,
-          customThumbnail: key,
+          thumbnail: {
+            source: key,
+            size: selectedFile.size,
+          },
           ...(newSize ? { size: newSize } : {}),
         },
         undefined,
@@ -158,8 +162,7 @@ export function ChangeThumbnailDialog({ onClose, item }: ChangeThumbnailDialogPr
       <div className={styles.root}>
         <div className={styles.previewContainer}>
           <ItemThumbnail
-            item={item}
-            useAutoGenerated={useAutoGenerated}
+            thumbnail={thumbnail?.source}
             customBlobUrl={blobUrl}
             className={styles.previewImage}
             style={{ aspectRatio: aspectRatio(customThumbnailItemSize ?? item.size) }}
@@ -182,9 +185,7 @@ export function ChangeThumbnailDialog({ onClose, item }: ChangeThumbnailDialogPr
             variant="clear"
             onClick={() => setUseAutoGenerated(true)}
           >
-            {hasThumbnail(item) ? (
-              <img className={styles.fitImage} src={item.thumbnail.source} />
-            ) : null}
+            {thumbnail ? <img className={styles.fitImage} src={thumbnail.source} /> : null}
             <div className={styles.overlayContainer}>
               <NoCustomThumbnailOption item={item} />
             </div>
diff --git a/client/src/components/tapestry-elements/items/tapestry-item/index.tsx b/client/src/components/tapestry-elements/items/tapestry-item/index.tsx
index 7f7c269..97f128d 100644
--- a/client/src/components/tapestry-elements/items/tapestry-item/index.tsx
+++ b/client/src/components/tapestry-elements/items/tapestry-item/index.tsx
@@ -3,11 +3,8 @@ import { ReactNode } from 'react'
 import { useObservable } from 'tapestry-core-client/src/components/lib/hooks/use-observable'
 import { TapestryItem as BaseTapestryItem } from 'tapestry-core-client/src/components/tapestry/items/tapestry-item'
 import { THEMES } from 'tapestry-core-client/src/theme/themes'
-import {
-  computeRestrictedScale,
-  positionAtViewport,
-} from 'tapestry-core-client/src/view-model/utils'
-import { ORIGIN, Rectangle, scaleSize, Size } from 'tapestry-core/src/lib/geometry'
+import { computeRestrictedScale } from 'tapestry-core-client/src/view-model/utils'
+import { Size } from 'tapestry-core/src/lib/geometry'
 import { idMapToArray } from 'tapestry-core/src/utils'
 import { useDispatch, useTapestryData } from '../../../../pages/tapestry/tapestry-providers'
 import {
@@ -34,20 +31,12 @@ export function TapestryItem({ id, children, halo }: TapestryItemProps) {
     interactiveElement,
     interactionMode,
     theme: themeName,
-    viewport,
   } = useTapestryData(['interactiveElement', 'interactionMode', 'theme', 'viewport'])
   const dispatch = useDispatch()
   const isEditMode = interactionMode === 'edit'
 
   const isContentInteractive = id === interactiveElement?.modelId
 
-  const viewportRect = new Rectangle(
-    positionAtViewport(viewport, ORIGIN),
-    scaleSize(viewport.size, 1 / viewport.transform.scale),
-  )
-
-  const isVisible = viewportRect.intersects(new Rectangle(dto))
-
   // @ts-expect-error TS wants us to check for a media item
   const item = useObservable(itemUpload).find((i) => i.objectUrl === dto.source)
 
@@ -59,7 +48,6 @@ export function TapestryItem({ id, children, halo }: TapestryItemProps) {
         root: styles.root,
         hitArea: styles.hitArea,
       }}
-      style={!isVisible ? { display: 'none' } : undefined}
       title={
         <>
           <span>{dto.title}</span>
diff --git a/client/src/components/tapestry-elements/items/webpage/index.tsx b/client/src/components/tapestry-elements/items/webpage/index.tsx
index e7779c6..7638925 100644
--- a/client/src/components/tapestry-elements/items/webpage/index.tsx
+++ b/client/src/components/tapestry-elements/items/webpage/index.tsx
@@ -10,7 +10,6 @@ import { SimpleMenuItem } from 'tapestry-core-client/src/components/lib/toolbar'
 import {
   ALLOWED_ORIGINS,
   getPlaybackInterval,
-  WebFrameProps,
   WebpageItemViewer,
   WebpageItemViewerApi,
 } from 'tapestry-core-client/src/components/tapestry/items/webpage/viewer'
@@ -28,12 +27,16 @@ import { PlayableShareMenu, shareMenu } from '../../item-toolbar/share-menu'
 import { useItemToolbar } from '../../item-toolbar/use-item-toolbar'
 import { TapestryItem } from '../tapestry-item'
 import styles from './styles.module.css'
+import {
+  WebFrame,
+  WebFrameSwitchProps,
+} from 'tapestry-core-client/src/components/tapestry/items/webpage/web-frame'
 
 const checkedSources = new Map<string, boolean>()
 
 const PLAYABLE_WEBPAGE_TYPES: WebpageType[] = ['iaAudio', 'iaVideo', 'vimeo', 'youtube']
 
-function Webpage({ src, onLoad, ...props }: WebFrameProps) {
+function Webpage({ src, onLoad, ...props }: WebFrameSwitchProps) {
   const onLoadRef = usePropRef(onLoad)
   const interactionMode = useTapestryData('interactionMode')
   const checkCanFrame = interactionMode === 'edit'
@@ -70,7 +73,7 @@ function Webpage({ src, onLoad, ...props }: WebFrameProps) {
   )
 
   return canFrame ? (
-    <iframe src={src} onLoad={onLoad} {...props} />
+    <WebFrame src={src} onLoad={onLoad} {...props} />
   ) : canFrame === false ? (
     <div className={styles.error}>
       <Icon icon="sentiment_very_dissatisfied" />
diff --git a/client/src/components/tapestry-elements/rel/index.tsx b/client/src/components/tapestry-elements/rel/index.tsx
index a73aa2d..5302cfd 100644
--- a/client/src/components/tapestry-elements/rel/index.tsx
+++ b/client/src/components/tapestry-elements/rel/index.tsx
@@ -21,13 +21,12 @@ export const Rel = memo(({ id }: RelProps) => {
   const {
     interactiveElement,
     items,
-    viewport,
     theme: themeName,
-  } = useTapestryData(['interactiveElement', 'items', 'theme', 'viewport'])
+  } = useTapestryData(['interactiveElement', 'items', 'theme'])
   const theme = THEMES[themeName]
   const isActive = rel.dto.id === interactiveElement?.modelId
 
-  const curve = computeRelCurvePoints(rel, viewport, items)
+  const curve = computeRelCurvePoints(rel, items)
   const bounds = getBounds(rel.dto, items)
 
   return (
diff --git a/client/src/model/data/utils.ts b/client/src/model/data/utils.ts
index fa37199..80bce4e 100644
--- a/client/src/model/data/utils.ts
+++ b/client/src/model/data/utils.ts
@@ -35,7 +35,7 @@ import {
   MediaItemSource,
 } from '../../lib/media'
 import { resource } from '../../services/rest-resources'
-import { isFunction } from 'lodash-es'
+import { isFunction, omit } from 'lodash-es'
 import mime from 'mime'
 import axios, { AxiosProgressEvent } from 'axios'
 import { arrayToIdMap, fileExtension, isMediaItem } from 'tapestry-core/src/utils'
@@ -160,6 +160,7 @@ export function fromTapestryDto(
   userAccess: UserAccess,
   commentThreads: CommentThreadsDto,
   presentationSteps: PresentationStepDto[],
+  deoptimize: boolean,
 ): EditableTapestryViewModel {
   const presentationStepViewModels = presentationSteps.map((dto) => ({ dto }))
 
@@ -175,6 +176,7 @@ export function fromTapestryDto(
   )
   const editableTapestryViewModel: EditableTapestryViewModel = {
     ...baseViewModel,
+    disableOptimizations: deoptimize,
     items: Object.fromEntries(tapestry.items?.map((item) => [item.id, { dto: item }]) ?? []),
     rels: Object.fromEntries(tapestry.rels?.map((rel) => [rel.id, { dto: rel }]) ?? []),
     groups: Object.fromEntries(tapestry.groups?.map((group) => [group.id, { dto: group }]) ?? []),
@@ -315,8 +317,17 @@ export async function createMediaItem<T extends MediaItemType>(
 // 2) Implement some sort of ref counting to S3 resource. This can be done only in the context of a tapestry
 //    or maybe even globally. This way we can save on some storage space, but it will introduce additional
 //    complexity
-export function duplicateItem<T extends ItemDto>(item: T): ItemCreateDto {
-  return structuredClone(item)
+export function duplicateItem<I extends ItemDto>(item: I): ItemCreateDto {
+  // We clone items without thumbnails for now, since we don't have a mechanism to create thumbnails during item
+  // creation. This is only a problem if the item has a custom thumbnail - it will be cloned without it. In this
+  // case, however, the cloning procedure would be more complicated since the thumbnail asset itself needs to be
+  // copied first and attached to the cloned item afterwards.
+  const createDto = omit(item, ['id', 'createdAt', 'updatedAt', 'tapestry', 'thumbnail'])
+  // XXX: I can't convince TypeScript that the type is correct at this point. In fact, it would be more appropriate
+  // if the return type is some kind of mapped type that returns the correct CreateDto that corresponds to the given
+  // item type I. However, I tried this approach and it also didn't work. I am force-casting it for now and hopefully
+  // we'll figure it out at some point.
+  return structuredClone(createDto) as unknown as ItemCreateDto
 }
 
 export async function getMediaType(source: MediaItemSource): Promise<string | null> {
diff --git a/client/src/pages/tapestry/tapestry-loader.tsx b/client/src/pages/tapestry/tapestry-loader.tsx
index 9a141bb..21c1567 100644
--- a/client/src/pages/tapestry/tapestry-loader.tsx
+++ b/client/src/pages/tapestry/tapestry-loader.tsx
@@ -1,6 +1,6 @@
 import { pick } from 'lodash-es'
 import { useEffect, useMemo } from 'react'
-import { Navigate, useNavigate } from 'react-router'
+import { Navigate, useNavigate, useSearchParams } from 'react-router'
 import { useAsync } from 'tapestry-core-client/src/components/lib/hooks/use-async'
 import { useObservable } from 'tapestry-core-client/src/components/lib/hooks/use-observable'
 import { TapestryConfig, TapestryConfigContext } from 'tapestry-core-client/src/components/tapestry'
@@ -43,6 +43,7 @@ function getErrorMessage(error: unknown) {
       return 'Tapestry not found'
     }
   }
+  console.error(error)
   return 'Error loading tapestry'
 }
 
@@ -68,6 +69,7 @@ export interface TapestryLoaderProps {
 export function TapestryLoader({ id, mode }: TapestryLoaderProps) {
   const navigate = useNavigate()
   const tapestryViewPath = useTapestryPath('view')
+  const [searchParams] = useSearchParams()
   const { user } = useObservable(auth)
 
   const config = useMemo(
@@ -118,7 +120,8 @@ export function TapestryLoader({ id, mode }: TapestryLoaderProps) {
         void navigate(tapestryViewPath)
       }
 
-      const dataSync = new TapestryDataSync(id, canEdit ? mode : 'view', userAccess)
+      const deopt = !!searchParams.get('deopt')
+      const dataSync = new TapestryDataSync(id, canEdit ? mode : 'view', userAccess, deopt)
       onCleanup(() => dataSync.dispose())
 
       await dataSync.init(signal)
diff --git a/client/src/pages/tapestry/tapestry.tsx b/client/src/pages/tapestry/tapestry.tsx
index 5c2ed96..6c80942 100644
--- a/client/src/pages/tapestry/tapestry.tsx
+++ b/client/src/pages/tapestry/tapestry.tsx
@@ -71,7 +71,7 @@ export function Tapestry() {
   const store = useTapestryStore()
   const tapestryDataSyncCommandsRef = usePropRef(useTapestryDataSyncCommands())
   useStageInit(sceneRef, {
-    gestureDectorOptions: { scrollGesture: 'pan', dragToPan: store.get('pointerMode') === 'pan' },
+    gestureDetectorOptions: { scrollGesture: 'pan', dragToPan: store.get('pointerMode') === 'pan' },
     createPixiApps: async () => {
       const overlay = new Color(THEMES[store.get('theme')].color('overlay'))
       return [
diff --git a/client/src/pages/tapestry/view-model/tapestry-data-sync.ts b/client/src/pages/tapestry/view-model/tapestry-data-sync.ts
index 0fbe1c8..d8f1a84 100644
--- a/client/src/pages/tapestry/view-model/tapestry-data-sync.ts
+++ b/client/src/pages/tapestry/view-model/tapestry-data-sync.ts
@@ -96,6 +96,7 @@ export class TapestryDataSync {
     private tapestryId: string,
     private initialMode: InteractionMode,
     private userAccess: UserAccess,
+    private deoptimize: boolean,
   ) {
     this.socketManager = new SocketManager(tapestryId)
     // The conversion is made because TS forbids more generic add/remove event listener functions
@@ -145,6 +146,7 @@ export class TapestryDataSync {
       this.userAccess,
       commentThreads,
       idMapToArray(this.tapestryRepo.value.presentationSteps),
+      this.deoptimize,
     )
     this._store = new Store(tapestryViewModel, [
       {
diff --git a/client/src/services/tapestry-exporter.ts b/client/src/services/tapestry-exporter.ts
index 77db671..82ca297 100644
--- a/client/src/services/tapestry-exporter.ts
+++ b/client/src/services/tapestry-exporter.ts
@@ -7,10 +7,11 @@ import {
 } from 'tapestry-core/src/data-format/export'
 import { BlobWriter, TextReader, ZipWriter, BlobReader, Reader } from '@zip.js/zip.js'
 import { createDraft, finishDraft } from 'immer'
-import { fileExtension, hasThumbnail, isMediaItem } from 'tapestry-core/src/utils'
+import { fileExtension, isMediaItem } from 'tapestry-core/src/utils'
 import axios, { AxiosError } from 'axios'
 import { sumBy } from 'lodash-es'
 import { listAll, resource } from './rest-resources'
+import { generateItemThumbnailRenditionName } from 'tapestry-shared/src/utils'
 
 const FILE_PATH_HEADER = 'File-Path-Header'
 
@@ -75,7 +76,7 @@ export class TapestryExporter {
     try {
       const tapestry = await resource('tapestries').read(
         { id: this.tapestryId },
-        { include: ['items', 'rels', 'groups'] },
+        { include: ['items.thumbnail.renditions', 'rels', 'groups'] },
         { signal: this.killSwitch.signal },
       )
       const presentation = await listAll(
@@ -106,18 +107,14 @@ export class TapestryExporter {
           const filePath = addToDownloads(item.source, item.id, 'items/')
           item.source = `${FILE_PREFIX}${filePath}`
         }
-        if (hasThumbnail(item)) {
-          const filePath = addToDownloads(item.thumbnail.source, `${item.id}-thumbnail`, 'items/')
-          item.thumbnail.source = `${FILE_PREFIX}${filePath}`
-        }
-        if (item.customThumbnail) {
+        item.thumbnail?.renditions.forEach((rendition) => {
           const filePath = addToDownloads(
-            item.customThumbnail,
-            `${item.id}-custom-thumbnail`,
+            rendition.source,
+            generateItemThumbnailRenditionName(item.id, rendition),
             'items/',
           )
-          item.customThumbnail = `${FILE_PREFIX}${filePath}`
-        }
+          rendition.source = `${FILE_PREFIX}${filePath}`
+        })
         // This needs to be done after the call to isMediaItem, since otherwise the zod parsing will fail
         // @ts-expect-error removing to comply with export schema
         delete item.tapestryId
@@ -191,18 +188,13 @@ export class TapestryExporter {
                 buffers.push({ blob: new Blob([]), path: filePath })
                 break
               }
-              // @ts-expect-error TS wants to check if the item has a thumbnail
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-              if (i.thumbnail?.source === prefixedPath) {
-                // @ts-expect-error see above
-                i.thumbnail = undefined
-                hasRecovered = true
-                break
-              }
-              if (i.customThumbnail === prefixedPath) {
-                i.customThumbnail = undefined
+              const idx = i.thumbnail?.renditions.findIndex((r) => r.source === prefixedPath) ?? -1
+              if (idx >= 0) {
+                i.thumbnail!.renditions.splice(idx, 1)
+                if (i.thumbnail!.renditions.length === 0) {
+                  delete i.thumbnail
+                }
                 hasRecovered = true
-                break
               }
             }
             if (hasRecovered) {
diff --git a/client/src/stage/controller/index.ts b/client/src/stage/controller/index.ts
index 69dc653..ef72aa4 100644
--- a/client/src/stage/controller/index.ts
+++ b/client/src/stage/controller/index.ts
@@ -12,6 +12,7 @@ import { TapestryLifecycleController } from 'tapestry-core-client/src/stage/cont
 import { TapestryStage } from 'tapestry-core-client/src/stage'
 import { ViewportController } from 'tapestry-core-client/src/stage/controller/viewport-controller'
 import { EditorItemController } from './editor-item-controller'
+import { ItemThumbnailController } from 'tapestry-core-client/src/stage/controller/item-thumbnail-controller'
 
 export class EditorLifecycleController extends TapestryLifecycleController<
   EditableTapestryViewModel,
@@ -24,6 +25,7 @@ export class EditorLifecycleController extends TapestryLifecycleController<
   ) {
     super(store, stage, {
       global: [
+        new ItemThumbnailController(store.as('base')),
         new ViewportController(store.as('base'), stage),
         new EditorTapestryRenderer(store, stage),
       ],
diff --git a/client/src/stage/controller/item-resize-manager.ts b/client/src/stage/controller/item-resize-manager.ts
index 9c4f878..0b53784 100644
--- a/client/src/stage/controller/item-resize-manager.ts
+++ b/client/src/stage/controller/item-resize-manager.ts
@@ -40,7 +40,14 @@ import { MAX_ITEM_SIZE, MIN_ITEM_SIZE } from '../../lib/media'
 export type ResizeTarget = HoveredItem | HoveredMultiselection
 
 const maxSizeByType: Partial<Record<ItemType, Size>> = {
-  text: { height: Infinity, width: Infinity },
+  // XXX: We can't afford to have huge items, since visualizing them becomes unwieldy. Mobile Safari can't handle
+  // rendering and transforming large number of DOM elements so we can't depend on the browser handling it. We
+  // need to generate visual data on the backend if we want to support mobile platforms. Capturing a decent
+  // snapshot of a 4000x4000 px text element is no easy task. I've left this increased limit here (larger than
+  // the default 2000x2000 px for other items) for backward compatibility but we need to reconsider it. Huge walls
+  // of text are not the best user experience and if there are other uses of huge text elements we must identify
+  // them and figure out other creative ways to handle them.
+  text: { height: 4000, width: 4000 },
 }
 
 export interface ResizeOptions {
diff --git a/client/src/stage/data-transfer-handler.ts b/client/src/stage/data-transfer-handler.ts
index 211a088..ce3a995 100644
--- a/client/src/stage/data-transfer-handler.ts
+++ b/client/src/stage/data-transfer-handler.ts
@@ -119,7 +119,7 @@ export async function parseStringTransferData(
 }
 
 function sanitizeForCopy(item: ItemDto): Omit<ItemCreateDto, 'tapestryId'> {
-  return omit(item, 'id', 'createdAt', 'updatedAt', 'tapestryId', 'groupId')
+  return omit(item, 'id', 'createdAt', 'updatedAt', 'tapestryId', 'groupId', 'thumbnail')
 }
 
 export async function dataTransferToFiles(transfer: DataTransfer) {
diff --git a/client/src/stage/renderer/index.ts b/client/src/stage/renderer/index.ts
index 4b30d3b..709801f 100644
--- a/client/src/stage/renderer/index.ts
+++ b/client/src/stage/renderer/index.ts
@@ -7,10 +7,10 @@ import { Graphics, Rectangle as PixiRectangle, TilingSprite } from 'pixi.js'
 import { neg, ORIGIN, translate } from 'tapestry-core/src/lib/geometry'
 import { ThemeName } from 'tapestry-core-client/src/theme/themes'
 import { isEqual } from 'lodash-es'
-import { ItemRenderer } from './item-renderer'
+import { EditorItemRenderer } from './item-renderer'
 import { TapestryRenderer } from 'tapestry-core-client/src/stage/renderer'
 import { TapestryStage } from 'tapestry-core-client/src/stage'
-import { isRelViewModel } from 'tapestry-core-client/src/view-model/utils'
+import { isItemViewModel, isRelViewModel } from 'tapestry-core-client/src/view-model/utils'
 import {
   isHoveredElement,
   isHoveredGroup,
@@ -18,6 +18,8 @@ import {
 } from 'tapestry-core-client/src/stage/utils'
 import { idMapToArray } from 'tapestry-core/src/utils'
 import { EditorRelRenderer } from './rel-renderer'
+import { GroupBackgroundRenderer } from 'tapestry-core-client/src/stage/renderer/group-background-renderer'
+import { Selection, TapestryElementRef } from 'tapestry-core-client/src/view-model'
 
 function getResizeCursor({ top, right, bottom, left }: DirectionMask) {
   if ((top && right) || (bottom && left)) {
@@ -68,6 +70,17 @@ export class EditorTapestryRenderer extends TapestryRenderer<EditableTapestryEle
     this.renderViewModel(this.editorStore.get('newRelPreview'))
   }
 
+  protected isSelected(
+    viewModel: EditableTapestryElementViewModel,
+    selection?: Selection,
+    interactiveElement?: TapestryElementRef | null,
+  ): boolean | '' | null | undefined {
+    return (
+      super.isSelected(viewModel, selection, interactiveElement) ||
+      (isRelViewModel(viewModel) && !!viewModel.dragState)
+    )
+  }
+
   protected getRenderedTapestryElementIds() {
     const renderIds = super.getRenderedTapestryElementIds()
     const newRelPreview = this.editorStore.get('newRelPreview')
@@ -92,7 +105,7 @@ export class EditorTapestryRenderer extends TapestryRenderer<EditableTapestryEle
     }
 
     if (!grid) {
-      grid = new TilingSprite({ label: 'grid' })
+      grid = new TilingSprite({ label: 'grid', eventMode: 'none' })
       this.stage.pixi.tapestry.stage.addChildAt(grid, 0)
     }
 
@@ -169,6 +182,10 @@ export class EditorTapestryRenderer extends TapestryRenderer<EditableTapestryEle
       return new EditorRelRenderer(this.editorStore, this.stage, model)
     }
 
-    return new ItemRenderer(this.editorStore, this.stage, model)
+    if (isItemViewModel(model)) {
+      return new EditorItemRenderer(this.editorStore, this.stage, model)
+    }
+
+    return new GroupBackgroundRenderer(this.editorStore.as('base'), this.stage, model)
   }
 }
diff --git a/client/src/stage/renderer/item-renderer.ts b/client/src/stage/renderer/item-renderer.ts
index d80b158..4842657 100644
--- a/client/src/stage/renderer/item-renderer.ts
+++ b/client/src/stage/renderer/item-renderer.ts
@@ -1,14 +1,17 @@
 import { Graphics } from 'pixi.js'
 import { THEMES } from 'tapestry-core-client/src/theme/themes'
 import { EditableItemViewModel, TapestryEditorStore } from '../../pages/tapestry/view-model'
-import { TapestryElementRenderer } from 'tapestry-core-client/src/stage/renderer/tapestry-element-renderer'
 import { TapestryStage } from 'tapestry-core-client/src/stage'
+import {
+  ItemRenderer,
+  ItemRenderState,
+} from 'tapestry-core-client/src/stage/renderer/item-renderer'
 
 const DEFAULT_ITEM_Z_INDEX = 1
 
 export const ITEM_BORDER_RADIUS = 8
 
-export class ItemRenderer<T extends EditableItemViewModel> extends TapestryElementRenderer<T> {
+export class EditorItemRenderer<T extends EditableItemViewModel> extends ItemRenderer<T> {
   private preview = new Graphics({ label: 'preview', zIndex: 0 })
   private previewBackground: string
 
@@ -16,7 +19,7 @@ export class ItemRenderer<T extends EditableItemViewModel> extends TapestryEleme
     super(store.as('base'), stage, viewModel)
 
     this.pixiContainer.zIndex = DEFAULT_ITEM_Z_INDEX
-    this.previewBackground = THEMES[this.store.get('theme')].color('background.secondaryInverse')
+    this.previewBackground = THEMES[store.get('theme')].color('background.secondaryInverse')
   }
 
   private drawPreview(viewModel: T) {
@@ -30,24 +33,15 @@ export class ItemRenderer<T extends EditableItemViewModel> extends TapestryEleme
         .fill({ color: this.previewBackground, alpha: 0.25 })
 
       if (!this.preview.parent) {
-        this.stage.pixi.tapestry.stage.addChild(this.preview)
+        this.pixiContainer.addChild(this.preview)
       }
     } else {
       this.preview.removeFromParent()
     }
   }
 
-  protected renderInternal(viewModel: T) {
-    super.renderInternal(viewModel)
-    const { position } = viewModel.dto
-    this.pixiContainer.x = position.x
-    this.pixiContainer.y = position.y
-
-    this.drawPreview(viewModel)
-  }
-
-  dispose(): void {
-    super.dispose()
-    this.preview.removeFromParent()
+  protected doRender(state: ItemRenderState<T>): void {
+    super.doRender(state)
+    this.drawPreview(state.viewModel)
   }
 }
diff --git a/client/src/stage/renderer/rel-renderer.tsx b/client/src/stage/renderer/rel-renderer.tsx
index f9ec120..bd57d8c 100644
--- a/client/src/stage/renderer/rel-renderer.tsx
+++ b/client/src/stage/renderer/rel-renderer.tsx
@@ -3,12 +3,13 @@ import {
   computeRelCurvePoints,
   curveDirection,
 } from 'tapestry-core-client/src/view-model/rel-geometry'
-import { RelRenderer } from 'tapestry-core-client/src/stage/renderer/rel-renderer'
+import { RelRenderer, RelRenderState } from 'tapestry-core-client/src/stage/renderer/rel-renderer'
 import { EditableRelViewModel, TapestryEditorStore } from '../../pages/tapestry/view-model'
-import { ItemViewModel, Viewport } from 'tapestry-core-client/src/view-model'
+import { ItemViewModel, TapestryViewModel } from 'tapestry-core-client/src/view-model'
 import { IdMap } from 'tapestry-core/src/utils'
 import { TapestryStage } from 'tapestry-core-client/src/stage'
 import { RelEndpoint } from 'tapestry-core/src/data-format/schemas/rel'
+import { Store } from 'tapestry-core-client/src/lib/store'
 
 export class EditorRelRenderer extends RelRenderer<EditableRelViewModel> {
   constructor(
@@ -19,16 +20,23 @@ export class EditorRelRenderer extends RelRenderer<EditableRelViewModel> {
     super(editorStore.as('base'), stage, viewModel)
   }
 
-  protected computeRelCurvePoints(
+  protected obtainRenderState(
     viewModel: EditableRelViewModel,
-    viewport: Viewport,
-    items: IdMap<ItemViewModel>,
-  ) {
+    store: Store<TapestryViewModel>,
+  ): RelRenderState<EditableRelViewModel> {
+    const state = super.obtainRenderState(viewModel, store)
+    const { dragState } = state.viewModel
+    if (dragState?.endpoint && !isPoint(dragState.position)) {
+      state[`${dragState.endpoint}Item`] = store.get('items')[dragState.position.itemId]!
+    }
+    return state
+  }
+
+  protected computeRelCurvePoints(viewModel: EditableRelViewModel, items: IdMap<ItemViewModel>) {
     return computeRelCurvePoints<EditableRelViewModel>(
       viewModel,
-      viewport,
       items,
-      (relViewModel, endpoint, items) => {
+      (relViewModel, endpoint) => {
         if (
           relViewModel.dragState?.endpoint === endpoint &&
           isPoint(relViewModel.dragState.position)
diff --git a/core-client/package.json b/core-client/package.json
index edc73fd..be0b36d 100644
--- a/core-client/package.json
+++ b/core-client/package.json
@@ -13,6 +13,7 @@
   "license": "ISC",
   "description": "",
   "devDependencies": {
+    "@types/youtube-player": "^5.5.11",
     "eslint-plugin-react-hooks": "^5.2.0",
     "stylelint": "^16.25.0",
     "stylelint-config-standard": "^39.0.1",
@@ -50,6 +51,7 @@
     "@tiptap/react": "^2.24.2",
     "@tiptap/starter-kit": "^2.24.2",
     "@tweenjs/tween.js": "^25.0.0",
+    "@vimeo/player": "^2.30.2",
     "bowser": "^2.12.1",
     "clsx": "^2.1.1",
     "color": "^5.0.3",
@@ -63,6 +65,7 @@
     "react-pdf": "^10.2.0",
     "react-router": "^7.9.6",
     "tapestry-core": "^1.0.0",
-    "video.js": "^8.23.4"
+    "video.js": "^8.23.4",
+    "youtube-player": "^5.6.0"
   }
 }
diff --git a/core-client/src/components/lib/icon/index.tsx b/core-client/src/components/lib/icon/index.tsx
index 66dea3a..8f97aac 100644
--- a/core-client/src/components/lib/icon/index.tsx
+++ b/core-client/src/components/lib/icon/index.tsx
@@ -133,6 +133,7 @@ const ICONS = [
   'videocam',
   'view_sidebar',
   'visibility',
+  'volume_up',
   'wallpaper',
   'wand_stars',
   'wifi_off',
diff --git a/core-client/src/components/lib/media-player/index.tsx b/core-client/src/components/lib/media-player/index.tsx
index ae85966..353598b 100644
--- a/core-client/src/components/lib/media-player/index.tsx
+++ b/core-client/src/components/lib/media-player/index.tsx
@@ -50,6 +50,9 @@ export interface MediaPlayerProps<T extends ComponentType> {
   component: T
   options: VideoJSOptions
   onPlayerReady?: OnPlayerReady
+  onPlay?: () => void
+  onPause?: () => void
+  onEnded?: () => void
   startTime: number
   stopTime?: number
   style?: CSSProperties
@@ -59,6 +62,9 @@ export function MediaPlayer<T extends 'video' | 'audio'>({
   component,
   options,
   onPlayerReady,
+  onPlay,
+  onPause,
+  onEnded,
   startTime,
   stopTime,
   style,
@@ -146,6 +152,29 @@ export function MediaPlayer<T extends 'video' | 'audio'>({
     }
   }, [options, intervalRef, onReadyRef, component])
 
+  const player = playerRef.current
+
+  useEffect(() => {
+    if (!player || !onPlay) return
+
+    player.on('play', onPlay)
+    return () => player.off('play', onPlay)
+  }, [player, onPlay])
+
+  useEffect(() => {
+    if (!player || !onPause) return
+
+    player.on('pause', onPause)
+    return () => player.off('pause', onPause)
+  }, [player, onPause])
+
+  useEffect(() => {
+    if (!player || !onEnded) return
+
+    player.on('ended', onEnded)
+    return () => player.off('ended', onEnded)
+  }, [player, onEnded])
+
   return (
     <div data-vjs-player style={{ height: '100%' }}>
       <div ref={internalRef} style={style} className={styles.root} />
diff --git a/core-client/src/components/tapestry/group-background/index.tsx b/core-client/src/components/tapestry/group-background/index.tsx
deleted file mode 100644
index 5a10e03..0000000
--- a/core-client/src/components/tapestry/group-background/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { memo } from 'react'
-import { Rectangle } from 'tapestry-core/src/lib/geometry'
-import { computeRestrictedScale, MULTISELECT_RECTANGLE_PADDING } from '../../../view-model/utils'
-import { cssTransformForLocation, DOM_CONTAINER_CLASS } from '../../../stage/utils'
-import styles from './styles.module.css'
-import clsx from 'clsx'
-import { idMapToArray } from 'tapestry-core/src/utils'
-import { getOpaqueColor } from '../../../theme/types'
-import { useTapestryConfig, ZOrder } from '..'
-
-export interface GroupBackgroundProps {
-  id: string
-  membersBounds: Rectangle
-}
-
-export const GroupBackground = memo(({ id, membersBounds }: GroupBackgroundProps) => {
-  const { useStoreData } = useTapestryConfig()
-  const group = useStoreData(`groups.${id}`)!
-
-  const { selection, viewport, items } = useStoreData(['selection', 'viewport', 'items'])
-  const isSelected = selection.groupIds.has(id)
-
-  if (!(group.dto.color || isSelected)) {
-    return
-  }
-
-  const borderScale =
-    computeRestrictedScale(viewport, idMapToArray(items)) / viewport.transform.scale
-
-  const groupBounds = membersBounds.expand(MULTISELECT_RECTANGLE_PADDING)
-  const { top, left, width, height } = groupBounds
-
-  const opaqueColor = group.dto.color && getOpaqueColor(group.dto.color)
-  const isClickable =
-    isSelected || (group.dto.color && (group.dto.hasBackground || group.dto.hasBorder))
-
-  return (
-    <div
-      style={{
-        pointerEvents: isClickable ? 'auto' : 'none',
-        position: 'absolute',
-        top: `${top}px`,
-        left: `${left}px`,
-        width: `${width}px`,
-        height: `${height}px`,
-        ...cssTransformForLocation({ x: left, y: top }, viewport.transform),
-        ...{
-          '--group-background-color': group.dto.hasBackground ? group.dto.color : undefined,
-          '--group-border-color': group.dto.hasBorder ? opaqueColor : undefined,
-          '--border-scale': borderScale,
-        },
-        zIndex: isSelected ? ZOrder.selection : undefined,
-      }}
-      data-component-type="group"
-      data-model-id={group.dto.id}
-      data-ui-component="dragArea"
-      className={clsx(DOM_CONTAINER_CLASS, styles.group, {
-        [styles.selected]: isSelected,
-        [styles.hasBackground]: group.dto.hasBackground,
-        [styles.hasBorder]: group.dto.hasBorder,
-      })}
-    />
-  )
-})
diff --git a/core-client/src/components/tapestry/group-background/styles.module.css b/core-client/src/components/tapestry/group-background/styles.module.css
deleted file mode 100644
index fcc92ee..0000000
--- a/core-client/src/components/tapestry/group-background/styles.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.group {
-  --border-color: var(--group-border-color, var(--theme-background-brand));
-
-  background-color: var(
-    --group-background-color,
-    color-mix(in hsl, var(--theme-background-brand), transparent 90%)
-  );
-  border: calc(2px * var(--border-scale)) dashed var(--border-color);
-  border-radius: 16px;
-  box-sizing: border-box;
-  background-clip: padding-box;
-
-  &:not(.selected, .has-background) {
-    background-color: initial;
-  }
-
-  &:not(.selected, .has-border) {
-    border: initial;
-  }
-
-  &.selected {
-    border-radius: 0;
-    border-style: solid;
-  }
-}
diff --git a/core-client/src/components/tapestry/hooks/use-stage-init.ts b/core-client/src/components/tapestry/hooks/use-stage-init.ts
index 43537a3..a6a5c1c 100644
--- a/core-client/src/components/tapestry/hooks/use-stage-init.ts
+++ b/core-client/src/components/tapestry/hooks/use-stage-init.ts
@@ -7,6 +7,10 @@ import { usePropRef } from '../../lib/hooks/use-prop-ref'
 import { TapestryViewModel } from '../../../view-model'
 import { GestureDetectorOptions } from '../../../stage/gesture-detector'
 
+type PixiApps<S extends string> =
+  | [{ name: 'tapestry'; app: Application }]
+  | [{ name: 'tapestry'; app: Application }, { name: S; app: Application }]
+
 export function useStageInit<
   T extends TapestryViewModel,
   M extends Exclude<string, 'default'>,
@@ -14,12 +18,9 @@ export function useStageInit<
 >(
   sceneRef: RefObject<HTMLDivElement | null>,
   config: {
-    createPixiApps: () => Promise<
-      | [{ name: 'tapestry'; app: Application }]
-      | [{ name: 'tapestry'; app: Application }, { name: S; app: Application }]
-    >
+    createPixiApps: () => Promise<PixiApps<S>>
     lifecycleController: (stage: TapestryStage<S>) => TapestryLifecycleController<T, M>
-    gestureDectorOptions: GestureDetectorOptions
+    gestureDetectorOptions: GestureDetectorOptions
   },
 ) {
   const configRef = usePropRef(config)
@@ -27,7 +28,7 @@ export function useStageInit<
   useAsync(
     async (_abortCtrl, cleanUp) => {
       const scene = sceneRef.current!
-      const { gestureDectorOptions, lifecycleController, createPixiApps } = configRef.current
+      const { gestureDetectorOptions, lifecycleController, createPixiApps } = configRef.current
 
       let cancelled = false as boolean
       cleanUp(() => {
@@ -47,7 +48,7 @@ export function useStageInit<
           (acc, { app, name }) => ({ ...acc, [name]: app }),
           {} as Record<'tapestry' | S, Application>,
         ),
-        gestureDectorOptions,
+        gestureDetectorOptions,
       )
 
       const controller = lifecycleController(stage)
@@ -56,7 +57,14 @@ export function useStageInit<
 
       cleanUp(() => {
         controller.dispose()
-        pixiApps.forEach(({ app }) => app.destroy(true, true))
+        pixiApps.forEach(({ app }) => {
+          // Make sure we clean up the pixi apps properly. Otherwise navigating to the dashboard and then
+          // to another tapestry leads to loss of WebGL context and Pixi doesn't render anything.
+          app.stop()
+          app.ticker.stop()
+          app.stage.removeChildren().forEach((c) => c.destroy({ children: true }))
+          app.destroy(true, true)
+        })
       })
     },
     [sceneRef, configRef],
diff --git a/core-client/src/components/tapestry/item-placeholder/index.tsx b/core-client/src/components/tapestry/item-placeholder/index.tsx
index 29cf29f..eb19de2 100644
--- a/core-client/src/components/tapestry/item-placeholder/index.tsx
+++ b/core-client/src/components/tapestry/item-placeholder/index.tsx
@@ -24,7 +24,11 @@ export function ItemPlaceholder({
     <div style={style} className={clsx(styles.root, classes?.root)}>
       {thumbnailSrc ? (
         <>
-          <img src={thumbnailSrc} className={clsx(styles.thumbnail, classes?.thumbnail)} />
+          <img
+            src={thumbnailSrc}
+            crossOrigin="anonymous"
+            className={clsx(styles.thumbnail, classes?.thumbnail)}
+          />
           {thumbnailOverlay}
         </>
       ) : (
diff --git a/core-client/src/components/tapestry/items/audio/player.tsx b/core-client/src/components/tapestry/items/audio/player.tsx
index 842374e..273931a 100644
--- a/core-client/src/components/tapestry/items/audio/player.tsx
+++ b/core-client/src/components/tapestry/items/audio/player.tsx
@@ -1,5 +1,5 @@
 import { useMediaSource } from '../../../lib/hooks/use-media-source'
-import { memo, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { AudioItem as AudioItemDto } from 'tapestry-core/src/data-format/schemas/item'
 import { MediaPlayer, MediaPlayerProps, VideoJSOptions } from '../../../lib/media-player'
 import { useTapestryConfig } from '../..'
@@ -7,6 +7,7 @@ import { useMediaParams } from '../../hooks/use-media-params'
 import { Id } from 'tapestry-core/src/data-format/schemas/common'
 import { useAutoplay } from '../../hooks/use-autoplay'
 import Player from 'video.js/dist/types/player'
+import { setItemIsPlaying } from '../../../../view-model/store-commands/tapestry'
 
 export interface AudioItemPlayerProps extends Partial<MediaPlayerProps<'audio'>> {
   id: Id
@@ -15,10 +16,16 @@ export interface AudioItemPlayerProps extends Partial<MediaPlayerProps<'audio'>>
 
 export const AudioItemPlayer = memo(
   ({ id, mediaType, style, onPlayerReady, ...playerProps }: AudioItemPlayerProps) => {
-    const { useStoreData } = useTapestryConfig()
-    const { startTime, source, stopTime, customThumbnail } = useStoreData(
+    const { useStoreData, useDispatch } = useTapestryConfig()
+    const dispatch = useDispatch()
+    const onStart = useCallback(() => dispatch(setItemIsPlaying(id, true)), [dispatch, id])
+    const onStop = useCallback(() => dispatch(setItemIsPlaying(id, false)), [dispatch, id])
+    const { startTime, source, stopTime, thumbnail } = useStoreData(
       `items.${id}.dto`,
     ) as AudioItemDto
+    const customThumbnail = thumbnail?.renditions.find(
+      (r) => r.isPrimary && !r.isAutoGenerated,
+    )?.source
     const src = useMediaSource(source)
     const mediaParams = useMediaParams(id)
     const [player, setPlayer] = useState<Player>()
@@ -33,7 +40,7 @@ export const AudioItemPlayer = memo(
         inactivityTimeout: 0,
         ...(customThumbnail ? { poster: customThumbnail, audioOnlyMode: false } : {}),
       }),
-      [src, mediaType, customThumbnail],
+      [src, customThumbnail, mediaType],
     )
 
     return (
@@ -44,6 +51,9 @@ export const AudioItemPlayer = memo(
           setPlayer(player)
           onPlayerReady?.(player)
         }}
+        onPlay={onStart}
+        onPause={onStop}
+        onEnded={onStop}
         startTime={mediaParams.startTime ?? startTime ?? 0}
         stopTime={mediaParams.stopTime ?? stopTime ?? undefined}
         style={{ display: 'block', width: '100%', height: '100%', ...style }}
diff --git a/core-client/src/components/tapestry/items/image/viewer.tsx b/core-client/src/components/tapestry/items/image/viewer.tsx
index 52f1582..48f5335 100644
--- a/core-client/src/components/tapestry/items/image/viewer.tsx
+++ b/core-client/src/components/tapestry/items/image/viewer.tsx
@@ -9,6 +9,11 @@ export const ImageItemViewer = memo(({ id }: TapestryElementComponentProps) => {
   const src = useMediaSource(source)
 
   return (
-    <img src={src} style={{ display: 'block', width: '100%', height: '100%' }} draggable={false} />
+    <img
+      src={src}
+      crossOrigin="anonymous"
+      style={{ display: 'block', width: '100%', height: '100%' }}
+      draggable={false}
+    />
   )
 })
diff --git a/core-client/src/components/tapestry/items/pdf/styles.module.css b/core-client/src/components/tapestry/items/pdf/styles.module.css
index edcab31..63bbd63 100644
--- a/core-client/src/components/tapestry/items/pdf/styles.module.css
+++ b/core-client/src/components/tapestry/items/pdf/styles.module.css
@@ -1,10 +1,6 @@
 .root {
   height: 100%;
-
-  &.interactive {
-    /* "Optimization" for Safari's layer drawing */
-    overflow: auto;
-  }
+  overflow: auto;
 
   /* Parent container for the error and loading components */
   /* stylelint-disable-next-line selector-class-pattern */
diff --git a/core-client/src/components/tapestry/items/pdf/viewer.tsx b/core-client/src/components/tapestry/items/pdf/viewer.tsx
index 531cc62..4cd114b 100644
--- a/core-client/src/components/tapestry/items/pdf/viewer.tsx
+++ b/core-client/src/components/tapestry/items/pdf/viewer.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { clamp, times } from 'lodash-es'
 import {
   Ref,
@@ -27,6 +26,7 @@ import { LoadingSpinner } from '../../../lib/loading-spinner/index'
 import { ItemPlaceholder } from '../../item-placeholder'
 import styles from './styles.module.css'
 import { useStartPage } from '../../hooks/use-start-page'
+import { getPrimaryThumbnail } from '../../../../view-model/utils'
 
 const PDF_OPTIONS: Options = {
   disableStream: true,
@@ -131,7 +131,7 @@ export function PdfItemViewer({ id, onDocumentLoaded, onPageChanged, apiRef }: P
         <Document
           file={dto.source}
           onLoadSuccess={setPDFDocument}
-          className={clsx(styles.root, { [styles.interactive]: isInteractive })}
+          className={styles.root}
           onItemClick={(item) => navigateToPage(item.pageIndex)}
           inputRef={documentRef}
           options={PDF_OPTIONS}
@@ -168,7 +168,7 @@ export function PdfItemViewer({ id, onDocumentLoaded, onPageChanged, apiRef }: P
               thumbnail: styles.thumbnail,
             }}
             icon="picture_as_pdf"
-            thumbnailSrc={dto.customThumbnail ?? dto.thumbnail?.source}
+            thumbnailSrc={getPrimaryThumbnail(dto)}
             thumbnailOverlay={<Icon icon="picture_as_pdf" className={styles.overlay} />}
           >
             Click to load
diff --git a/core-client/src/components/tapestry/items/video/player.tsx b/core-client/src/components/tapestry/items/video/player.tsx
index 06ba235..a061684 100644
--- a/core-client/src/components/tapestry/items/video/player.tsx
+++ b/core-client/src/components/tapestry/items/video/player.tsx
@@ -1,5 +1,5 @@
 import { useMediaSource } from '../../../lib/hooks/use-media-source'
-import { memo, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { VideoItem as VideoItemDto } from 'tapestry-core/src/data-format/schemas/item'
 import {
   MediaPlayer,
@@ -16,15 +16,20 @@ import { Id } from 'tapestry-core/src/data-format/schemas/common'
 import { useTapestryConfig } from '../..'
 import { VideoPlayOverlay } from '../../video-play-overlay'
 import styles from './styles.module.css'
+import { getPrimaryThumbnail } from '../../../../view-model/utils'
+import { setItemIsPlaying } from '../../../../view-model/store-commands/tapestry'
 
 function useVideoThumbnail(dto: VideoItemDto, player: Player | undefined) {
-  const [thumbnail, setThumbnail] = useState(dto.customThumbnail ?? dto.thumbnail?.source)
+  const [thumbnail, setThumbnail] = useState(getPrimaryThumbnail(dto))
   const frameThumbnailRef = useRef<string>(undefined)
 
   async function setVideoFrameAsThumb() {
     const video = getVideoElement(player)
+    const hasCustomThumbnail = dto.thumbnail?.renditions.find(
+      (r) => r.isPrimary && !r.isAutoGenerated,
+    )
 
-    if (!video || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || dto.customThumbnail) {
+    if (!video || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || hasCustomThumbnail) {
       return
     }
 
@@ -58,7 +63,10 @@ export interface VideoItemPlayerProps extends Partial<MediaPlayerProps<'video'>>
 
 export const VideoItemPlayer = memo(
   ({ id, mediaType, style, onPlayerReady, ...playerProps }: VideoItemPlayerProps) => {
-    const { useStoreData } = useTapestryConfig()
+    const { useStoreData, useDispatch } = useTapestryConfig()
+    const dispatch = useDispatch()
+    const onStart = useCallback(() => dispatch(setItemIsPlaying(id, true)), [dispatch, id])
+    const onStop = useCallback(() => dispatch(setItemIsPlaying(id, false)), [dispatch, id])
     const dto = useStoreData(`items.${id}.dto`) as VideoItemDto
     const isInteractive = useStoreData('interactiveElement')?.modelId === id
     const src = useMediaSource(dto.source)
@@ -91,6 +99,9 @@ export const VideoItemPlayer = memo(
             setPlayer(player)
             onPlayerReady?.(player)
           }}
+          onPlay={onStart}
+          onPause={onStop}
+          onEnded={onStop}
           startTime={mediaParams.startTime ?? dto.startTime ?? 0}
           stopTime={mediaParams.stopTime ?? dto.stopTime ?? undefined}
           // The video is hidden in order to optimize the Safari layering algorithm
@@ -105,6 +116,7 @@ export const VideoItemPlayer = memo(
         {thumbnail && (
           <img
             src={thumbnail}
+            crossOrigin="anonymous"
             style={{
               display: showVideo ? 'none' : 'block',
               height: '100%',
diff --git a/core-client/src/components/tapestry/items/webpage/placeholder.tsx b/core-client/src/components/tapestry/items/webpage/placeholder.tsx
index b13f986..f121b1d 100644
--- a/core-client/src/components/tapestry/items/webpage/placeholder.tsx
+++ b/core-client/src/components/tapestry/items/webpage/placeholder.tsx
@@ -2,13 +2,14 @@ import { WebpageItem as WebpageItemDto } from 'tapestry-core/src/data-format/sch
 import { ItemPlaceholder } from '../../item-placeholder'
 import { VideoPlayOverlay } from '../../video-play-overlay'
 import styles from './styles.module.css'
+import { getPrimaryThumbnail } from '../../../../view-model/utils'
 
 export interface WebpagePlaceholderProps {
   item: WebpageItemDto
 }
 
 export function WebpagePlaceholder({
-  item: { thumbnail, size, webpageType, customThumbnail },
+  item: { thumbnail, size, webpageType },
 }: WebpagePlaceholderProps) {
   const showVideoPlayOverlay =
     webpageType === 'youtube' || webpageType === 'vimeo' || webpageType === 'iaVideo'
@@ -16,7 +17,7 @@ export function WebpagePlaceholder({
   return (
     <div className={styles.placeholder}>
       {showVideoPlayOverlay && <VideoPlayOverlay itemSize={size} type="videocam" />}
-      <ItemPlaceholder icon="hourglass_top" thumbnailSrc={customThumbnail ?? thumbnail?.source}>
+      <ItemPlaceholder icon="hourglass_top" thumbnailSrc={getPrimaryThumbnail(thumbnail)}>
         Generating thumbnail...
       </ItemPlaceholder>
     </div>
diff --git a/core-client/src/components/tapestry/items/webpage/viewer.tsx b/core-client/src/components/tapestry/items/webpage/viewer.tsx
index 09a252c..0e7f8f3 100644
--- a/core-client/src/components/tapestry/items/webpage/viewer.tsx
+++ b/core-client/src/components/tapestry/items/webpage/viewer.tsx
@@ -1,14 +1,5 @@
 import { isEqual } from 'lodash-es'
-import {
-  DetailedHTMLProps,
-  FC,
-  IframeHTMLAttributes,
-  Ref,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
+import { FC, Ref, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { useMediaParams } from 'tapestry-core-client/src/components/tapestry/hooks/use-media-params'
 import { Id } from 'tapestry-core/src/data-format/schemas/common'
 import { WebpageType } from 'tapestry-core/src/data-format/schemas/item'
@@ -16,6 +7,8 @@ import { parseWebSource, WEB_SOURCE_PARSERS } from 'tapestry-core/src/web-source
 import { WebpageItem } from 'tapestry-core/src/data-format/schemas/item'
 import { useTapestryConfig } from '../..'
 import { WebpageLoader } from './loader'
+import { WebFrame as WebFrameComponent, WebFrameSwitchProps } from './web-frame'
+import { setItemIsPlaying } from '../../../../view-model/store-commands/tapestry'
 
 const IFRAME_ALLOWED_RESTRICTIONS = [
   'allow-downloads',
@@ -32,6 +25,7 @@ export const ALLOWED_ORIGINS = [
   location.origin,
   'https://archive.org',
   'https://youtube.com',
+  'https://youtube.com',
   'https://player.vimeo.com',
 ]
 
@@ -75,22 +69,19 @@ export interface WebpageItemViewerApi {
   reload(): void
 }
 
-export interface WebFrameProps extends DetailedHTMLProps<
-  IframeHTMLAttributes<HTMLIFrameElement>,
-  HTMLIFrameElement
-> {
-  src: string
-  onLoad: () => void
-}
-
 export interface WebpageItemViewerProps {
   id: Id
-  WebFrame?: 'iframe' | FC<WebFrameProps>
+  WebFrame?: FC<WebFrameSwitchProps>
   apiRef?: Ref<WebpageItemViewerApi>
 }
 
-export function WebpageItemViewer({ id, apiRef, WebFrame = 'iframe' }: WebpageItemViewerProps) {
-  const { useStoreData } = useTapestryConfig()
+export function WebpageItemViewer({
+  id,
+  apiRef,
+  WebFrame = WebFrameComponent,
+}: WebpageItemViewerProps) {
+  const { useStoreData, useDispatch } = useTapestryConfig()
+  const dispatch = useDispatch()
   const dto = useStoreData(`items.${id}.dto`) as WebpageItem
   const displayWebpage = useStoreData(`items.${id}.hasBeenActive`)
   const [webpageLoaded, setWebpageLoaded] = useState(false)
@@ -124,12 +115,14 @@ export function WebpageItemViewer({ id, apiRef, WebFrame = 'iframe' }: WebpageIt
   return (
     <WebpageLoader item={dto} displayPage={displayWebpage} pageLoading={!!loading}>
       <WebFrame
+        webpageType={dto.webpageType}
         src={src}
         sandbox={sandbox.join(' ')}
         onLoad={() => setWebpageLoaded(true)}
         key={`reload-${webpageReloadIndex}`}
         allowFullScreen
         allow="autoplay"
+        onPlaybackStateChange={(isPlaying) => dispatch(setItemIsPlaying(id, isPlaying))}
       />
     </WebpageLoader>
   )
diff --git a/core-client/src/components/tapestry/items/webpage/vimeo-frame.tsx b/core-client/src/components/tapestry/items/webpage/vimeo-frame.tsx
new file mode 100644
index 0000000..35756f2
--- /dev/null
+++ b/core-client/src/components/tapestry/items/webpage/vimeo-frame.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useRef } from 'react'
+import VimeoPlayer from '@vimeo/player'
+import { WebFrameProps } from './web-frame'
+import { usePropRef } from '../../../lib/hooks/use-prop-ref'
+
+export function VimeoFrame({ onPlaybackStateChange, src, ...props }: WebFrameProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const playerRef = useRef<VimeoPlayer>(null)
+
+  const onPlaybackStateChangeRef = usePropRef(onPlaybackStateChange)
+  const url = useMemo(() => {
+    const url = new URL(src)
+    if (url.host === 'youtube.com') {
+      // Events don't fire properly unless we have the www. subdomain
+      url.host = 'www.youtube.com'
+    }
+    url.searchParams.set('enablejsapi', '1')
+    url.searchParams.set('origin', window.location.origin)
+    return url
+  }, [src])
+
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const player = new VimeoPlayer(iframe)
+    playerRef.current = player
+
+    const onStart = () => onPlaybackStateChangeRef.current?.(true)
+    const onStop = () => onPlaybackStateChangeRef.current?.(false)
+
+    player.on('play', onStart)
+    player.on('pause', onStop)
+    player.on('ended', onStop)
+
+    return () => {
+      player.off('play', onStart)
+      player.off('pause', onStop)
+      player.off('ended', onStop)
+      playerRef.current = null
+    }
+  }, [onPlaybackStateChangeRef, src])
+
+  return <iframe ref={iframeRef} src={url.toString()} {...props} />
+}
diff --git a/core-client/src/components/tapestry/items/webpage/web-frame.tsx b/core-client/src/components/tapestry/items/webpage/web-frame.tsx
new file mode 100644
index 0000000..0a9b321
--- /dev/null
+++ b/core-client/src/components/tapestry/items/webpage/web-frame.tsx
@@ -0,0 +1,30 @@
+import { DetailedHTMLProps, IframeHTMLAttributes } from 'react'
+import { WebpageType } from 'tapestry-core/src/data-format/schemas/item'
+import { YouTubeFrame } from './youtube-frame'
+import { VimeoFrame } from './vimeo-frame'
+
+export interface WebFrameProps extends DetailedHTMLProps<
+  IframeHTMLAttributes<HTMLIFrameElement>,
+  HTMLIFrameElement
+> {
+  src: string
+  onLoad: () => void
+  onPlaybackStateChange?: (isPlaying: boolean) => void
+}
+
+export interface WebFrameSwitchProps extends WebFrameProps {
+  webpageType?: WebpageType | null
+}
+
+export function WebFrame({ webpageType, ...props }: WebFrameSwitchProps) {
+  if (webpageType === 'youtube') {
+    return <YouTubeFrame {...props} />
+  }
+
+  if (webpageType === 'vimeo') {
+    return <VimeoFrame {...props} />
+  }
+
+  // TODO: Handle IA audio and video frames as well, once they expose a similar API.
+  return <iframe {...props} />
+}
diff --git a/core-client/src/components/tapestry/items/webpage/youtube-frame.tsx b/core-client/src/components/tapestry/items/webpage/youtube-frame.tsx
new file mode 100644
index 0000000..b5681c1
--- /dev/null
+++ b/core-client/src/components/tapestry/items/webpage/youtube-frame.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useRef } from 'react'
+import YouTubePlayerFactory from 'youtube-player'
+import type { YouTubePlayer } from 'youtube-player/dist/types'
+import { WebFrameProps } from './web-frame'
+import { usePropRef } from '../../../lib/hooks/use-prop-ref'
+
+export function YouTubeFrame({ onPlaybackStateChange, src, ...props }: WebFrameProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const playerRef = useRef<YouTubePlayer>(null)
+
+  const onPlaybackStateChangeRef = usePropRef(onPlaybackStateChange)
+  const url = useMemo(() => {
+    const url = new URL(src)
+    if (url.host === 'youtube.com') {
+      // Events don't fire properly unless we have the www. subdomain
+      url.host = 'www.youtube.com'
+    }
+    url.searchParams.set('enablejsapi', '1')
+    url.searchParams.set('origin', window.location.origin)
+    return url
+  }, [src])
+
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const player = YouTubePlayerFactory(iframe)
+    playerRef.current = player
+
+    const listener = player.on('stateChange', (event) => {
+      // 1 = playing, 2 = paused, 0 = ended
+      onPlaybackStateChangeRef.current?.(event.data === 1)
+    })
+
+    return () => {
+      // @ts-expect-error Wrong TS types for the youtube-player library
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      player.off(listener)
+      playerRef.current = null
+    }
+  }, [onPlaybackStateChangeRef, src])
+
+  return <iframe ref={iframeRef} src={url.toString()} {...props} />
+}
diff --git a/core-client/src/components/tapestry/search/search-pane/use-search-results.ts b/core-client/src/components/tapestry/search/search-pane/use-search-results.ts
index 3dac8b9..2641f61 100644
--- a/core-client/src/components/tapestry/search/search-pane/use-search-results.ts
+++ b/core-client/src/components/tapestry/search/search-pane/use-search-results.ts
@@ -7,7 +7,7 @@ import { Tab } from '.'
 import { useTapestryConfig } from '../..'
 import { usePropRef } from '../../../../../src/components/lib/hooks/use-prop-ref'
 import { IconName } from '../../../../../src/components/lib/icon/index'
-import { supportsCustomThumbnail, supportsThumbnail } from '../../../../view-model/utils'
+import { getPrimaryThumbnail } from '../../../../view-model/utils'
 import { SearchResultProps } from './search-result'
 
 const itemIcons: Record<ItemType, IconName> = {
@@ -75,7 +75,7 @@ function getMatchDescription(dto: Item, search: string) {
     return `Shown because "${search}" matches the item notes.`
   }
   if (mediaItem && dto.source.toLowerCase().includes(query)) {
-    return `Shown because "search" matches the item url.`
+    return `Shown because "${search}" matches the item url.`
   }
 }
 
@@ -93,13 +93,7 @@ export function useSearchResults(
         const type: Exclude<Tab, 'all'> = isMediaItem(dto) ? 'items' : 'text'
         const id = dto.id
         const thumbnail =
-          supportsCustomThumbnail(dto) && dto.customThumbnail
-            ? dto.customThumbnail
-            : supportsThumbnail(dto) && dto.thumbnail?.source
-              ? dto.thumbnail.source
-              : dto.type === 'image'
-                ? dto.source
-                : itemIcons[dto.type]
+          getPrimaryThumbnail(dto) ?? (dto.type === 'image' ? dto.source : itemIcons[dto.type])
 
         const description = getMatchDescription(dto, search)
 
diff --git a/core-client/src/components/tapestry/tapestry-canvas/index.tsx b/core-client/src/components/tapestry/tapestry-canvas/index.tsx
index c24f865..8cf6e65 100644
--- a/core-client/src/components/tapestry/tapestry-canvas/index.tsx
+++ b/core-client/src/components/tapestry/tapestry-canvas/index.tsx
@@ -12,17 +12,11 @@ import {
 } from '../../../components/tapestry'
 import { themeToDOMWriter } from '../../../theme/theme-to-dom-writer'
 import { ItemViewModel } from '../../../view-model'
-import {
-  getBoundingRectangle,
-  getBounds,
-  getGroupMembers,
-  isItemInSelection,
-  isMultiselection,
-} from '../../../view-model/utils'
+import { getBounds, isItemInSelection, isMultiselection } from '../../../view-model/utils'
 import { PropsWithStyle } from '../../lib'
-import { GroupBackground } from '../group-background'
 import styles from './styles.module.css'
 import { cssTransformForLocation } from '../../../stage/utils'
+import { ItemType } from 'tapestry-core/src/data-format/schemas/item'
 
 export interface TapestryCanvasProps extends PropsWithStyle<
   object,
@@ -38,6 +32,8 @@ interface TapestryElementLocatorProps extends PropsWithStyle {
   transform: LinearTransform
 }
 
+const PERSIST_ITEM_TYPES: ItemType[] = ['audio', 'video', 'book', 'pdf', 'text', 'webpage']
+
 function TapestryElementLocator({
   id,
   bounds: { top, left, width, height },
@@ -46,26 +42,60 @@ function TapestryElementLocator({
   transform,
 }: TapestryElementLocatorProps) {
   const { useStoreData } = useTapestryConfig()
-  const { interactiveElement, selection, items } = useStoreData([
+  const { interactiveElement, selection, disableOptimizations } = useStoreData([
     'interactiveElement',
     'selection',
-    'items',
+    'disableOptimizations',
   ])
+  const item = useStoreData(`items.${id}`)
   const isInteractive = id === interactiveElement?.modelId
-  const isInSelection = isItemInSelection(items[id], selection)
+  const isInSelection = isItemInSelection(item, selection)
+  const hasBeenActive = !!item?.hasBeenActive
+  const hasPersistentState = (PERSIST_ITEM_TYPES as (string | undefined)[]).includes(item?.dto.type)
+  const shouldDisplayDom =
+    disableOptimizations || isInteractive || item?.isPlaying || !item?.snapshotId
+
+  if (!shouldDisplayDom && (!hasBeenActive || !hasPersistentState)) {
+    // The item should currently be hidden since it is not interactive and a placeholder will be displayed instead.
+    // In this case we don't want to keep this item in the DOM at all. The only exception is if the user has interacted
+    // with the item and we want to preserve its internal state. In this case we want to keep the item in the DOM but
+    // hide it somehow so that it doesn't participate in the browser's layout cycles during navigation.
+    return null
+  }
 
   return (
     <div
-      style={{
-        position: 'absolute',
-        top: `${top}px`,
-        left: `${left}px`,
-        width: `${width}px`,
-        height: `${height}px`,
-        ...cssTransformForLocation({ x: left, y: top }, transform),
-        // item should be above other selected items in group
-        zIndex: isInteractive ? ZOrder.interaction : isInSelection ? ZOrder.selection : undefined,
-      }}
+      style={
+        !shouldDisplayDom
+          ? // Don't use display: none since some browsers put web pages (iframes) in background mode and also
+            // PDFs get redrawn and flash on re-entry. Moving the content far off-screen and making sure it is
+            // not involved in the main DOM layout keeps the element "alive" while preserving browser resources.
+            {
+              position: 'fixed',
+              left: '-100000px',
+              top: '0',
+              width: `${width}px`,
+              height: `${height}px`,
+              overflow: 'hidden',
+              opacity: '0',
+              pointerEvents: 'none',
+              contain: 'layout paint style',
+            }
+          : {
+              position: 'absolute',
+              top: `${top}px`,
+              left: `${left}px`,
+              width: `${width}px`,
+              height: `${height}px`,
+              ...cssTransformForLocation({ x: left, y: top }, transform),
+              // item should be above other selected items in group
+              zIndex: isInteractive
+                ? ZOrder.interaction
+                : isInSelection
+                  ? ZOrder.selection
+                  : undefined,
+            }
+      }
       className={clsx('tapestry-element-locator', className, {
         [styles.inactive]: !isInteractive,
       })}
@@ -94,13 +124,7 @@ export function TapestryCanvas({ classes, style, orderByPosition }: TapestryCanv
   const viewportReady = useStoreData('viewport.ready')
   const { constrainToLayer, action: pointerAction } =
     useStoreData('pointerInteraction', ['constrainToLayer', 'action']) ?? {}
-  const { theme, items, rels, selection, groups } = useStoreData([
-    'theme',
-    'items',
-    'rels',
-    'selection',
-    'groups',
-  ])
+  const { theme, items, rels, selection } = useStoreData(['theme', 'items', 'rels', 'selection'])
 
   useEffect(() => themeToDOMWriter.init(), [])
   useEffect(() => themeToDOMWriter.updateTheme(theme), [theme])
@@ -161,17 +185,7 @@ export function TapestryCanvas({ classes, style, orderByPosition }: TapestryCanv
           )
         )
       })}
-      {orderedItems.filter((item) => !item.dto.groupId).map(renderItem)}
-      {idMapToArray(groups).map((group) => {
-        const members = getGroupMembers(group.dto.id, idMapToArray(items))
-
-        return (
-          <div key={group.dto.id}>
-            <GroupBackground id={group.dto.id} membersBounds={getBoundingRectangle(members)} />
-            {members.map(renderItem)}
-          </div>
-        )
-      })}
+      {orderedItems.map(renderItem)}
       {isMultiselection(selection) && <components.Multiselection />}
     </div>
   )
diff --git a/core-client/src/lib/pixi.ts b/core-client/src/lib/pixi.ts
new file mode 100644
index 0000000..c436205
--- /dev/null
+++ b/core-client/src/lib/pixi.ts
@@ -0,0 +1,141 @@
+import { times } from 'lodash-es'
+import { Graphics, Texture } from 'pixi.js'
+import {
+  mul,
+  norm,
+  normalize,
+  Point,
+  Rectangle,
+  translate,
+  Vector,
+  vector,
+} from 'tapestry-core/src/lib/geometry'
+import { IconName } from '../components/lib/icon'
+import { LiteralColor } from '../theme/types'
+
+const EPS = 1e-3
+
+export interface MaterialIconTextureProps {
+  iconName: IconName
+  color?: LiteralColor
+  weight?: number
+  size?: number
+  fontSize?: number
+}
+
+/**
+ * Creates a texture from a given Material icon.
+ *
+ * XXX: Currently only the Outlined variant with FILL 0 of the Material Symbols font is supported. In order to support
+ * other font-variation-settings, we need to self-host the fonts and define different @font-faces for the different
+ * font variants we want to use, since when drawing a font to a canvas we don't have an option to pass additional
+ * font settings except for family, weight, style, and size.
+ */
+export function materialIconToTexture({
+  iconName,
+  size = 24,
+  color = '#ffffff',
+  weight = 400,
+  fontSize = size,
+}: MaterialIconTextureProps) {
+  const scale = Math.max(2, window.devicePixelRatio)
+  const canvas = new OffscreenCanvas(size * scale, size * scale)
+  const context = canvas.getContext('2d')!
+  context.scale(scale, scale)
+  context.fillStyle = color
+  context.textAlign = 'center'
+  context.textBaseline = 'middle'
+  context.font = `${weight} ${fontSize}px "Material Symbols Outlined"`
+
+  const metrics = context.measureText(iconName)
+  const offset = (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
+
+  context.fillText(iconName, size / 2, size / 2 + offset)
+
+  return Texture.from({ resource: canvas, resolution: scale })
+}
+
+/**
+ * Creates a polyline that approximates a rectangle with rounded corners.
+ *
+ * @param rect The rectangle to approximate.
+ * @param radius The corner radius.
+ * @param arcSegments How many line segments to break the corners into.
+ * @returns A circular list of points (first point equals last) describing a polyline that approximates the given rect.
+ */
+export function roundedRectPolyline(rect: Rectangle, radius: number, arcSegments = 8): Point[] {
+  radius = Math.max(0, Math.min(radius, Math.min(rect.width, rect.height) / 2))
+
+  const arc = (center: Point, start: number, end: number) =>
+    times(arcSegments - 1, (i): Point => {
+      const alpha = start + ((end - start) * (i + 1)) / arcSegments
+      return { x: center.x + Math.cos(alpha) * radius, y: center.y + Math.sin(alpha) * radius }
+    })
+
+  return [
+    { x: rect.left + radius, y: rect.top },
+    { x: rect.right - radius, y: rect.top },
+    ...arc({ x: rect.right - radius, y: rect.top + radius }, -Math.PI / 2, 0),
+    { x: rect.right, y: rect.bottom - radius },
+    ...arc({ x: rect.right - radius, y: rect.bottom - radius }, 0, Math.PI / 2),
+    { x: rect.left + radius, y: rect.bottom },
+    ...arc({ x: rect.left + radius, y: rect.bottom - radius }, Math.PI / 2, Math.PI),
+    { x: rect.left, y: rect.top + radius },
+    ...arc({ x: rect.left + radius, y: rect.top + radius }, Math.PI, (3 * Math.PI) / 2),
+    { x: rect.left + radius, y: rect.top },
+  ]
+}
+
+/**
+ * Traces a dashed line along the given polyline using the given Graphics context.
+ *
+ * Note that this method only invokes graphics.moveTo() and graphics.lineTo() to create a path representing the dashed
+ * line. It doesn't actually draw the path. In order to draw the dashed line, invoke graphics.stroke() afterwards.
+ *
+ * @param graphics The Graphics context to draw on.
+ * @param points The polyline along which the dashed line will be drawn.
+ * @param dash The size of a single dash in the patter.
+ * @param gap The size of the gap between dashes. Equals the dash size by default.
+ */
+export function drawDashedPolyline(graphics: Graphics, points: Point[], dash: number, gap = dash) {
+  if (points.length < 2) return
+
+  const segments: { from: Point; to: Point; length: number; direction: Vector }[] = []
+  for (let i = 0; i < points.length - 1; i++) {
+    const from = points[i]
+    const to = points[i + 1]
+    const segment = vector(from, to)
+    const length = norm(segment)
+    if (length > EPS) {
+      segments.push({ from, to, length, direction: normalize(segment) })
+    }
+  }
+
+  const pattern = dash + gap
+
+  let cursor = 0
+
+  for (const { from, length, direction } of segments) {
+    const segmentStart = cursor
+
+    while (cursor < segmentStart + length - EPS) {
+      const phase = cursor % pattern
+      const inDash = phase < dash
+      const step = inDash ? dash - phase : pattern - phase
+
+      const start = cursor - segmentStart
+      const end = Math.min(length, start + step)
+
+      if (end <= start) break
+
+      if (inDash) {
+        const p1 = translate(from, mul(start, direction))
+        const p2 = translate(from, mul(end, direction))
+        graphics.moveTo(p1.x, p1.y)
+        graphics.lineTo(p2.x, p2.y)
+      }
+
+      cursor += end - start
+    }
+  }
+}
diff --git a/core-client/src/stage/controller/global-events-controller.ts b/core-client/src/stage/controller/global-events-controller.ts
index 79e36f1..bb21a14 100644
--- a/core-client/src/stage/controller/global-events-controller.ts
+++ b/core-client/src/stage/controller/global-events-controller.ts
@@ -2,7 +2,12 @@ import { createEventRegistry } from '../../lib/events/event-registry'
 import { arrowShortcuts, matchesShortcut } from '../../lib/keyboard-event'
 import { Store } from '../../lib/store/index'
 import { panViewport, setDefaultViewport } from '../../view-model/store-commands/viewport'
-import { selectAll, setPointerInteraction } from '../../view-model/store-commands/tapestry'
+import {
+  deselectAll,
+  selectAll,
+  setInteractiveElement,
+  setPointerInteraction,
+} from '../../view-model/store-commands/tapestry'
 import { TapestryStage } from '..'
 import { TapestryStageController } from '.'
 import { PointerMode, TapestryViewModel } from '../../view-model'
@@ -16,6 +21,10 @@ type EventTypesMap = {
 
 const { eventListener, attachListeners, detachListeners } = createEventRegistry<EventTypesMap>()
 
+interface PostMessageData {
+  type: 'deactivate'
+}
+
 export type KeyMapping = Record<string, (event: KeyboardEvent) => void>
 
 export class GlobalEventsController implements TapestryStageController {
@@ -38,12 +47,22 @@ export class GlobalEventsController implements TapestryStageController {
     this.store.subscribe(['pointerMode'], this.onPointerModeChange)
     attachListeners(this, 'stage', this.stage.root)
     attachListeners(this, 'document', document)
+    addEventListener('message', this.onPostMessage)
   }
 
   dispose() {
     this.store.unsubscribe(this.onPointerModeChange)
     detachListeners(this, 'stage', this.stage.root)
     detachListeners(this, 'document', document)
+    removeEventListener('message', this.onPostMessage)
+  }
+
+  private onPostMessage = (event: MessageEvent<PostMessageData>) => {
+    // Remove this eslint suppression if/when we add more PostMessage types
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (event.data?.type === 'deactivate') {
+      this.store.dispatch(deselectAll(), setInteractiveElement(null))
+    }
   }
 
   private onPointerModeChange = ({ pointerMode }: { pointerMode: PointerMode }) => {
diff --git a/core-client/src/stage/controller/item-thumbnail-controller.ts b/core-client/src/stage/controller/item-thumbnail-controller.ts
new file mode 100644
index 0000000..70e6c61
--- /dev/null
+++ b/core-client/src/stage/controller/item-thumbnail-controller.ts
@@ -0,0 +1,239 @@
+import { ImageAssetRendition } from 'tapestry-core/src/data-format/schemas/item'
+import { TapestryStageController } from '.'
+import { Store } from '../../lib/store'
+import { ItemViewModel, TapestryViewModel } from '../../view-model'
+import { IdMap, idMapToArray } from 'tapestry-core/src/utils'
+import { ORIGIN, Rectangle, scaleSize, Size } from 'tapestry-core/src/lib/geometry'
+import { debounce, minBy, uniqueId } from 'lodash-es'
+import { positionAtViewport } from '../../view-model/utils'
+import {
+  ThumbnailLoadError,
+  ThumbnailLoadRequest,
+  ThumbnailLoadResponse,
+} from '../../workers/thumbnail-loader'
+import { Texture } from 'pixi.js'
+import { Id } from 'tapestry-core/src/data-format/schemas/common'
+import { snapshotRegistry } from '../renderer/item-renderer'
+import { isMobile } from '../../lib/user-agent'
+
+interface ItemThumbnailState {
+  loadedRendition?: {
+    bitmap: ImageBitmap
+    meta: ImageAssetRendition
+  }
+  requestedRendition?: {
+    requestId: string
+    meta: ImageAssetRendition
+  }
+}
+
+export class ItemThumbnailController implements TapestryStageController {
+  private thumbnailLoader?: Worker
+  private thumbnails: IdMap<ItemThumbnailState> = {}
+  private initialRequestIds = new Set()
+  private isInitialized = false
+
+  constructor(private store: Store<TapestryViewModel>) {}
+
+  init(): void {
+    this.thumbnailLoader = new Worker(
+      new URL('../../workers/thumbnail-loader.ts', import.meta.url),
+      { type: 'module' },
+    )
+    this.thumbnailLoader.addEventListener('message', this.onThumbnailLoaderMessage)
+
+    this.fetchInitialThumbnails()
+  }
+
+  dispose(): void {
+    this.store.unsubscribe(this.recalculateLevelOfDetail)
+    this.store.unsubscribe(this.onItemsChanged)
+
+    this.thumbnailLoader?.removeEventListener('message', this.onThumbnailLoaderMessage)
+    this.thumbnailLoader?.terminate()
+    this.thumbnailLoader = undefined
+  }
+
+  private onInitialized() {
+    if (this.isInitialized) return
+
+    this.isInitialized = true
+    this.store.subscribe('viewport.transform', this.recalculateLevelOfDetail)
+    this.store.subscribe('items', this.onItemsChanged)
+
+    this.recalculateLevelOfDetail()
+  }
+
+  private onThumbnailLoaderMessage = (
+    event: MessageEvent<ThumbnailLoadResponse | ThumbnailLoadError>,
+  ) => {
+    const { itemId, requestId } = event.data
+    try {
+      if (this.thumbnails[itemId]?.requestedRendition?.requestId !== requestId) {
+        // This request has been rejected or ignored in the meantime.
+        if (event.data.ok) {
+          event.data.bitmap.close()
+        }
+        return
+      }
+
+      const { meta } = this.thumbnails[itemId].requestedRendition
+      delete this.thumbnails[itemId].requestedRendition
+
+      if (!event.data.ok) {
+        // TODO[rado]: Failed to load thumbnail. What should we do here? Do we have any reasonable fallback?
+        return
+      }
+
+      this.thumbnails[itemId].loadedRendition = { bitmap: event.data.bitmap, meta }
+      this.updateItemSnapshot(itemId, Texture.from(event.data.bitmap))
+    } finally {
+      if (!this.isInitialized && this.initialRequestIds.has(requestId)) {
+        this.initialRequestIds.delete(requestId)
+        if (this.initialRequestIds.size === 0) {
+          this.onInitialized()
+        }
+      }
+    }
+  }
+
+  private fetchInitialThumbnails() {
+    for (const item of idMapToArray(this.store.get('items'))) {
+      const itemId = item.dto.id
+      this.thumbnails[itemId] ??= {}
+      const state = this.thumbnails[itemId]
+
+      const thumbnailRenditions = item.dto.thumbnail?.renditions ?? []
+      const rendition = minBy(thumbnailRenditions, ({ size }) => size.width)
+      if (!rendition) {
+        // No thumbnail to load
+        continue
+      }
+
+      const requestId = uniqueId('thumbnail-request')
+      this.thumbnailLoader?.postMessage({
+        requestId,
+        itemId,
+        url: rendition.source,
+      } satisfies ThumbnailLoadRequest)
+      state.requestedRendition = { requestId, meta: rendition }
+      this.initialRequestIds.add(requestId)
+    }
+  }
+
+  private computeMaxLOD(nItems: number) {
+    // On mobile devices, try not to exceed 300 MB of bitmap memory for thumbnails
+    const memoryBudget = isMobile ? 300 * (1 << 20) : Infinity
+    const memoryBudgetPerItem = memoryBudget / nItems
+    let maxLOD = 4096
+    // Bitmaps store 4 bytes per pixel, so the bitmap size for a square image with side X is X * X * 4
+    while (maxLOD * maxLOD * 4 > memoryBudgetPerItem) maxLOD /= 2
+    return maxLOD
+  }
+
+  private recalculateLevelOfDetail = debounce(() => {
+    const viewport = this.store.get('viewport')
+    const viewportRect = new Rectangle(
+      positionAtViewport(viewport, ORIGIN),
+      scaleSize(viewport.size, 1 / viewport.transform.scale),
+    )
+    const items = idMapToArray(this.store.get('items'))
+    const maxLOD = this.computeMaxLOD(items.length)
+    for (const item of idMapToArray(this.store.get('items'))) {
+      this.recalculateLODForItem(item, viewport.transform.scale, viewportRect, maxLOD)
+    }
+  }, 250)
+
+  private recalculateLODForItem(
+    item: ItemViewModel,
+    scale: number,
+    viewportRect: Rectangle,
+    maxLOD: number,
+  ) {
+    const itemId = item.dto.id
+    const thumbnailRenditions = item.dto.thumbnail?.renditions ?? []
+    const itemSize = scaleSize(item.dto.size, scale)
+    const requiredRendition = this.findRenditionForSize(thumbnailRenditions, itemSize, maxLOD)
+    if (!requiredRendition) {
+      // This can happen only if the item has no thumbnail renditions at all. Nothing to do here in this case.
+      return
+    }
+
+    this.thumbnails[itemId] ??= {}
+    const state = this.thumbnails[itemId]
+    const requestedOrLoadedRendition = state.requestedRendition ?? state.loadedRendition
+
+    const isVisible = viewportRect.intersects(new Rectangle(item.dto))
+    if (!isVisible && requestedOrLoadedRendition) return
+
+    if ((requestedOrLoadedRendition?.meta.size.width ?? 0) < requiredRendition.size.width) {
+      // We require a thumbnail with higher LOD than the one which is currently loaded or requested for this item.
+      const requestId = uniqueId('thumbnail-request')
+      this.thumbnailLoader?.postMessage({
+        requestId,
+        itemId,
+        url: requiredRendition.source,
+      } satisfies ThumbnailLoadRequest)
+      state.requestedRendition = { requestId, meta: requiredRendition }
+    }
+  }
+
+  private findRenditionForSize(renditions: ImageAssetRendition[], { width }: Size, maxLOD: number) {
+    // Find the rendition having the closest width to the current item size, in pixels.
+    // Thumbnail renditions should have the same aspect ratio as the item, so comparing only width should suffice.
+    const levelOfDetail = Math.min(width, maxLOD)
+    return minBy(renditions, ({ size }) => Math.abs(size.width - levelOfDetail))
+  }
+
+  private onItemsChanged = debounce((itemsMap: TapestryViewModel['items']) => {
+    const viewport = this.store.get('viewport')
+    const viewportRect = new Rectangle(
+      positionAtViewport(viewport, ORIGIN),
+      scaleSize(viewport.size, 1 / viewport.transform.scale),
+    )
+    const items = idMapToArray(itemsMap)
+    const maxLOD = this.computeMaxLOD(items.length)
+    for (const item of items) {
+      const state = this.thumbnails[item.dto.id]
+      const requestedOrLoadedRendition = (state?.requestedRendition ?? state?.loadedRendition)?.meta
+      if (
+        !requestedOrLoadedRendition ||
+        item.dto.thumbnail?.renditions.every((r) => r.source !== requestedOrLoadedRendition.source)
+      ) {
+        this.recalculateLODForItem(item, viewport.transform.scale, viewportRect, maxLOD)
+      }
+    }
+
+    Object.keys(this.thumbnails)
+      .filter((itemId) => !(itemId in itemsMap))
+      .forEach(this.destroyThumbnailForItem)
+  }, 250)
+
+  private destroyThumbnailForItem = (itemId: Id) => {
+    if (!this.thumbnails[itemId]) return
+
+    this.thumbnails[itemId].loadedRendition?.bitmap.close()
+    delete this.thumbnails[itemId]
+  }
+
+  private updateItemSnapshot(itemId: string, snapshot: Texture | null | undefined) {
+    const currentSnapshotId = this.store.get(`items.${itemId}.snapshotId`)
+    const currentSnapshot = currentSnapshotId ? snapshotRegistry[currentSnapshotId] : null
+    try {
+      currentSnapshot?.destroy(true)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log("Error while destroying texture (it's fine)", error)
+    }
+
+    const snapshotId = snapshot ? uniqueId('snapshot') : null
+    if (snapshotId && snapshot) {
+      snapshotRegistry[snapshotId] = snapshot
+    }
+    this.store.dispatch((model) => {
+      if (model.items[itemId]) {
+        model.items[itemId].snapshotId = snapshotId
+      }
+    })
+  }
+}
diff --git a/core-client/src/stage/index.ts b/core-client/src/stage/index.ts
index 452dead..34928b9 100644
--- a/core-client/src/stage/index.ts
+++ b/core-client/src/stage/index.ts
@@ -51,7 +51,10 @@ export function createTapestryStage<PixiApps extends string>(
   return stage
 }
 
-export async function createPixiApp(container: HTMLDivElement, opts?: Partial<ApplicationOptions>) {
+export async function createPixiApp(
+  container: HTMLElement,
+  opts?: Partial<Omit<ApplicationOptions, 'canvas'>>,
+) {
   const app = new Application()
 
   await app.init({
@@ -59,8 +62,9 @@ export async function createPixiApp(container: HTMLDivElement, opts?: Partial<Ap
     resizeTo: container,
     antialias: true,
     autoDensity: true,
-    resolution: 2,
-    eventMode: 'static',
+    resolution: Math.max(2, window.devicePixelRatio),
+    roundPixels: true,
+    eventMode: 'passive',
     sharedTicker: true,
     ...opts,
   })
diff --git a/core-client/src/stage/renderer/group-background-renderer.ts b/core-client/src/stage/renderer/group-background-renderer.ts
new file mode 100644
index 0000000..c1ff438
--- /dev/null
+++ b/core-client/src/stage/renderer/group-background-renderer.ts
@@ -0,0 +1,113 @@
+import { Graphics } from 'pixi.js'
+import { Store } from '../../lib/store'
+import { GroupViewModel, TapestryViewModel } from '../../view-model'
+import { TapestryStage } from '..'
+import {
+  computeRestrictedScale,
+  getBoundingRectangle,
+  getGroupMembers,
+  MULTISELECT_RECTANGLE_PADDING,
+} from '../../view-model/utils'
+import { idMapToArray } from 'tapestry-core/src/utils'
+import { drawDashedPolyline, roundedRectPolyline } from '../../lib/pixi'
+import { getOpaqueColor, LiteralColor } from '../../theme/types'
+import { Point, Rectangle, Size } from 'tapestry-core/src/lib/geometry'
+import { clamp } from 'lodash-es'
+import { ThemeName, THEMES } from '../../theme/themes'
+import { TapestryElementRenderer } from './tapestry-element-renderer'
+import { roundToPrecision } from 'tapestry-core/src/lib/algebra'
+
+export interface GroupBackgroundRenderState {
+  origin: Point
+  size: Size
+  backgroundColor: LiteralColor | null
+  borderColor: LiteralColor | null
+  borderScale: number
+  isSelected: boolean
+  theme: ThemeName
+}
+
+const ZOOM_STEP = 0.5
+
+export class GroupBackgroundRenderer<G extends GroupViewModel> extends TapestryElementRenderer<
+  G,
+  GroupBackgroundRenderState
+> {
+  private background = new Graphics({ eventMode: 'static' })
+  private border = new Graphics({ eventMode: 'none' })
+
+  constructor(store: Store<TapestryViewModel>, stage: TapestryStage, viewModel: G) {
+    super(store, stage, viewModel)
+    this.pixiContainer.addChild(this.background, this.border)
+  }
+
+  protected obtainRenderState(
+    viewModel: G,
+    store: Store<TapestryViewModel>,
+  ): GroupBackgroundRenderState {
+    const { id, color, hasBackground, hasBorder } = viewModel.dto
+    const isSelected = store.get('selection.groupIds').has(id)
+    const groupMembers = getGroupMembers(id, idMapToArray(store.get('items')))
+    const bounds = getBoundingRectangle(groupMembers).expand(MULTISELECT_RECTANGLE_PADDING)
+    const backgroundColor = (hasBackground && color) || null
+    const borderColor = hasBorder && color ? getOpaqueColor(color) : null
+    const scale = store.get('viewport.transform.scale')
+    const borderScale =
+      computeRestrictedScale(store.get('viewport'), idMapToArray(store.get('items'))) / scale
+
+    return {
+      origin: bounds.position,
+      size: bounds.size,
+      backgroundColor,
+      borderColor,
+      borderScale: roundToPrecision(borderScale, ZOOM_STEP, 'ceil'),
+      isSelected,
+      theme: store.get('theme'),
+    }
+  }
+
+  doRender(state: GroupBackgroundRenderState) {
+    const radius = 16
+    const borderWidth = 2 * state.borderScale
+
+    this.background.clear()
+    if (state.isSelected || state.backgroundColor || state.borderColor) {
+      this.background.roundRect(
+        state.origin.x,
+        state.origin.y,
+        state.size.width,
+        state.size.height,
+        state.isSelected ? 0 : radius,
+      )
+      const defaultColor = state.isSelected
+        ? THEMES[state.theme].color('background.brand')
+        : 'transparent'
+      this.background.fill({
+        color: state.backgroundColor ?? defaultColor,
+        alpha: state.backgroundColor ? 1 : 0.1,
+      })
+      if (state.isSelected) {
+        this.background.stroke({
+          width: borderWidth,
+          color: state.borderColor ?? defaultColor,
+        })
+      }
+    }
+
+    this.border.clear()
+    if (state.borderColor && !state.isSelected) {
+      const bounds = new Rectangle(state.origin, state.size)
+      drawDashedPolyline(
+        this.border,
+        roundedRectPolyline(bounds, radius, clamp(Math.round(12 / state.borderScale), 4, 16)),
+        Math.round(6 * state.borderScale),
+        Math.round(6 * state.borderScale),
+      )
+      this.border.stroke({
+        width: borderWidth,
+        color: state.borderColor,
+        cap: 'square',
+      })
+    }
+  }
+}
diff --git a/core-client/src/stage/renderer/index.ts b/core-client/src/stage/renderer/index.ts
index b2d6a55..d9ab02b 100644
--- a/core-client/src/stage/renderer/index.ts
+++ b/core-client/src/stage/renderer/index.ts
@@ -1,21 +1,26 @@
 import { CSSProperties } from 'react'
 import { TapestryElementRenderer } from './tapestry-element-renderer'
 import { RelRenderer } from './rel-renderer'
-import { ContainerChild, Graphics } from 'pixi.js'
+import { Container, Graphics } from 'pixi.js'
 import { THEMES } from '../../theme/themes'
 import { Store } from '../../lib/store/index'
 import { idMapToArray } from 'tapestry-core/src/utils'
 import {
+  GroupViewModel,
   ItemViewModel,
   PointerInteraction,
   RelViewModel,
+  Selection,
+  TapestryElementRef,
   TapestryElementViewModel,
   TapestryViewModel,
 } from '../../view-model'
 import { TapestryStage } from '..'
 import { TapestryStageController } from '../controller'
-import { isRelViewModel } from '../../view-model/utils'
+import { isItemViewModel, isRelViewModel } from '../../view-model/utils'
 import { isHoveredElement } from '../utils'
+import { ItemRenderer } from './item-renderer'
+import { GroupBackgroundRenderer } from './group-background-renderer'
 
 export interface Renderer<T = unknown> {
   render(arg: T): void
@@ -36,14 +41,19 @@ const SCENE_CURSOR_CLASS = 'scene-cursor'
 const SCENE_CURSOR_VARIABLE = '--scene-cursor'
 
 export abstract class TapestryRenderer<
-  E extends TapestryElementViewModel,
+  E extends TapestryElementViewModel | GroupViewModel,
 > implements TapestryStageController {
-  private tapestryElementRenderers = new Map<string, TapestryElementRenderer<E>>()
+  private tapestryElementRenderers = new Map<string, TapestryElementRenderer<E, object>>()
+
+  private world = new Container()
+  private selected = new Container()
 
   constructor(
     protected store: Store<TapestryViewModel>,
     protected stage: TapestryStage,
-  ) {}
+  ) {
+    this.stage.pixi.tapestry.stage.addChild(this.world, this.selected)
+  }
 
   boundRender = this.render.bind(this)
 
@@ -57,6 +67,10 @@ export abstract class TapestryRenderer<
     this.tapestryElementRenderers.forEach((r) => r.dispose())
   }
 
+  protected getGroups() {
+    return idMapToArray(this.store.get('groups')) as (E & GroupViewModel)[]
+  }
+
   protected abstract getItems(): (E & ItemViewModel)[]
 
   protected abstract getRels(): (E & RelViewModel)[]
@@ -68,12 +82,14 @@ export abstract class TapestryRenderer<
   protected render() {
     this.removeMissingStageItems()
 
-    this.getRels().forEach(this.renderViewModel.bind(this))
-    this.getItems().forEach(this.renderViewModel.bind(this))
+    const selection = this.store.get('selection')
+    const interactiveElement = this.store.get('interactiveElement')
+    this.getGroups().forEach((group) => this.renderViewModel(group, selection, interactiveElement))
+    this.getRels().forEach((rel) => this.renderViewModel(rel, selection, interactiveElement))
+    this.getItems().forEach((item) => this.renderViewModel(item, selection, interactiveElement))
 
     this.renderSelectionRect()
 
-    this.updateItemZOrder()
     this.updateViewportTransformation()
     this.updatePointer()
     this.updateTheme()
@@ -152,34 +168,11 @@ export abstract class TapestryRenderer<
     }
   }
 
-  protected updateItemZOrder() {
-    const { selection, interactiveElement } = this.store.get()
-    if (selection.itemIds.size === 0 && selection.groupIds.size === 0 && !interactiveElement) return
-
-    const selectedContainerIds = new Set(
-      idMapToArray(this.store.get('items')).map((i) => TapestryElementRenderer.getContainerId(i)),
-    )
-    if (interactiveElement?.modelType === 'rel') {
-      const rel = this.store.get('rels')[interactiveElement.modelId]
-      // TODO: Remove this non-null check when the Store becomes consistent after undo stack updates
-      if (rel) {
-        selectedContainerIds.add(TapestryElementRenderer.getContainerId(rel))
-      }
-    }
-    const pixiContainer = this.stage.pixi.tapestry.stage
-    let firstSelectedIndex = pixiContainer.children.findIndex((child) =>
-      selectedContainerIds.has(child.label),
-    )
-    for (let i = firstSelectedIndex + 1; i < pixiContainer.children.length; i += 1) {
-      const child = pixiContainer.getChildAt<ContainerChild>(i)
-      if (!selectedContainerIds.has(child.label)) {
-        pixiContainer.setChildIndex(child, firstSelectedIndex)
-        firstSelectedIndex += 1
-      }
-    }
-  }
-
-  protected renderViewModel(viewModel?: E | null) {
+  protected renderViewModel(
+    viewModel?: E | null,
+    selection?: Selection,
+    interactiveElement?: TapestryElementRef | null,
+  ) {
     if (!viewModel) {
       return
     }
@@ -192,13 +185,36 @@ export abstract class TapestryRenderer<
       this.tapestryElementRenderers.set(id, renderer)
     }
 
+    const isSelected = this.isSelected(viewModel, selection, interactiveElement)
+
+    const container = isSelected ? this.selected : this.world
+    if (renderer.pixiContainer.parent !== container) {
+      container.addChild(renderer.pixiContainer)
+    }
+
     renderer.render(viewModel)
   }
 
+  protected isSelected(
+    viewModel: E,
+    selection?: Selection,
+    interactiveElement?: TapestryElementRef | null,
+  ) {
+    return (
+      selection?.itemIds.has(viewModel.dto.id) ||
+      selection?.groupIds.has(viewModel.dto.id) ||
+      interactiveElement?.modelId === viewModel.dto.id ||
+      (isItemViewModel(viewModel) &&
+        viewModel.dto.groupId &&
+        selection?.groupIds.has(viewModel.dto.groupId))
+    )
+  }
+
   protected getRenderedTapestryElementIds() {
     return new Set([
-      ...idMapToArray<TapestryElementViewModel>(this.store.get('items'))
+      ...idMapToArray<TapestryElementViewModel | GroupViewModel>(this.store.get('items'))
         .concat(idMapToArray(this.store.get('rels')))
+        .concat(idMapToArray(this.store.get('groups')))
         .map((elem) => TapestryElementRenderer.getContainerId(elem)),
     ])
   }
@@ -214,11 +230,11 @@ export abstract class TapestryRenderer<
     }
   }
 
-  protected createTapestryElementRenderer(model: E): TapestryElementRenderer<E> {
-    if (isRelViewModel(model)) {
-      return new RelRenderer(this.store, this.stage, model)
-    }
-
-    return new (class extends TapestryElementRenderer<E> {})(this.store, this.stage, model)
+  protected createTapestryElementRenderer(model: E): TapestryElementRenderer<E, object> {
+    return isRelViewModel(model)
+      ? new RelRenderer(this.store, this.stage, model)
+      : isItemViewModel(model)
+        ? new ItemRenderer(this.store, this.stage, model)
+        : new GroupBackgroundRenderer(this.store, this.stage, model as E & GroupViewModel)
   }
 }
diff --git a/core-client/src/stage/renderer/item-renderer.ts b/core-client/src/stage/renderer/item-renderer.ts
new file mode 100644
index 0000000..3842ef3
--- /dev/null
+++ b/core-client/src/stage/renderer/item-renderer.ts
@@ -0,0 +1,184 @@
+import { Rectangle, Texture } from 'pixi.js'
+import { TapestryStage } from '..'
+import { Store } from '../../lib/store'
+import { ItemViewModel, TapestryViewModel } from '../../view-model'
+import { obtainShadowNineSlice, ShadowNineSlice } from './shadow-texture-cache'
+import { TapestryElementRenderer } from './tapestry-element-renderer'
+import { ThumbnailContainer, ThumbnailContainerState } from './thumbnail-container'
+import { IdMap } from 'tapestry-core/src/utils'
+import { THEMES } from '../../theme/themes'
+import { LiteralColor } from '../../theme/types'
+import { getItemOverlayScale } from '../../view-model/utils'
+import { roundToPrecision } from 'tapestry-core/src/lib/algebra'
+
+export const snapshotRegistry: IdMap<Texture> = {}
+
+export interface ItemRenderState<I extends ItemViewModel> {
+  viewModel: I
+  isInteractive: boolean
+  disableOptimizations?: boolean
+  iconColor?: LiteralColor
+  iconBackgroundColor?: LiteralColor
+  dropShadow?: ShadowNineSlice
+}
+
+type Icons = Record<
+  'videoWebpage' | 'video' | 'audio' | 'pdf',
+  (
+    color: LiteralColor | undefined,
+    background: LiteralColor | undefined,
+    scale: number,
+  ) => { minSize: number; icon: ThumbnailContainerState['icon'] }
+>
+
+const ICON_SIZE_STEP = 10
+const ICONS: Icons = {
+  videoWebpage: (color, background, scale) => {
+    const size = roundToPrecision(100 * scale, ICON_SIZE_STEP)
+    return {
+      minSize: 220,
+      icon: {
+        background,
+        props: {
+          iconName: 'videocam',
+          size,
+          color,
+          fontSize: Math.round(0.6 * size),
+        },
+      },
+    }
+  },
+  video: (color, background, scale) => ({
+    minSize: 220,
+    icon: {
+      background,
+      props: {
+        iconName: 'play_arrow',
+        size: roundToPrecision(100 * scale, ICON_SIZE_STEP),
+        color,
+      },
+    },
+  }),
+  audio: (color, background, scale) => {
+    const size = roundToPrecision(100 * scale, ICON_SIZE_STEP)
+    return {
+      minSize: 220,
+      icon: {
+        background,
+        props: {
+          iconName: 'volume_up',
+          size,
+          color,
+          fontSize: Math.round(0.75 * size),
+        },
+      },
+    }
+  },
+  pdf: (color, background, scale) => {
+    const size = roundToPrecision(80 * scale, ICON_SIZE_STEP)
+    return {
+      minSize: 200,
+      icon: {
+        background,
+        props: {
+          iconName: 'picture_as_pdf',
+          size,
+          color,
+          fontSize: Math.round(0.625 * size),
+        },
+      },
+    }
+  },
+}
+
+export class ItemRenderer<I extends ItemViewModel> extends TapestryElementRenderer<
+  I,
+  ItemRenderState<I>
+> {
+  private thumbnail: ThumbnailContainer
+
+  constructor(store: Store<TapestryViewModel>, stage: TapestryStage, viewModel: I) {
+    super(store, stage, viewModel)
+    this.thumbnail = new ThumbnailContainer(
+      null,
+      { borderRadius: 8, thumbnailPlacement: viewModel.dto.type === 'image' ? 'stretch' : 'cover' },
+      { label: `thumbnail-container-${viewModel.dto.id}`, interactiveChildren: false },
+    )
+    this.pixiContainer.addChild(this.thumbnail)
+    this.pixiContainer.eventMode = 'static'
+  }
+
+  protected doRender(state: ItemRenderState<I>): void {
+    this.updateHitArea(state)
+    this.updateThumbnail(state)
+  }
+
+  protected obtainRenderState(
+    viewModel: I,
+    store: Store<TapestryViewModel>,
+    stage: TapestryStage,
+  ): ItemRenderState<I> {
+    const theme = THEMES[store.get('theme')]
+    return {
+      viewModel,
+      isInteractive: store.get('interactiveElement.modelId') === viewModel.dto.id,
+      disableOptimizations: store.get('disableOptimizations'),
+      iconColor: theme.color('background.primary'),
+      iconBackgroundColor: theme.color('background.mono'),
+      dropShadow: viewModel.dto.dropShadow
+        ? obtainShadowNineSlice(stage.pixi.tapestry.renderer, 8)
+        : undefined,
+    }
+  }
+
+  private updateHitArea({ viewModel }: ItemRenderState<I>) {
+    const { position, size } = viewModel.dto
+    this.pixiContainer.hitArea = new Rectangle(position.x, position.y, size.width, size.height)
+  }
+
+  private updateThumbnail({
+    viewModel,
+    isInteractive,
+    disableOptimizations,
+    iconColor,
+    iconBackgroundColor,
+    dropShadow,
+  }: ItemRenderState<I>) {
+    const snapshot = viewModel.snapshotId && snapshotRegistry[viewModel.snapshotId]
+    if (disableOptimizations || isInteractive || viewModel.isPlaying || !snapshot) {
+      this.thumbnail.visible = false
+    } else {
+      const { position, size } = viewModel.dto
+      this.thumbnail.visible = true
+      this.thumbnail.texture = snapshot
+      this.thumbnail.position = position
+      this.thumbnail.update({
+        size,
+        icon: this.obtainIconOverlay(viewModel, iconColor, iconBackgroundColor),
+        dropShadow,
+      })
+    }
+  }
+
+  private obtainIconOverlay(
+    viewModel: I,
+    color: LiteralColor | undefined,
+    backgroundColor: LiteralColor | undefined,
+  ) {
+    const { type, size } = viewModel.dto
+    const isVideoWebpage =
+      type === 'webpage' &&
+      ['iaVideo', 'youtube', 'vimeo'].includes(viewModel.dto.webpageType ?? '')
+
+    const iconKey: keyof Icons | undefined = isVideoWebpage
+      ? 'videoWebpage'
+      : type === 'audio' || type === 'video' || type === 'pdf'
+        ? type
+        : undefined
+
+    const scale = getItemOverlayScale(size)
+    const { minSize = 0, icon } = (iconKey && ICONS[iconKey](color, backgroundColor, scale)) ?? {}
+
+    return Math.min(size.width, size.height) > minSize ? icon : undefined
+  }
+}
diff --git a/core-client/src/stage/renderer/rel-renderer.tsx b/core-client/src/stage/renderer/rel-renderer.ts
similarity index 70%
rename from core-client/src/stage/renderer/rel-renderer.tsx
rename to core-client/src/stage/renderer/rel-renderer.ts
index f63e2f4..1174673 100644
--- a/core-client/src/stage/renderer/rel-renderer.tsx
+++ b/core-client/src/stage/renderer/rel-renderer.ts
@@ -2,7 +2,7 @@ import { Graphics, Point, StrokeStyle } from 'pixi.js'
 import { TapestryElementRenderer } from './tapestry-element-renderer'
 import { mul, Point as TapestryPoint, translate, Vector } from 'tapestry-core/src/lib/geometry'
 import { Store } from '../../lib/store/index'
-import { IdMap, idMapToArray } from 'tapestry-core/src/utils'
+import { IdMap } from 'tapestry-core/src/utils'
 import { isHoveredElement } from '../utils'
 import {
   computeRelCurvePoints,
@@ -10,9 +10,8 @@ import {
   REL_ARROWHEAD_SIZES,
   REL_LINE_WIDTHS,
 } from '../../view-model/rel-geometry'
-import { ItemViewModel, RelViewModel, TapestryViewModel, Viewport } from '../../view-model'
+import { ItemViewModel, RelViewModel, TapestryViewModel } from '../../view-model'
 import { TapestryStage } from '..'
-import { computeRestrictedScale } from '../../view-model/utils'
 
 const DEFAULT_REL_Z_INDEX = 0
 const LINE_SMOOTHNESS = 0.7
@@ -41,7 +40,17 @@ export function drawCurve(gfx: Graphics, curve: Curve, part: 'full' | 'head' | '
   return gfx
 }
 
-export class RelRenderer<R extends RelViewModel> extends TapestryElementRenderer<R> {
+export interface RelRenderState<R extends RelViewModel> {
+  viewModel: R
+  fromItem: ItemViewModel
+  toItem: ItemViewModel
+  isHighlighted: boolean
+}
+
+export class RelRenderer<R extends RelViewModel> extends TapestryElementRenderer<
+  R,
+  RelRenderState<R>
+> {
   private line: Graphics
   private lineHighlightFrom: Graphics
   private lineHighlightTo: Graphics
@@ -63,12 +72,35 @@ export class RelRenderer<R extends RelViewModel> extends TapestryElementRenderer
     this.pixiContainer.addChild(this.toArrowhead)
   }
 
-  protected computeRelCurvePoints(viewModel: R, viewport: Viewport, items: IdMap<ItemViewModel>) {
-    return computeRelCurvePoints(viewModel, viewport, items)
+  protected computeRelCurvePoints(viewModel: R, items: IdMap<ItemViewModel>) {
+    return computeRelCurvePoints(viewModel, items)
+  }
+
+  protected obtainRenderState(viewModel: R, store: Store<TapestryViewModel>): RelRenderState<R> {
+    const { id, from, to } = viewModel.dto
+    const { items } = store.get()
+    const fromItem = items[from.itemId]!
+    const toItem = items[to.itemId]!
+    const isInteractive = id === store.get('interactiveElement.modelId')
+    const pointerInteractionTarget = store.get('pointerInteraction.target')
+    return {
+      viewModel,
+      fromItem,
+      toItem,
+      isHighlighted:
+        isInteractive ||
+        (isHoveredElement(pointerInteractionTarget) && pointerInteractionTarget.modelId === id),
+    }
   }
 
-  protected renderInternal(viewModel: R) {
-    const res = super.renderInternal(viewModel)
+  protected doRender(state: RelRenderState<R>, changedKeys: (keyof RelRenderState<R>)[]) {
+    if (changedKeys.length === 1 && changedKeys[0] === 'isHighlighted') {
+      // No need to redraw the paths, just update the highlights, if necessary
+      this.lineHighlightFrom.alpha = this.lineHighlightTo.alpha = state.isHighlighted ? 0.1 : 0
+      return
+    }
+
+    const { from, to, color, weight } = state.viewModel.dto
 
     this.line.clear()
     this.lineHighlightFrom.clear()
@@ -76,39 +108,29 @@ export class RelRenderer<R extends RelViewModel> extends TapestryElementRenderer
     this.fromArrowhead.clear()
     this.toArrowhead.clear()
 
-    const { viewport, items } = this.store.get()
-    const curve = this.computeRelCurvePoints(viewModel, viewport, items)
-    const { id, from, to, color, weight } = viewModel.dto
+    const curve = this.computeRelCurvePoints(state.viewModel, {
+      [state.fromItem.dto.id]: state.fromItem,
+      [state.toItem.dto.id]: state.toItem,
+    })
 
-    const arrowheadScale =
-      computeRestrictedScale(viewport, idMapToArray(items), {
-        min: 4 / REL_ARROWHEAD_SIZES[weight],
-      }) / viewport.transform.scale
-    const arrowHeadSize = REL_ARROWHEAD_SIZES[weight] * arrowheadScale
-    const lineStrokeScale =
-      computeRestrictedScale(viewport, idMapToArray(items)) / viewport.transform.scale
-    const lineStrokeWidth = REL_LINE_WIDTHS[weight] * lineStrokeScale
+    const arrowHeadSize = REL_ARROWHEAD_SIZES[weight]
+    const lineStrokeWidth = REL_LINE_WIDTHS[weight]
 
     // Instead of a single cubic Bezier curve, draw two quadratic Bezier curves joined in the middle.
     // This way we will have two separate segments of the curve and we will be able to handle
     // user interactions with them more easily.
     drawCurve(this.line, curve).stroke({ width: lineStrokeWidth, color, cap: 'square' })
 
-    const isActive = id === this.store.get('interactiveElement.modelId')
-    const pointerInteractionTarget = this.store.get('pointerInteraction.target')
     const highlightStrokeStyle: StrokeStyle = {
       width: 4 * lineStrokeWidth,
-      color:
-        isActive ||
-        (isHoveredElement(pointerInteractionTarget) && pointerInteractionTarget.modelId === id)
-          ? color
-          : 'transparent',
+      color: 'white',
       cap: 'butt',
-      alpha: 0.1,
     }
 
     drawCurve(this.lineHighlightFrom, curve, 'head').stroke(highlightStrokeStyle)
     drawCurve(this.lineHighlightTo, curve, 'tail').stroke(highlightStrokeStyle)
+    this.lineHighlightFrom.tint = this.lineHighlightTo.tint = color
+    this.lineHighlightFrom.alpha = this.lineHighlightTo.alpha = state.isHighlighted ? 0.1 : 0
 
     if (from.arrowhead === 'arrow') {
       this.drawArrowhead(
@@ -131,8 +153,6 @@ export class RelRenderer<R extends RelViewModel> extends TapestryElementRenderer
         lineStrokeWidth,
       )
     }
-
-    return res
   }
 
   private drawArrowhead(
diff --git a/core-client/src/stage/renderer/shadow-texture-cache.ts b/core-client/src/stage/renderer/shadow-texture-cache.ts
new file mode 100644
index 0000000..f3da585
--- /dev/null
+++ b/core-client/src/stage/renderer/shadow-texture-cache.ts
@@ -0,0 +1,69 @@
+import { DropShadowFilter } from 'pixi-filters'
+import { Graphics, Renderer, Rectangle as PixiRectangle, Texture, Sprite, Container } from 'pixi.js'
+
+export interface ShadowNineSlice {
+  texture: Texture
+  inset: number
+}
+
+const cache = new Map<number, ShadowNineSlice>()
+
+export function obtainShadowNineSlice(renderer: Renderer, borderRadius: number) {
+  if (cache.has(borderRadius)) {
+    return cache.get(borderRadius)
+  }
+
+  const shadows = [
+    // Note that CSS uses Gaussian blurs for drop shadows and Pixi uses Kawase blur filters, so blur and alpha values
+    // don't translate 1-to-1 between CSS and Pixi! The values below approximately match the following CSS rule:
+    //    box-shadow: 0 1px 3px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 30%);
+    new DropShadowFilter({
+      color: 0x000000,
+      alpha: 0.3,
+      blur: 0.5,
+      offset: { x: 0, y: 1 },
+    }),
+    new DropShadowFilter({
+      color: 0x000000,
+      alpha: 0.4,
+      blur: 0.2,
+      offset: { x: 0, y: 1 },
+    }),
+  ]
+
+  shadows.forEach((shadow) => {
+    shadow.padding = 8
+  })
+
+  const margin = 8 // Margin should be sufficient to fit shadow blur + offset
+  const rectSize = 128 // A small area that is meant to be stretched in a 9-slice
+
+  const graphics = new Graphics()
+    .beginPath()
+    .roundRect(margin + 1, margin + 1, rectSize - 2, rectSize - 2, borderRadius)
+    .fill({ color: 0x000000, alpha: 1 })
+  graphics.filters = shadows
+
+  const size = rectSize + 2 * margin
+  const solidTexture = renderer.generateTexture({
+    target: graphics,
+    frame: new PixiRectangle(0, 0, size, size),
+  })
+
+  const eraser = new Graphics()
+    .roundRect(margin, margin, rectSize, rectSize, borderRadius)
+    .fill({ color: 0xffffff })
+  eraser.blendMode = 'erase'
+
+  const shadowSprite = new Sprite(solidTexture)
+  const container = new Container({ children: [shadowSprite, eraser] })
+  const texture = renderer.generateTexture({
+    target: container,
+    frame: new PixiRectangle(0, 0, size, size),
+  })
+
+  const shadowNineSlice = { texture, inset: margin + borderRadius }
+  cache.set(borderRadius, shadowNineSlice)
+
+  return shadowNineSlice
+}
diff --git a/core-client/src/stage/renderer/tapestry-element-renderer.ts b/core-client/src/stage/renderer/tapestry-element-renderer.ts
index 4387313..0eda7af 100644
--- a/core-client/src/stage/renderer/tapestry-element-renderer.ts
+++ b/core-client/src/stage/renderer/tapestry-element-renderer.ts
@@ -1,54 +1,83 @@
-import { TapestryElementRef, TapestryElementViewModel, TapestryViewModel } from '../../view-model'
+import {
+  GroupModelRef,
+  GroupViewModel,
+  TapestryElementRef,
+  TapestryElementViewModel,
+  TapestryViewModel,
+} from '../../view-model'
 import { Renderer } from '.'
 import { Container, ContainerChild, ContainerOptions } from 'pixi.js'
 import { Store } from '../../lib/store/index'
-import { getType, isRelViewModel } from '../../view-model/utils'
+import { getType, isItemViewModel, isRelViewModel } from '../../view-model/utils'
 import { TapestryStage } from '..'
+import { get, isEqual } from 'lodash'
 
 export class ViewContainer<C extends ContainerChild = ContainerChild> extends Container<C> {
-  public readonly tapestryElement: TapestryElementRef
-  constructor(viewModel: TapestryElementViewModel, options?: ContainerOptions<C>) {
+  public readonly modelRef: TapestryElementRef | GroupModelRef
+
+  constructor(viewModel: TapestryElementViewModel | GroupViewModel, options?: ContainerOptions<C>) {
     super(options)
     if (isRelViewModel(viewModel)) {
-      this.tapestryElement = {
+      this.modelRef = {
         modelType: 'rel',
         modelId: viewModel.dto.id,
       }
-    } else {
-      this.tapestryElement = {
+    } else if (isItemViewModel(viewModel)) {
+      this.modelRef = {
         modelType: 'item',
         modelId: viewModel.dto.id,
       }
+    } else {
+      this.modelRef = {
+        modelType: 'group',
+        modelId: viewModel.dto.id,
+      }
     }
   }
 }
 
 export abstract class TapestryElementRenderer<
-  T extends TapestryElementViewModel,
+  T extends TapestryElementViewModel | GroupViewModel,
+  R extends object,
 > implements Renderer<T> {
-  protected lastRenderedModel?: T
-  protected pixiContainer: ViewContainer
+  public readonly pixiContainer: ViewContainer
+
+  private lastRenderedState?: R
 
   constructor(
-    protected store: Store<TapestryViewModel>,
-    protected stage: TapestryStage,
-    protected viewModel: T,
+    private store: Store<TapestryViewModel>,
+    private stage: TapestryStage,
+    viewModel: T,
   ) {
     const containerId = TapestryElementRenderer.getContainerId(viewModel)
     this.pixiContainer = new ViewContainer(viewModel, { label: containerId })
-    stage.pixi.tapestry.stage.addChild(this.pixiContainer)
   }
 
   render(viewModel: T) {
-    this.renderInternal(viewModel)
-    this.lastRenderedModel = viewModel
+    this.checkMatchingModel(viewModel)
+
+    const renderState = this.obtainRenderState(viewModel, this.store, this.stage)
+    const changedKeys = (Object.keys(renderState) as (keyof R)[]).filter(
+      (key) => !isEqual(renderState[key], get(this.lastRenderedState, key)),
+    )
+    if (changedKeys.length > 0) {
+      this.doRender(renderState, changedKeys)
+      this.lastRenderedState = renderState
+    }
   }
 
   dispose(): void {
     this.pixiContainer.destroy()
   }
 
-  protected renderInternal(viewModel: T) {
+  protected abstract obtainRenderState(
+    viewModel: T,
+    store: Store<TapestryViewModel>,
+    stage: TapestryStage,
+  ): R
+  protected abstract doRender(state: R, changedKeys: (keyof R)[]): void
+
+  private checkMatchingModel(viewModel: T) {
     const containerId = this.pixiContainer.label
     const id = TapestryElementRenderer.getContainerId(viewModel)
     if (id !== containerId) {
@@ -58,7 +87,7 @@ export abstract class TapestryElementRenderer<
     }
   }
 
-  static getContainerId(viewModel: TapestryElementViewModel) {
+  static getContainerId(viewModel: TapestryElementViewModel | GroupViewModel) {
     return `${getType(viewModel)}:${viewModel.dto.id}`.replace(/:/g, '-')
   }
 }
diff --git a/core-client/src/stage/renderer/thumbnail-container.ts b/core-client/src/stage/renderer/thumbnail-container.ts
new file mode 100644
index 0000000..2698b51
--- /dev/null
+++ b/core-client/src/stage/renderer/thumbnail-container.ts
@@ -0,0 +1,230 @@
+import { Container, ContainerOptions, Graphics, NineSliceSprite, Sprite, Texture } from 'pixi.js'
+import { ORIGIN, Rectangle, Size } from 'tapestry-core/src/lib/geometry'
+import { ShadowNineSlice } from './shadow-texture-cache'
+import { MaterialIconTextureProps, materialIconToTexture } from '../../lib/pixi'
+import { isEqual } from 'lodash-es'
+import { LiteralColor } from '../../theme/types'
+
+export interface ThumbnailContainerState {
+  size: Size
+  thumbnailPlacement: 'center' | 'fit' | 'cover' | 'stretch'
+  borderRadius: number
+  dropShadow: ShadowNineSlice | null
+  icon?: {
+    props: MaterialIconTextureProps
+    background?: LiteralColor
+  }
+}
+
+interface IconTextureCacheEntry {
+  props: MaterialIconTextureProps
+  texture: Texture
+  refCount: number
+}
+
+const iconTextureCache: IconTextureCacheEntry[] = []
+
+function obtainIconTexture(props: MaterialIconTextureProps) {
+  const cacheEntry = iconTextureCache.find((entry) => isEqual(entry.props, props))
+  if (cacheEntry) {
+    cacheEntry.refCount += 1
+    return cacheEntry.texture
+  }
+
+  const texture = materialIconToTexture(props)
+  iconTextureCache.push({ props, texture, refCount: 1 })
+  return texture
+}
+
+function releaseIconTexture(texture: Texture) {
+  const cacheEntryIndex = iconTextureCache.findIndex((entry) => entry.texture === texture)
+  if (cacheEntryIndex >= 0) {
+    const cacheEntry = iconTextureCache[cacheEntryIndex]
+    cacheEntry.refCount -= 1
+    if (cacheEntry.refCount === 0) {
+      cacheEntry.texture.destroy(true)
+      iconTextureCache.splice(cacheEntryIndex, 1)
+    }
+  }
+}
+
+export class ThumbnailContainer extends Container {
+  private state: ThumbnailContainerState
+  private shadowSprite?: NineSliceSprite
+  private thumbnailContainer = new Container()
+  private thumbnail?: Sprite
+  private cornersMask = new Graphics()
+  private iconBackground?: Graphics
+  private iconSprite?: Sprite
+  private renderedIconProps?: MaterialIconTextureProps
+  private renderedIconBackgroundProps?: { color: LiteralColor; radius: number }
+
+  constructor(
+    texture: Texture | null,
+    thumbnailOpts: Partial<ThumbnailContainerState> = {},
+    containerOpts: ContainerOptions = {},
+  ) {
+    super(containerOpts)
+    this.state = {
+      size: { width: 200, height: 150 },
+      thumbnailPlacement: 'cover',
+      borderRadius: 8,
+      dropShadow: null,
+      ...thumbnailOpts,
+    }
+
+    this.addChild(this.thumbnailContainer)
+
+    this.thumbnailContainer.addChild(this.cornersMask)
+    this.thumbnailContainer.mask = this.cornersMask
+
+    if (texture) {
+      this.thumbnail = this.createSprite(texture)
+      this.thumbnailContainer.addChild(this.thumbnail)
+    }
+
+    this.update()
+  }
+
+  private createSprite(texture: Texture) {
+    const sprite = new Sprite(texture)
+    sprite.width = this.state.size.width
+    sprite.height = this.state.size.height
+    return sprite
+  }
+
+  update(thumbnailOpts: Partial<ThumbnailContainerState> = {}) {
+    Object.assign(this.state, thumbnailOpts)
+
+    this.roundCorners()
+    this.fitThumbnail()
+    this.applyShadow()
+    this.updateIconBackground()
+    this.updateIconTexture()
+    this.updateIconPosition()
+  }
+
+  set texture(newTexture: Texture | null) {
+    if (this.thumbnail) {
+      this.thumbnailContainer.removeChild(this.thumbnail)
+      this.thumbnail.destroy()
+      this.thumbnail = undefined
+    }
+    if (newTexture) {
+      this.thumbnail = this.createSprite(newTexture)
+      this.thumbnailContainer.addChild(this.thumbnail)
+    }
+    this.fitThumbnail()
+  }
+
+  private roundCorners() {
+    this.cornersMask.clear()
+    const { size, borderRadius } = this.state
+    this.cornersMask.roundRect(0, 0, size.width, size.height, borderRadius)
+    this.cornersMask.fill(0xffffff)
+  }
+
+  private fitThumbnail() {
+    if (!this.thumbnail) return
+
+    const { texture } = this.thumbnail
+    const containerBounds = new Rectangle(ORIGIN, this.state.size)
+    let thumbnailBounds: Rectangle
+    if (this.state.thumbnailPlacement === 'center') {
+      thumbnailBounds = new Rectangle(
+        containerBounds.center.x - texture.width / 2,
+        containerBounds.center.y - texture.height / 2,
+        texture.width,
+        texture.height,
+      )
+    } else if (this.state.thumbnailPlacement === 'fit') {
+      thumbnailBounds = Rectangle.fittedInto(containerBounds, texture.width / texture.height)
+    } else if (this.state.thumbnailPlacement === 'cover') {
+      thumbnailBounds = Rectangle.covering(containerBounds, texture.width / texture.height)
+    } else {
+      thumbnailBounds = containerBounds
+    }
+    this.thumbnail.scale.set(
+      thumbnailBounds.width / texture.width,
+      thumbnailBounds.height / texture.height,
+    )
+    this.thumbnail.x = thumbnailBounds.left
+    this.thumbnail.y = thumbnailBounds.top
+  }
+
+  private applyShadow() {
+    if (this.state.dropShadow) {
+      const { texture, inset } = this.state.dropShadow
+      if (!this.shadowSprite) {
+        this.shadowSprite = new NineSliceSprite({
+          texture,
+          leftWidth: inset,
+          topHeight: inset,
+          rightWidth: inset,
+          bottomHeight: inset,
+        })
+        this.addChildAt(this.shadowSprite, 0)
+      }
+      this.shadowSprite.x = -inset + this.state.borderRadius
+      this.shadowSprite.y = -inset + this.state.borderRadius
+      this.shadowSprite.width = this.state.size.width + inset
+      this.shadowSprite.height = this.state.size.height + inset
+    } else if (this.shadowSprite) {
+      this.shadowSprite.destroy()
+      this.shadowSprite = undefined
+    }
+  }
+
+  private updateIconBackground() {
+    const { icon } = this.state
+    const radius = (icon?.props.size ?? 24) / 2
+    const newProps = icon?.background ? { color: icon.background, radius } : undefined
+    if (isEqual(newProps, this.renderedIconBackgroundProps)) return
+
+    this.renderedIconBackgroundProps = newProps
+    if (!newProps) {
+      this.iconBackground?.destroy()
+      this.iconBackground = undefined
+      return
+    }
+
+    if (this.iconBackground) {
+      this.iconBackground.clear()
+    } else {
+      this.iconBackground = new Graphics({ zIndex: 1 })
+      this.thumbnailContainer.addChild(this.iconBackground)
+    }
+
+    this.iconBackground.circle(radius, radius, radius).fill({ color: newProps.color, alpha: 0.5 })
+  }
+
+  private updateIconTexture() {
+    if (isEqual(this.state.icon?.props, this.renderedIconProps)) return
+
+    const props = (this.renderedIconProps = this.state.icon?.props)
+
+    if (this.iconSprite) {
+      releaseIconTexture(this.iconSprite.texture)
+      this.iconSprite.destroy()
+      this.iconSprite = undefined
+    }
+
+    if (!props) return
+
+    this.iconSprite = new Sprite({ texture: obtainIconTexture(props), zIndex: 1 })
+    this.thumbnailContainer.addChild(this.iconSprite)
+  }
+
+  private updateIconPosition() {
+    const center = new Rectangle(ORIGIN, this.state.size).center
+
+    if (this.iconBackground) {
+      const radius = this.renderedIconBackgroundProps!.radius
+      this.iconBackground.position.set(center.x - radius, center.y - radius)
+    }
+    if (this.iconSprite) {
+      this.iconSprite.anchor = 0.5
+      this.iconSprite.position = center
+    }
+  }
+}
diff --git a/core-client/src/stage/utils.ts b/core-client/src/stage/utils.ts
index 5674457..e3733bd 100644
--- a/core-client/src/stage/utils.ts
+++ b/core-client/src/stage/utils.ts
@@ -34,19 +34,41 @@ export function obtainHoveredDomTarget(eventTarget: HTMLElement): HoverTarget |
   return null
 }
 
-function obtainHoveredRel(path: Container[]): HoveredRel | null {
-  const viewContainerIndex = path.findIndex(
-    (c) => c instanceof ViewContainer && c.tapestryElement.modelType === 'rel',
-  )
-  if (viewContainerIndex < 0 || viewContainerIndex === path.length - 1) return null
+function obtainHoveredPixiTarget(
+  container: Container,
+): HoveredItem | HoveredRel | HoveredGroup | null {
+  let viewContainer: Container | null = container
+  while (viewContainer && !(viewContainer instanceof ViewContainer)) {
+    viewContainer = viewContainer.parent
+  }
+  if (!viewContainer || !(viewContainer instanceof ViewContainer)) {
+    return null
+  }
 
-  const { modelId } = (path[viewContainerIndex] as ViewContainer).tapestryElement
-  const handle = path[viewContainerIndex + 1].label || undefined
+  if (viewContainer.modelRef.modelType === 'rel') {
+    return {
+      type: 'rel',
+      modelId: viewContainer.modelRef.modelId,
+      uiComponent: container.label || undefined,
+    }
+  }
+
+  if (viewContainer.modelRef.modelType === 'item') {
+    return {
+      type: 'item',
+      modelId: viewContainer.modelRef.modelId,
+      // Assume that when an item is clicked in Pixi, only its drag area can be hovered
+      // XXX: Here again we assume there is a UI component called "dragArea" (see ItemController)
+      // Maybe we should generalize this concept in some way as Tapestry viewer applications
+      // would not have a "drag" area.
+      uiComponent: 'dragArea',
+    }
+  }
 
   return {
-    type: 'rel',
-    modelId,
-    uiComponent: handle,
+    type: 'group',
+    modelId: viewContainer.modelRef.modelId,
+    uiComponent: 'dragArea',
   }
 }
 
@@ -61,7 +83,7 @@ export function obtainHoverTarget(
 
   const point = toPoint(event)
   const pixiElement = stage.pixi.tapestry.renderer.events.rootBoundary.hitTest(point.x, point.y)
-  const hoveredRel = obtainHoveredRel([pixiElement.parent!, pixiElement])
+  const hoveredRel = obtainHoveredPixiTarget(pixiElement)
 
   return hoveredRel ?? hoveredDomElement
 }
diff --git a/core-client/src/theme/types.ts b/core-client/src/theme/types.ts
index 8454314..7ebe3fd 100644
--- a/core-client/src/theme/types.ts
+++ b/core-client/src/theme/types.ts
@@ -67,7 +67,7 @@ export function isOpaque(color: LiteralColor) {
 }
 
 export function getOpaqueColor(color: LiteralColor) {
-  return color.substring(0, 7)
+  return color.substring(0, 7) as LiteralColor
 }
 
 export type TypographyName = DesignSystemElement<'typography', 0>
diff --git a/core-client/src/view-model/index.ts b/core-client/src/view-model/index.ts
index c063ebd..50d3e68 100644
--- a/core-client/src/view-model/index.ts
+++ b/core-client/src/view-model/index.ts
@@ -10,6 +10,7 @@ import { PresentationStep } from 'tapestry-core/src/data-format/schemas/presenta
 import { Rel } from 'tapestry-core/src/data-format/schemas/rel.js'
 import { Tapestry } from 'tapestry-core/src/data-format/schemas/tapestry.js'
 import { IdMap } from 'tapestry-core/src/utils.js'
+import { Id } from 'tapestry-core/src/data-format/schemas/common'
 
 export const MAX_SCALE = 4
 export const MIN_RESTRICTED_SCALE = 0.5
@@ -34,7 +35,12 @@ export interface PointerSelection {
 
 export interface TapestryElementRef {
   readonly modelType: 'item' | 'rel'
-  readonly modelId: string
+  readonly modelId: Id
+}
+
+export interface GroupModelRef {
+  readonly modelType: 'group'
+  readonly modelId: Id
 }
 
 interface BaseHoverTarget {
@@ -70,7 +76,9 @@ export interface PointerInteraction {
 
 export interface ItemViewModel<I extends Item = Item> {
   readonly dto: I
+  readonly snapshotId?: string | null
   readonly hasBeenActive?: boolean
+  readonly isPlaying?: boolean
 }
 
 export interface RelViewModel<R extends Rel = Rel> {
@@ -113,7 +121,7 @@ export interface TapestryViewModel<
   readonly pointerSelection?: PointerSelection | null
   readonly interactiveElement?: TapestryElementRef | null
   readonly snackbarData?: SnackbarData
-  readonly delayItemLoad?: boolean
+  readonly disableOptimizations?: boolean
   readonly outlinedItemId?: string
   readonly searchTerm?: string | null
   readonly items: Readonly<IdMap<I>>
diff --git a/core-client/src/view-model/rel-geometry.ts b/core-client/src/view-model/rel-geometry.ts
index 1c80c2e..1e73cfb 100644
--- a/core-client/src/view-model/rel-geometry.ts
+++ b/core-client/src/view-model/rel-geometry.ts
@@ -11,9 +11,8 @@ import {
   midpoint,
 } from 'tapestry-core/src/lib/geometry.js'
 import { Range } from 'tapestry-core/src/lib/algebra.js'
-import { ItemViewModel, Viewport, RelViewModel, RelEndpointName } from './index.js'
-import { computeRestrictedScale } from './utils.js'
-import { IdMap, idMapToArray } from 'tapestry-core/src/utils.js'
+import { ItemViewModel, RelViewModel, RelEndpointName } from './index.js'
+import { IdMap } from 'tapestry-core/src/utils.js'
 import { clamp } from 'lodash-es'
 
 export const REL_ARROWHEAD_SIZES: Record<LineWeight, number> = {
@@ -109,26 +108,25 @@ export function computeCurvePoints({ from, to, controlPointOffsetRange, lineWidt
 
 export function computeRelCurvePoints<R extends RelViewModel>(
   relViewModel: R,
-  viewport: Viewport,
   items: IdMap<ItemViewModel>,
-  getArrowEndpoint = defaultGetArrowEndpoint<R>,
+  getArrowEndpoint = (relViewModel: R, endpoint: 'from' | 'to') =>
+    defaultGetArrowEndpoint(relViewModel, endpoint, items),
   computeAnchoredCurveDirection = defaultComputeAnchoredCurveDirection<R>,
 ): Curve {
-  const scale = computeRestrictedScale(viewport, idMapToArray(items), { min: 1 })
   const { from, to, weight } = relViewModel.dto
   const controlPointOffsetRange: Range = {
-    min: (4 * REL_ARROWHEAD_SIZES[weight]) / scale,
+    min: 4 * REL_ARROWHEAD_SIZES[weight],
     max: 150,
   }
 
   return computeCurvePoints({
     from: {
-      point: getArrowEndpoint(relViewModel, 'from', items),
+      point: getArrowEndpoint(relViewModel, 'from'),
       direction: computeAnchoredCurveDirection(relViewModel, 'from'),
       hasArrow: from.arrowhead === 'none',
     },
     to: {
-      point: getArrowEndpoint(relViewModel, 'to', items),
+      point: getArrowEndpoint(relViewModel, 'to'),
       direction: computeAnchoredCurveDirection(relViewModel, 'to'),
       hasArrow: to.arrowhead === 'none',
     },
diff --git a/core-client/src/view-model/store-commands/tapestry.ts b/core-client/src/view-model/store-commands/tapestry.ts
index c731465..5cc46cb 100644
--- a/core-client/src/view-model/store-commands/tapestry.ts
+++ b/core-client/src/view-model/store-commands/tapestry.ts
@@ -9,6 +9,7 @@ import {
 import { StoreMutationCommand } from '../../lib/store/index.js'
 import { isItemInSelection } from '../utils.js'
 import { idMapToArray } from 'tapestry-core/src/utils.js'
+import { Id } from 'tapestry-core/src/data-format/schemas/common.js'
 
 export function setInteractiveElement(
   element: TapestryElementRef | null,
@@ -27,6 +28,17 @@ export function setInteractiveElement(
   }
 }
 
+export function setItemIsPlaying(
+  id: Id,
+  isPlaying: boolean,
+): StoreMutationCommand<TapestryViewModel> {
+  return (model) => {
+    if (model.items[id]) {
+      model.items[id].isPlaying = isPlaying
+    }
+  }
+}
+
 export function selectGroups(ids: string[]): StoreMutationCommand<TapestryViewModel> {
   return (model) => {
     model.selection = {
diff --git a/core-client/src/view-model/utils.ts b/core-client/src/view-model/utils.ts
index 29faa3c..03dfbc4 100644
--- a/core-client/src/view-model/utils.ts
+++ b/core-client/src/view-model/utils.ts
@@ -30,6 +30,7 @@ import {
   MAX_RESTRICTED_SCALE,
   Selection,
   PresentationStepViewModel,
+  GroupViewModel,
 } from './index.js'
 import { THEMES } from '../theme/themes.js'
 import {
@@ -40,7 +41,7 @@ import {
   isItem,
 } from 'tapestry-core/src/utils.js'
 import { Range } from 'tapestry-core/src/lib/algebra.js'
-import { Item, ItemType } from 'tapestry-core/src/data-format/schemas/item.js'
+import { ImageAsset, Item, ItemType } from 'tapestry-core/src/data-format/schemas/item.js'
 import { PresentationStep } from 'tapestry-core/src/data-format/schemas/presentation-step.js'
 import { Tapestry, TapestryElement } from 'tapestry-core/src/data-format/schemas/tapestry.js'
 import { isMobile } from '../lib/user-agent.js'
@@ -112,8 +113,20 @@ export function isItemViewModel<T extends ItemViewModel = ItemViewModel>(
   )
 }
 
-export function getType(viewModel: TapestryElementViewModel): 'rel' | `item:${ItemType}` {
-  return isRelViewModel(viewModel) ? 'rel' : `item:${viewModel.dto.type}`
+export function getType(viewModel: RelViewModel): 'rel'
+export function getType(viewModel: GroupViewModel): 'group'
+export function getType(viewModel: ItemViewModel): `item:${ItemType}`
+export function getType(
+  viewModel: TapestryElementViewModel | GroupViewModel,
+): 'rel' | 'group' | `item:${ItemType}`
+export function getType(
+  viewModel: TapestryElementViewModel | GroupViewModel,
+): 'rel' | 'group' | `item:${ItemType}` {
+  return isRelViewModel(viewModel)
+    ? 'rel'
+    : isItemViewModel(viewModel)
+      ? `item:${viewModel.dto.type}`
+      : 'group'
 }
 
 export function getAnchorCoordinates(item: Item, anchor: Point): Point {
@@ -374,10 +387,11 @@ export function supportsCustomThumbnail(item: Item) {
   )
 }
 
-export function supportsThumbnail(item: Item) {
-  return item.type === 'video' || item.type === 'webpage' || item.type === 'pdf'
-}
-
 export function isBlobURL(str: string) {
   return str.startsWith('blob:')
 }
+
+export function getPrimaryThumbnail(itemOrThumbnail: Item | ImageAsset | undefined | null) {
+  const thumbnail = isItem(itemOrThumbnail) ? itemOrThumbnail.thumbnail : itemOrThumbnail
+  return thumbnail?.renditions.find((r) => r.isPrimary)?.source
+}
diff --git a/core-client/src/workers/thumbnail-loader.ts b/core-client/src/workers/thumbnail-loader.ts
new file mode 100644
index 0000000..48ad9ac
--- /dev/null
+++ b/core-client/src/workers/thumbnail-loader.ts
@@ -0,0 +1,48 @@
+import type { Size } from 'tapestry-core/src/lib/geometry'
+
+interface BaseThumbnailLoadMessage {
+  requestId: string
+  itemId: string
+}
+
+export interface ThumbnailLoadRequest extends BaseThumbnailLoadMessage {
+  url: string
+  resize?: Size
+}
+
+export interface ThumbnailLoadResponse extends BaseThumbnailLoadMessage {
+  ok: true
+  bitmap: ImageBitmap
+}
+
+export interface ThumbnailLoadError extends BaseThumbnailLoadMessage {
+  ok: false
+  error: string
+}
+
+onmessage = async (e: MessageEvent<ThumbnailLoadRequest>) => {
+  const { requestId, itemId, url, resize } = e.data
+  try {
+    const res = await fetch(url, { mode: 'cors' })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const blob = await res.blob()
+
+    const bitmap = await createImageBitmap(
+      blob,
+      resize
+        ? {
+            resizeWidth: resize.width,
+            resizeHeight: resize.height,
+            resizeQuality: 'high',
+          }
+        : undefined,
+    )
+
+    postMessage({ requestId, itemId, ok: true, bitmap } satisfies ThumbnailLoadResponse, {
+      transfer: [bitmap],
+    })
+  } catch (error) {
+    const message = String((error as { message?: string }).message ?? error)
+    postMessage({ requestId, itemId, ok: false, error: message } satisfies ThumbnailLoadError)
+  }
+}
diff --git a/core/package.json b/core/package.json
index 600a3eb..4e7be3b 100644
--- a/core/package.json
+++ b/core/package.json
@@ -12,5 +12,8 @@
   "peerDependencies": {
     "lodash-es": "^4.17.21",
     "zod": "3.25.76"
+  },
+  "dependencies": {
+    "mime": "^4.1.0"
   }
 }
diff --git a/core/src/data-format/export/index.ts b/core/src/data-format/export/index.ts
index a43492b..51f8b43 100644
--- a/core/src/data-format/export/index.ts
+++ b/core/src/data-format/export/index.ts
@@ -7,6 +7,9 @@ import { ExportV4, ExportV4Schema } from './v4/index.js'
 import { ExportV5, ExportV5Schema } from './v5/index.js'
 import { ExportV6, ExportV6Schema } from './v6/index.js'
 import z from 'zod/v4'
+import { ExportV7, ExportV7Schema } from './v7/index.js'
+import { omit } from 'lodash-es'
+import { determineImageFormat } from '../../utils.js'
 
 export const ROOT_FILE = 'root.json'
 export const FILE_PREFIX = 'file:/'
@@ -171,11 +174,50 @@ class ParserV5 extends ExportParser<ExportV6> {
   }
 }
 
-class ParserV6 extends ExportParser<ExportV6> {
+class ParserV6 extends ExportParser<ExportV7> {
   public readonly schema = ExportV6Schema
   public readonly version = 6
 
-  protected parseInternal(tapestry: ExportV6): ExportV6 {
+  protected parseInternal(tapestry: ExportV6): ExportV7 {
+    return {
+      ...tapestry,
+      version: 7,
+      items: tapestry.items?.map((item) => {
+        const itemV7 = omit(item, 'thumbnail', 'customThumbnail') as NonNullable<
+          ExportV7['items']
+        >[number]
+
+        const itemWithThumbnails = item as NonNullable<ExportV6['items']>[number] & {
+          thumbnail?: { source: string }
+          customThumbnail?: string
+        }
+
+        const thumbnail = itemWithThumbnails.customThumbnail ?? itemWithThumbnails.thumbnail?.source
+        if (thumbnail) {
+          itemV7.thumbnail = {
+            renditions: [
+              {
+                source: thumbnail,
+                format: determineImageFormat(thumbnail),
+                isPrimary: true,
+                isAutoGenerated: !itemWithThumbnails.customThumbnail,
+                size: item.size,
+              },
+            ],
+          }
+        }
+
+        return itemV7
+      }),
+    }
+  }
+}
+
+class ParserV7 extends ExportParser<ExportV7> {
+  public readonly schema = ExportV7Schema
+  public readonly version = 7
+
+  protected parseInternal(tapestry: ExportV7): ExportV7 {
     return tapestry
   }
 }
@@ -188,6 +230,7 @@ const PARSERS = [
   new ParserV4(),
   new ParserV5(),
   new ParserV6(),
+  new ParserV7(),
 ] as const
 
 type Last<Type extends readonly unknown[]> = Type extends readonly [...unknown[], infer R]
diff --git a/core/src/data-format/export/v2/index.ts b/core/src/data-format/export/v2/index.ts
index ccf8760..87763b5 100644
--- a/core/src/data-format/export/v2/index.ts
+++ b/core/src/data-format/export/v2/index.ts
@@ -1,5 +1,5 @@
 import z from 'zod/v4'
-import { HexColorSchema, RectangleSchema } from '../../schemas/common.js'
+import { HexColorSchema, RectangleSchema, SizeSchema } from '../../schemas/common.js'
 import {
   BaseItemSchema as BaseItemSchemaV1,
   TextItemSchema as TextItemSchemaV1,
@@ -12,7 +12,11 @@ import {
   WebpageItemSchema as WebpageItemSchemaV1,
   RelSchema as RelSchemaV1,
 } from '../v1/index.js'
-import { ThumbnailSchema } from '../../schemas/item.js'
+
+export const ThumbnailSchema = z.object({
+  source: z.string(),
+  size: SizeSchema,
+})
 
 const ThumbnailWithTimestampSchema = ThumbnailSchema.extend({
   timestamp: z.string().nullish(),
diff --git a/core/src/data-format/export/v4/index.ts b/core/src/data-format/export/v4/index.ts
index dc34215..cd002b3 100644
--- a/core/src/data-format/export/v4/index.ts
+++ b/core/src/data-format/export/v4/index.ts
@@ -11,7 +11,7 @@ import {
   ExportV3Schema,
 } from '../v3/index.js'
 import { KNOWN_WEBPAGE_TYPES } from '../../schemas/item.js'
-import { ThumbnailSchema } from '../../schemas/item.js'
+import { ThumbnailSchema } from '../v2/index.js'
 
 const GroupSchema = z.object({
   id: z.string(),
diff --git a/core/src/data-format/export/v5/index.ts b/core/src/data-format/export/v5/index.ts
index 98bbd88..0ef6981 100644
--- a/core/src/data-format/export/v5/index.ts
+++ b/core/src/data-format/export/v5/index.ts
@@ -10,7 +10,8 @@ import {
   TextItemSchema,
 } from '../v4'
 import { HexColorSchema } from '../../schemas/common'
-import { commonItemProps, ThumbnailSchema } from '../../schemas/item'
+import { commonItemProps } from '../../schemas/item'
+import { ThumbnailSchema } from '../v2'
 
 export const ActionButtonItemSchema = z.object({
   ...commonItemProps.base,
diff --git a/core/src/data-format/export/v7/index.ts b/core/src/data-format/export/v7/index.ts
new file mode 100644
index 0000000..298375a
--- /dev/null
+++ b/core/src/data-format/export/v7/index.ts
@@ -0,0 +1,11 @@
+import z from 'zod/v4'
+import { ExportV6Schema } from '../v6'
+import { ItemSchema } from '../../schemas/item'
+
+export const ExportV7Schema = z.object({
+  ...ExportV6Schema.shape,
+  version: z.literal(7),
+  items: z.array(ItemSchema).nullish(),
+})
+
+export type ExportV7 = z.infer<typeof ExportV7Schema>
diff --git a/core/src/data-format/schemas/item.ts b/core/src/data-format/schemas/item.ts
index 6f66d02..7eecd60 100644
--- a/core/src/data-format/schemas/item.ts
+++ b/core/src/data-format/schemas/item.ts
@@ -6,9 +6,33 @@ export type WebpageType = (typeof KNOWN_WEBPAGE_TYPES)[number]
 
 export const ACTION_BUTTON_TYPE = ['internalLink', 'externalLink'] as const
 
-export const ThumbnailSchema = z.object({
-  source: z.string().describe('The URL of the thumbnail image.'),
-  size: SizeSchema.describe('The dimensions of the thumbnail image, in pixels.'),
+export const ImageAssetRenditionSchema = z.object({
+  source: z.string().describe('The URL of the image.'),
+  format: z
+    .string()
+    .describe(
+      'The image format used to encode this image, such as "jpeg", "png", or "ktx2". This format typically matches ' +
+        'the corresponding IANA Media Type, but without the "image/" prefix (note that the media type for JPEGs is ' +
+        '"image/jpeg", not "image/jpg"!). Custom image formats are also allowed, so long as there exist Tapestry ' +
+        'client components that know how to interpret them.',
+    ),
+  size: SizeSchema.describe('The dimensions of the image, in pixels.'),
+  isPrimary: z
+    .boolean()
+    .describe(
+      'Image asset renditions are typically grouped in sets. One rendition is denoted as "primary" and all other ' +
+        'renditions are derived from it. This flag denotes whether the current rendition is the primary one.',
+    ),
+  isAutoGenerated: z
+    .boolean()
+    .describe(
+      'Whether this image has been generated automatically or has been uploaded by a user. Only a primary rendition ' +
+        'can be uploaded by the user, all derived renditions are auto-generated.',
+    ),
+})
+
+export const ImageAssetSchema = z.object({
+  renditions: ImageAssetRenditionSchema.array(),
 })
 
 export const commonItemProps = {
@@ -28,7 +52,9 @@ export const commonItemProps = {
       ),
     groupId: z.string().nullish().describe('The id of the group the item belongs to.'),
     notes: z.string().nullish().describe('User provided notes about the item'),
-    customThumbnail: z.string().nullish().describe('The source of a user provided thumbnail image'),
+    thumbnail: ImageAssetSchema.nullish().describe(
+      'An image which will be displayed in place of the item in some cases to reduce loading time and network traffic.',
+    ),
   },
   source: {
     source: z
@@ -39,11 +65,6 @@ export const commonItemProps = {
     startTime: z.number().nullish().describe('Optional start time for audio or video content.'),
     stopTime: z.number().nullish().describe('Optional stop time for audio or video content.'),
   },
-  thumbnail: {
-    thumbnail: ThumbnailSchema.nullish().describe(
-      'An image which will be displayed in place of the item in some cases to reduce loading time and network traffic.',
-    ),
-  },
 }
 
 export const TextItemSchema = z.object({
@@ -89,7 +110,6 @@ export const PdfItemSchema = z.object({
   type: z.literal('pdf').describe('The type of this item.'),
   ...commonItemProps.base,
   ...commonItemProps.source,
-  ...commonItemProps.thumbnail,
   defaultPage: z
     .int()
     .nullish()
@@ -101,13 +121,11 @@ export const VideoItemSchema = z.object({
   ...commonItemProps.base,
   ...commonItemProps.source,
   ...commonItemProps.playbackRange,
-  ...commonItemProps.thumbnail,
 })
 
 export const WebpageItemSchema = z.object({
   ...commonItemProps.base,
   ...commonItemProps.source,
-  ...commonItemProps.thumbnail,
   type: z.literal('webpage').describe('The type of this item.'),
   webpageType: z
     .enum(KNOWN_WEBPAGE_TYPES)
@@ -141,7 +159,8 @@ export const ItemSchema = z
       'Items are the main building blocks of tapestries.',
   )
 
-export type Thumbnail = z.infer<typeof ThumbnailSchema>
+export type ImageAsset = z.infer<typeof ImageAssetSchema>
+export type ImageAssetRendition = z.infer<typeof ImageAssetRenditionSchema>
 export type TextItem = z.infer<typeof TextItemSchema>
 export type ActionButtonItem = z.infer<typeof ActionButtonItemSchema>
 export type AudioItem = z.infer<typeof AudioItemSchema>
diff --git a/core/src/lib/algebra.ts b/core/src/lib/algebra.ts
index b2d8562..4f008f6 100644
--- a/core/src/lib/algebra.ts
+++ b/core/src/lib/algebra.ts
@@ -162,3 +162,11 @@ export function integrate(f: (x: number) => number, from: number, to: number, re
   }
   return sum
 }
+
+export function roundToPrecision(
+  x: number,
+  precision: number,
+  method: 'round' | 'ceil' | 'floor' = 'round',
+) {
+  return Math[method](x / precision) * precision
+}
diff --git a/core/src/lib/geometry.ts b/core/src/lib/geometry.ts
index cacabf6..2b212ba 100644
--- a/core/src/lib/geometry.ts
+++ b/core/src/lib/geometry.ts
@@ -119,6 +119,18 @@ export class Rectangle {
     )
   }
 
+  static covering(arg: Rectangle | Size, aspectRatio: number) {
+    const container = arg instanceof Rectangle ? arg : new Rectangle(ORIGIN, arg)
+    const targetSize = outerFit({ width: aspectRatio, height: 1 }, container.size)
+    return new Rectangle(
+      {
+        x: container.center.x - targetSize.width / 2,
+        y: container.center.y - targetSize.height / 2,
+      },
+      targetSize,
+    )
+  }
+
   intersects(other: Rectangle) {
     return (
       this.right >= other.left &&
@@ -261,7 +273,7 @@ export function mul(multiplier: number, vector: Vector): Vector {
 }
 
 export function norm(v: Vector) {
-  return Math.sqrt(v.dx * v.dx + v.dy * v.dy)
+  return Math.hypot(v.dx, v.dy)
 }
 
 export function normalize(v: Vector): Vector {
diff --git a/core/src/type-utils.d.ts b/core/src/type-utils.d.ts
index 129ff1b..9313773 100644
--- a/core/src/type-utils.d.ts
+++ b/core/src/type-utils.d.ts
@@ -65,4 +65,6 @@ export type RequiredFields<T, K extends keyof T> = T & {
   [P in K]-?: NonNullable<T[P]>
 }
 
+export type WithOptional<T, K extends keyof T> = Omit<T, K> & Pick<Partial<T>, K>
+
 export type ValuesOf<T> = T[keyof T]
diff --git a/core/src/utils.ts b/core/src/utils.ts
index 87876c6..bd5c34e 100644
--- a/core/src/utils.ts
+++ b/core/src/utils.ts
@@ -1,15 +1,9 @@
-import z from 'zod/v4'
 import { compact, fromPairs, isEmpty, set, zip } from 'lodash-es'
 import { Id, Identifiable } from './data-format/schemas/common.js'
-import {
-  Item,
-  ItemSchema,
-  MediaItem,
-  MediaItemSchema,
-  ThumbnailSchema,
-} from './data-format/schemas/item.js'
+import { Item, ItemSchema, MediaItem, MediaItemSchema } from './data-format/schemas/item.js'
 import { PresentationStep } from './data-format/schemas/presentation-step.js'
 import { Rel, RelSchema } from './data-format/schemas/rel.js'
+import mime from 'mime'
 
 export function isHTTPURL(str: string | null | undefined): str is `http${string}` {
   if (!str) {
@@ -35,13 +29,6 @@ export function isMediaItem(item: unknown): item is MediaItem {
   return MediaItemSchema.safeParse(item).success
 }
 
-const thumbnailPropSchema = z.object({ thumbnail: ThumbnailSchema }).nullish()
-type ThumbnailProp = z.infer<typeof thumbnailPropSchema>
-
-export function hasThumbnail(item: Item): item is Item & ThumbnailProp {
-  return thumbnailPropSchema.safeParse(item).success
-}
-
 export function fileExtension(name: string): [string, string | undefined] {
   const [filename, extension] = name.split(/\.(?=[^\\.]+$)/) as [string, string | undefined]
   return [filename, extension?.toLowerCase()]
@@ -142,3 +129,10 @@ export function getPresentationSequence<P extends PresentationStep>(stepsById: I
 export function mapIds<T extends Identifiable, U extends Identifiable>(arr1: T[], arr2: U[]) {
   return fromPairs(zip(arr1, arr2).map(([e1, e2]) => [e1!.id, e2!.id]))
 }
+
+export function determineImageFormat(url: string) {
+  const mimeType = mime.getType(url)
+  if (!mimeType?.startsWith('image/')) return ''
+
+  return mimeType.split('/')[1]
+}
diff --git a/package-lock.json b/package-lock.json
index 891e095..f9c0d5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -91,6 +91,9 @@
       "name": "tapestry-core",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "mime": "^4.1.0"
+      },
       "peerDependencies": {
         "lodash-es": "^4.17.21",
         "zod": "3.25.76"
@@ -132,6 +135,7 @@
         "@tiptap/react": "^2.24.2",
         "@tiptap/starter-kit": "^2.24.2",
         "@tweenjs/tween.js": "^25.0.0",
+        "@vimeo/player": "^2.30.2",
         "bowser": "^2.12.1",
         "clsx": "^2.1.1",
         "color": "^5.0.3",
@@ -145,9 +149,11 @@
         "react-pdf": "^10.2.0",
         "react-router": "^7.9.6",
         "tapestry-core": "^1.0.0",
-        "video.js": "^8.23.4"
+        "video.js": "^8.23.4",
+        "youtube-player": "^5.6.0"
       },
       "devDependencies": {
+        "@types/youtube-player": "^5.5.11",
         "eslint-plugin-react-hooks": "^5.2.0",
         "stylelint": "^16.25.0",
         "stylelint-config-standard": "^39.0.1",
@@ -1844,6 +1850,16 @@
         "@noble/ciphers": "^1.0.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -2224,6 +2240,471 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz",
@@ -5899,6 +6380,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/youtube-player": {
+      "version": "5.5.11",
+      "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.11.tgz",
+      "integrity": "sha512-pM41CDBqJqBmTeJWnF7NOGz82IQoYOhqzMYXv5vKCXBqGiYSLldxMtpCk6KAEtADTy49S45AriYaCaZyeUX38Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.48.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.1.tgz",
@@ -6213,6 +6701,16 @@
         "is-function": "^1.0.1"
       }
     },
+    "node_modules/@vimeo/player": {
+      "version": "2.30.2",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.30.2.tgz",
+      "integrity": "sha512-pZx/quHHn0dx7V7qt2n3wcKYFbIvkLvLGsxzBLe4CzTrWTrw+/4KHrlzeB7EiyCrGRTktWmcvEqlqbDbaZ/liw==",
+      "license": "MIT",
+      "dependencies": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.4"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.1.tgz",
@@ -7777,7 +8275,6 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -8753,9 +9250,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/fast-xml-parser": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.2.tgz",
-      "integrity": "sha512-n8v8b6p4Z1sMgqRmqLJm3awW4NX7NkaKPfb3uJIBTSH7Pdvufi3PQ3/lJLQrvxcMYl7JI2jnDO90siPEpD8JBA==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.7.tgz",
+      "integrity": "sha512-JzVLro9NQv92pOM/jTCR6mHlJh2FGwtomH8ZQjhFj/R29P2Fnj38OgPJVtcvYw6SuKClhgYuwUZf5b3rd8u2mA==",
       "funding": [
         {
           "type": "github",
@@ -8764,7 +9261,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "strnum": "^2.1.0"
+        "strnum": "^2.1.2"
       },
       "bin": {
         "fxparser": "src/cli/cli.js"
@@ -10174,6 +10671,12 @@
       "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
       "license": "MIT"
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==",
+      "license": "MIT"
+    },
     "node_modules/loader-utils": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@@ -10763,6 +11266,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==",
+      "license": "MIT"
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -12816,6 +13325,50 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12935,6 +13488,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -13324,9 +13883,9 @@
       "license": "MIT"
     },
     "node_modules/strnum": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.1.tgz",
-      "integrity": "sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
+      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
       "funding": [
         {
           "type": "github",
@@ -14915,6 +15474,15 @@
       "integrity": "sha512-/5PSaKkIC7PblJKCmkSfuFQK/k/VgAflaVIVtu+owj/NqyKn0p4ni6eFwZD6lfm66PdiPZrc5y9OZ/GDzkAS0Q==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/weakmap-polyfill": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz",
+      "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
@@ -15153,6 +15721,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/youtube-player": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.6.0.tgz",
+      "integrity": "sha512-x95fBbxV7eZ1ZsFtMLMcSGX0Jb/GPPj69RsooyEDVa9bzvvNZ4d5VjnBVBYoY85008VefkLvtaV+b+l38R/LMQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      }
+    },
     "node_modules/zod": {
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
@@ -15207,6 +15786,7 @@
         "morgan": "^1.10.1",
         "pg-listen": "^1.7.0",
         "puppeteer": "^24.3.0",
+        "sharp": "^0.34.5",
         "socket.io": "^4.8.1",
         "tapestry-core": "^1.0.0",
         "tapestry-shared": "^1.0.0",
diff --git a/server/package.json b/server/package.json
index f0609c3..8b69c28 100644
--- a/server/package.json
+++ b/server/package.json
@@ -60,6 +60,7 @@
     "morgan": "^1.10.1",
     "pg-listen": "^1.7.0",
     "puppeteer": "^24.3.0",
+    "sharp": "^0.34.5",
     "socket.io": "^4.8.1",
     "tapestry-core": "^1.0.0",
     "tapestry-shared": "^1.0.0",
diff --git a/server/prisma/migrations/20260212112053_add_image_asset_renditions/migration.sql b/server/prisma/migrations/20260212112053_add_image_asset_renditions/migration.sql
new file mode 100644
index 0000000..b64fec5
--- /dev/null
+++ b/server/prisma/migrations/20260212112053_add_image_asset_renditions/migration.sql
@@ -0,0 +1,146 @@
+-- CreateTable
+CREATE TABLE "ImageAsset" (
+  "id" TEXT NOT NULL,
+  "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  "updatedAt" TIMESTAMP(3) NOT NULL,
+  CONSTRAINT "ImageAsset_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ImageAssetRendition" (
+  "id" TEXT NOT NULL,
+  "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  "updatedAt" TIMESTAMP(3) NOT NULL,
+  "assetId" TEXT NOT NULL,
+  "isPrimary" BOOLEAN NOT NULL,
+  "isAutoGenerated" BOOLEAN NOT NULL,
+  "source" TEXT NOT NULL,
+  "format" TEXT NOT NULL,
+  "width" INTEGER NOT NULL,
+  "height" INTEGER NOT NULL,
+  CONSTRAINT "ImageAssetRendition_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE
+  "ImageAssetRendition"
+ADD
+  CONSTRAINT "ImageAssetRendition_assetId_fkey" FOREIGN KEY ("assetId") REFERENCES "ImageAsset"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE
+  "Item"
+ADD
+  COLUMN "thumbnailId" TEXT;
+
+-- AddForeignKey
+ALTER TABLE
+  "Item"
+ADD
+  CONSTRAINT "Item_thumbnailId_fkey" FOREIGN KEY ("thumbnailId") REFERENCES "ImageAsset"("id") ON DELETE
+SET
+  NULL ON UPDATE CASCADE;
+
+WITH "items" AS (
+  SELECT
+    "i"."id" AS "itemId",
+    COALESCE("i"."customThumbnail", "i"."thumbnail") AS "thumbnail",
+    ("i"."customThumbnail" IS NULL) AS "isAutoGenerated",
+    "i"."thumbnailWidth",
+    "i"."thumbnailHeight"
+  FROM
+    "Item" "i"
+  WHERE
+    "i"."customThumbnail" IS NOT NULL
+    OR "i"."thumbnail" IS NOT NULL
+),
+"assets" AS (
+  INSERT INTO
+    "ImageAsset" ("id", "updatedAt")
+  SELECT
+    gen_random_uuid(),
+    now()
+  FROM
+    "items" RETURNING "id"
+),
+"paired" AS (
+  SELECT
+    "i"."itemId",
+    "i"."thumbnail",
+    "i"."isAutoGenerated",
+    "i"."thumbnailWidth",
+    "i"."thumbnailHeight",
+    "a"."id" AS "assetId"
+  FROM
+    (
+      SELECT
+        "itemId",
+        "thumbnail",
+        "isAutoGenerated",
+        "thumbnailWidth",
+        "thumbnailHeight",
+        row_number() OVER (
+          ORDER BY
+            "itemId"
+        ) AS "rn"
+      FROM
+        "items"
+    ) "i"
+    JOIN (
+      SELECT
+        "id",
+        row_number() OVER (
+          ORDER BY
+            "id"
+        ) AS "rn"
+      FROM
+        "assets"
+    ) "a" USING ("rn")
+),
+"renditions" AS (
+  INSERT INTO
+    "ImageAssetRendition" (
+      "id",
+      "updatedAt",
+      "assetId",
+      "source",
+      "isPrimary",
+      "isAutoGenerated",
+      "format",
+      "width",
+      "height"
+    )
+  SELECT
+    gen_random_uuid(),
+    now(),
+    "p"."assetId",
+    "p"."thumbnail",
+    TRUE,
+    "p"."isAutoGenerated",
+    LOWER(
+      SUBSTRING(
+        "p"."thumbnail"
+        FROM
+          '\.(\w+)(\?|$)'
+      )
+    ),
+    COALESCE("p"."thumbnailWidth", 0),
+    COALESCE("p"."thumbnailHeight", 0)
+  FROM
+    "paired" "p" RETURNING "id",
+    "assetId"
+)
+UPDATE
+  "Item" "i"
+SET
+  "thumbnailId" = "p"."assetId"
+FROM
+  "paired" "p"
+WHERE
+  "i"."id" = "p"."itemId";
+
+-- AlterTable
+ALTER TABLE
+  "Item" DROP COLUMN "customThumbnail",
+  DROP COLUMN "thumbnail",
+  DROP COLUMN "thumbnailHeight",
+  DROP COLUMN "thumbnailWidth";
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
index 0d22e1e..a7c2e6f 100644
--- a/server/prisma/schema.prisma
+++ b/server/prisma/schema.prisma
@@ -149,6 +149,28 @@ enum ActionType {
   externalLink
 }
 
+model ImageAsset {
+  id                String                @id @default(uuid())
+  createdAt         DateTime              @default(now())
+  updatedAt         DateTime              @updatedAt
+  renditions        ImageAssetRendition[]
+  thumbnailForItems Item[]                @relation("thumbnail")
+}
+
+model ImageAssetRendition {
+  id              String     @id @default(uuid())
+  createdAt       DateTime   @default(now())
+  updatedAt       DateTime   @updatedAt
+  asset           ImageAsset @relation(fields: [assetId], references: [id], onDelete: Cascade)
+  assetId         String
+  isPrimary       Boolean
+  isAutoGenerated Boolean
+  source          String
+  format          String
+  width           Int
+  height          Int
+}
+
 model Item {
   id                     String                    @id @default(uuid())
   createdAt              DateTime                  @default(now())
@@ -166,10 +188,8 @@ model Item {
   text                   String?
   backgroundColor        String?
   source                 String?
-  thumbnail              String?
-  customThumbnail        String?
-  thumbnailWidth         Int?
-  thumbnailHeight        Int?
+  thumbnailId            String?
+  thumbnail              ImageAsset?               @relation("thumbnail", fields: [thumbnailId], references: [id], onDelete: SetNull)
   startTime              Int?
   stopTime               Int?
   groupId                String?
diff --git a/server/prisma/scripts/generate-thumbnails.ts b/server/prisma/scripts/generate-thumbnails.ts
index 7aa719f..ddb35f1 100644
--- a/server/prisma/scripts/generate-thumbnails.ts
+++ b/server/prisma/scripts/generate-thumbnails.ts
@@ -1,14 +1,20 @@
 import { ItemType } from '@prisma/client'
 import { prisma } from '../../src/db.js'
-import { scheduleItemThumbnailGeneration } from '../../src/resources/items.js'
+import { scheduleItemThumbnailProcessing } from '../../src/resources/items.js'
 
 interface Options {
   tapestryId?: string
   ids?: string[]
   types?: ItemType[]
+  forceRegenerate?: boolean
 }
 
-export async function generateThumbnails({ tapestryId, ids, types }: Options = {}) {
+export async function generateThumbnails({
+  tapestryId,
+  ids,
+  types,
+  forceRegenerate,
+}: Options = {}) {
   const items = await prisma.item.findMany({
     where: {
       tapestryId,
@@ -17,6 +23,6 @@ export async function generateThumbnails({ tapestryId, ids, types }: Options = {
     },
   })
   for (const item of items) {
-    await scheduleItemThumbnailGeneration(item.id, true)
+    await scheduleItemThumbnailProcessing(item.id, { skipDelay: true, forceRegenerate })
   }
 }
diff --git a/server/src/config.ts b/server/src/config.ts
index 1774c8a..c967e60 100644
--- a/server/src/config.ts
+++ b/server/src/config.ts
@@ -62,7 +62,7 @@ export const config = deepFreeze(
       // 5 minute timeout may look too long but some larger tapestries with a lot of iframes load slowly
       // so we better wait for a while in order to take a nicer screenshot.
       TAPESTRY_THUMBNAIL_GENERATION_TIMEOUT: NullishInt(300_000),
-      ITEM_THUMBNAIL_GENERATION_DELAY: NullishInt(120_000),
+      ITEM_THUMBNAIL_PROCESSING_DELAY: NullishInt(5_000),
 
       // Queue monitoring
       JOBS_ADMIN_NAME: z.string().nullish(),
@@ -128,7 +128,7 @@ export const config = deepFreeze(
         s3CleanupPattern: input.S3_CLEAN_UP_CRON_PATTERN,
         tapestryThumbnailGenerationDelay: input.TAPESTRY_THUMBNAIL_GENERATION_DELAY,
         tapestryThumbnailGenerationTimeout: input.TAPESTRY_THUMBNAIL_GENERATION_TIMEOUT,
-        itemThumbnailGenerationDelay: input.ITEM_THUMBNAIL_GENERATION_DELAY,
+        itemThumbnailProcessingDelay: input.ITEM_THUMBNAIL_PROCESSING_DELAY,
         queueAdminName: input.JOBS_ADMIN_NAME,
         queueAdminPassword: input.JOBS_ADMIN_PASSWORD,
       },
diff --git a/server/src/resources/items.ts b/server/src/resources/items.ts
index 37c5303..167aba3 100644
--- a/server/src/resources/items.ts
+++ b/server/src/resources/items.ts
@@ -22,42 +22,59 @@ import {
   MediaItemUpdateDto,
 } from 'tapestry-shared/src/data-transfer/resources/dtos/item.js'
 import { ReadParamsDto } from 'tapestry-shared/src/data-transfer/resources/dtos/common.js'
-import { ensureArray, OneOrMore } from 'tapestry-core/src/utils.js'
+import { determineImageFormat, ensureArray, OneOrMore } from 'tapestry-core/src/utils.js'
 import { socketIdFromRequest, socketServer } from '../socket/index.js'
-import { groupBy } from 'lodash-es'
+import { compact, get, groupBy, isEmpty, omit } from 'lodash-es'
 import { findWebSourceParser } from 'tapestry-core/src/web-sources/index.js'
 import { MEDIA_ITEM_TYPES } from 'tapestry-core/src/data-format/schemas/item.js'
+import { extractInternallyHostedS3Key } from '../services/s3-service.js'
+import { Path, WithOptional } from 'tapestry-core/src/type-utils.js'
 
-export function shouldRegenerateItemThumbnail(item: Item, patch?: Partial<Item>) {
-  if (item.type === 'pdf') return !item.thumbnail || patch?.defaultPage !== undefined
-  if (item.type === 'video') return !item.thumbnail || patch?.startTime !== undefined
+type ItemWithRequiredAssets = Prisma.ItemGetPayload<{
+  include: { thumbnail: { include: { renditions: true } } }
+}>
 
-  // Generate thumbnails only for webpage items.
-  if (item.type !== 'webpage') return false
+type ItemWithAssets = WithOptional<ItemWithRequiredAssets, 'thumbnail'>
 
-  // If an item has just been created, generate a thumbnail only if it wasn't created with one.
-  if (!patch) return !item.thumbnail
+function isChanging(patch: ItemUpdateDto | undefined, ...keys: Path<ItemUpdateDto>[]): boolean {
+  return keys.some((key) => get(patch, key) !== undefined)
+}
 
-  // The item is being updated. If the update contains a thumbnail, skip thumbnail creation.
-  if (patch.thumbnail) return false
+function parseItemIncludes(include: ReadParamsDto['include']) {
+  return parseIncludes('Item', ['thumbnail.renditions', ...(include ?? [])])
+}
 
-  // The item is being updated. Generate a thumbnail only if it has been modified in a way
-  // which would change the appearance of its thumbnail.
-  return (
-    (patch.webpageType !== undefined && patch.webpageType !== item.webpageType) ||
-    (patch.source !== undefined && patch.source !== item.source) ||
-    (patch.width !== undefined && patch.width !== item.thumbnailWidth) ||
-    (patch.height !== undefined && patch.height !== item.thumbnailHeight)
-  )
+function shouldProcessItemThumbnail(item: ItemWithAssets, patch?: ItemUpdateDto) {
+  // If an item has just been created or its thumbnail is updated by the user, we should process it -
+  // either create a new thumbnail, or transcode the one the user has uploaded.
+  if (!patch || patch.thumbnail) return true
+
+  // If the item doesn't have a thumbnail or its size or source is being changed, schedule thumbnail creation.
+  if (isEmpty(item.thumbnail) || isChanging(patch, 'size.width', 'size.height', 'source'))
+    return true
+
+  // Otherwise, re-generate the thumbnail only if the current patch is changing properties that
+  // affect the visual appearance of the item.
+  if (item.type === 'pdf') return isChanging(patch, 'defaultPage')
+  if (item.type === 'video') return isChanging(patch, 'startTime')
+  if (item.type === 'webpage') return isChanging(patch, 'webpageType')
+  if (item.type === 'text' || item.type === 'actionButton') {
+    return isChanging(patch, 'backgroundColor', 'text')
+  }
+
+  return false
 }
 
-export function scheduleItemThumbnailGeneration(itemId: string, skipDelay = false) {
+export function scheduleItemThumbnailProcessing(
+  itemId: string,
+  { forceRegenerate = false, skipDelay = false } = {},
+) {
   return queue.add(
-    'generate-item-thumbnail',
-    { itemId },
+    'process-item-thumbnail',
+    { itemId, forceRegenerate },
     {
       jobId: itemId,
-      delay: skipDelay ? 0 : config.worker.itemThumbnailGenerationDelay,
+      delay: skipDelay ? 0 : config.worker.itemThumbnailProcessingDelay,
       removeOnComplete: true,
       removeOnFail: true,
     },
@@ -103,6 +120,39 @@ async function resolveWebSource(item: ItemCreateDto | ItemUpdateDto) {
   item.webpageType = webSourceParser.webpageType
 }
 
+async function processThumbnailUpdate(
+  item: Item | null,
+  thumbnailUpdate: ItemUpdateDto['thumbnail'] | null | undefined,
+  tx?: Prisma.TransactionClient,
+) {
+  if (thumbnailUpdate === undefined) return
+
+  return await ensureTransaction(tx, async (tx) => {
+    if (item?.thumbnailId) {
+      await tx.imageAsset.delete({ where: { id: item.thumbnailId } })
+    }
+
+    if (!thumbnailUpdate) return
+
+    const { source: url, size } = thumbnailUpdate
+    const source = extractInternallyHostedS3Key(url) ?? url
+    await tx.imageAsset.create({
+      data: {
+        renditions: {
+          create: {
+            source,
+            format: determineImageFormat(source),
+            isPrimary: true,
+            isAutoGenerated: false,
+            width: size.width,
+            height: size.height,
+          },
+        },
+      },
+    })
+  })
+}
+
 function isMediaItemUpdate(update: ItemUpdateDto): update is MediaItemUpdateDto {
   return MEDIA_ITEM_TYPES.includes(update.type)
 }
@@ -132,14 +182,14 @@ export async function createItems(
   await Promise.all(items.map(resolveWebSource))
   const itemData = items.map((item) => itemDtoToDb(item, ['createdAt', 'updatedAt']))
 
-  const dbItems = await (tx ?? prisma).item.createManyAndReturn({
+  const dbItems = (await (tx ?? prisma).item.createManyAndReturn({
     data: itemData,
-    include: parseIncludes('Item', query?.include),
-  })
+    include: parseItemIncludes(query?.include),
+  })) as ItemWithAssets[]
 
   dbItems
-    .filter((dbItem) => shouldRegenerateItemThumbnail(dbItem))
-    .forEach((dbItem) => scheduleItemThumbnailGeneration(dbItem.id, true))
+    .filter((dbItem) => shouldProcessItemThumbnail(dbItem))
+    .forEach((dbItem) => scheduleItemThumbnailProcessing(dbItem.id))
 
   const dtos = await serialize('Item', dbItems)
 
@@ -162,7 +212,7 @@ export async function updateItems(
   const items = await ensureTransaction(tx, (tx) =>
     Promise.all(
       Object.entries(updates).map(async ([id, update]) => {
-        let dbItem = await tx.item.findUniqueOrThrow({ where: { id } })
+        const dbItem = await tx.item.findUniqueOrThrow({ where: { id } })
 
         if (dbItem.type !== update.type) {
           throw new BadRequestError('Item type cannot be changed')
@@ -172,24 +222,25 @@ export async function updateItems(
           await resolveWebSource(update)
         }
 
-        const patch = itemDtoToDb(update, ['id', 'createdAt', 'updatedAt'])
-        dbItem = await tx.item.update({
+        await processThumbnailUpdate(dbItem, update.thumbnail, tx)
+        const patch = itemDtoToDb(omit(update, 'thumbnail'), ['id', 'createdAt', 'updatedAt'])
+        const updatedDbItem = (await tx.item.update({
           where: { id },
           data: patch,
-          include: parseIncludes('Item', query?.include),
-        })
+          include: parseItemIncludes(query?.include),
+        })) as ItemWithAssets
 
-        // Even though the item thumbnail generation job schedules a follow up job
+        // Even though the item thumbnail processing job schedules a follow up job
         // for generating a tapestry thumbnail we want to schedule a tapestry thumbnail
         // in the cases where for example we move an item (then the item's thumbnail is not regenerated)
-        if (shouldRegenerateItemThumbnail(dbItem, patch)) {
-          void scheduleItemThumbnailGeneration(id)
+        if (shouldProcessItemThumbnail(updatedDbItem, update)) {
+          void scheduleItemThumbnailProcessing(id, { forceRegenerate: true })
         }
-        void scheduleTapestryThumbnailGeneration(dbItem.tapestryId)
+        void scheduleTapestryThumbnailGeneration(updatedDbItem.tapestryId)
 
-        updatedTapestries.add(dbItem.tapestryId)
+        updatedTapestries.add(updatedDbItem.tapestryId)
 
-        return serialize('Item', dbItem)
+        return serialize('Item', updatedDbItem)
       }),
     ),
   )
@@ -222,6 +273,11 @@ export async function destroyItems(
 
     const payload = await tx.item.deleteMany({ where: { id: { in: ids } } })
 
+    const imageAssetIds = compact(items.map((item) => item.tapestryId))
+    if (imageAssetIds.length > 0) {
+      await tx.imageAsset.deleteMany({ where: { id: { in: imageAssetIds } } })
+    }
+
     for (const [tapestryId, tapestryItems] of Object.entries(itemsByTapestry)) {
       void scheduleTapestryThumbnailGeneration(tapestryId)
       socketServer.notifyTapestryElementsRemoved(
@@ -253,7 +309,7 @@ export const items: RESTResourceImpl<Resources['items'], never> = {
     read: async ({ pathParams: { id }, query }) => {
       const dbItem = await prisma.item.findUniqueOrThrow({
         where: { id },
-        include: parseIncludes('Item', query.include),
+        include: parseItemIncludes(query.include),
       })
 
       return serialize('Item', dbItem)
@@ -272,7 +328,7 @@ export const items: RESTResourceImpl<Resources['items'], never> = {
       const total = await prisma.item.count({ where })
       const items = await prisma.item.findMany({
         where,
-        include: parseIncludes('Item', query.include),
+        include: parseItemIncludes(query.include),
         orderBy: filter.orderBy,
         skip: filter.skip,
         take: filter.limit,
diff --git a/server/src/resources/tapestries.ts b/server/src/resources/tapestries.ts
index edde6bf..7ff1664 100644
--- a/server/src/resources/tapestries.ts
+++ b/server/src/resources/tapestries.ts
@@ -355,6 +355,9 @@ export const tapestries: RESTResourceImpl<Resources['tapestries'], Prisma.Tapest
             OR: [{ item: { tapestryId: id } }, { group: { tapestryId: id } }],
           },
         })
+        await tx.imageAsset.deleteMany({
+          where: { thumbnailForItems: { some: { tapestryId: id } } },
+        })
         await tx.tapestry.delete({ where: { id } })
       })
     },
diff --git a/server/src/services/tapestry-import-service.ts b/server/src/services/tapestry-import-service.ts
index 402d6b5..18d2639 100644
--- a/server/src/services/tapestry-import-service.ts
+++ b/server/src/services/tapestry-import-service.ts
@@ -19,10 +19,10 @@ import {
 } from 'tapestry-core/src/data-format/export/index.js'
 import { Prisma, TapestryCreateJob } from '@prisma/client'
 import { determineWebpageType } from 'tapestry-core/src/web-sources/index.js'
-import { mapIds } from 'tapestry-core/src/utils.js'
+import { IdMap, idMapToArray, mapIds } from 'tapestry-core/src/utils.js'
 import { fileTypeFromBuffer } from 'file-type'
-
-type ExportItem = NonNullable<CurrentExport['items']>[number]
+import { Item } from 'tapestry-core/src/data-format/schemas/item.js'
+import { generateItemThumbnailRenditionName } from 'tapestry-shared/src/utils.js'
 
 class ImportError extends BadRequestError {
   constructor(
@@ -37,13 +37,7 @@ class ImportError extends BadRequestError {
   }
 }
 
-function getThumbnail(i: ExportItem) {
-  if (i.type === 'video' || i.type === 'webpage') {
-    return i.thumbnail
-  }
-}
-
-function isMediaItem(i: ExportItem) {
+function isMediaItem(i: Item) {
   return (
     i.type === 'audio' ||
     i.type === 'book' ||
@@ -54,8 +48,8 @@ function isMediaItem(i: ExportItem) {
   )
 }
 
-function isPlayable(i: ExportItem) {
-  return i.type === 'webpage' || i.type === 'video' || i.type === 'audio'
+function hasStartStopTime(i: Item) {
+  return i.type === 'video' || i.type === 'audio'
 }
 
 function* mediaItems(tapestry: CurrentExport) {
@@ -178,25 +172,46 @@ export class TapestryImportService {
                 return generateItemKey(tapestryId, filename)
               })
             }
+          }
 
-            const itemThumbnail = getThumbnail(item)
-            if (itemThumbnail) {
-              itemThumbnail.source = await this.uploadSource(itemThumbnail.source, () =>
-                tapestryKey(tapestryId, `item-${item.id}-thumbnail.jpeg`),
+          const itemThumbnailsMap: IdMap<Prisma.ImageAssetCreateManyInput> = {}
+          const itemThumbnailRenditions: Prisma.ImageAssetRenditionCreateManyInput[] = []
+          for (const item of tapestry.items ?? []) {
+            if (item.thumbnail?.renditions.length) {
+              const thumbnail = { id: crypto.randomUUID() }
+              const renditions = await Promise.all(
+                item.thumbnail.renditions.map(
+                  async (r): Promise<Prisma.ImageAssetRenditionCreateManyInput> => ({
+                    assetId: thumbnail.id,
+                    source: await this.uploadSource(r.source, (_, ext) =>
+                      tapestryKey(
+                        tapestryId,
+                        `${generateItemThumbnailRenditionName(item.id, r)}.${ext}`,
+                      ),
+                    ),
+                    format: r.format,
+                    width: r.size.width,
+                    height: r.size.height,
+                    isPrimary: r.isPrimary,
+                    isAutoGenerated: r.isAutoGenerated,
+                  }),
+                ),
               )
-            }
 
-            if (item.customThumbnail) {
-              item.customThumbnail = await this.uploadSource(item.customThumbnail, (_, ext) =>
-                tapestryKey(tapestryId, `item-${item.id}-custom-thumbnail.${ext}`),
-              )
+              itemThumbnailsMap[item.id] = thumbnail
+              itemThumbnailRenditions.push(...renditions)
             }
           }
 
+          const itemThumbnails = idMapToArray(itemThumbnailsMap)
+          if (itemThumbnails.length > 0) {
+            await tx.imageAsset.createMany({ data: itemThumbnails })
+            await tx.imageAssetRendition.createMany({ data: itemThumbnailRenditions })
+          }
+
           const items = await tx.item.createManyAndReturn({
             data: await Promise.all(
               tapestry.items?.map<Promise<Prisma.ItemCreateManyInput>>(async (i) => {
-                const thumbnail = getThumbnail(i)
                 const isMedia = isMediaItem(i)
                 const source = isMedia ? i.source : undefined
 
@@ -209,9 +224,8 @@ export class TapestryImportService {
                   notes: i.notes,
                   dropShadow: !!i.dropShadow,
                   groupId: groupIdMap[i.groupId ?? ''],
-                  customThumbnail: i.customThumbnail,
-
-                  backgroundColor: isMedia ? undefined : i.backgroundColor,
+                  thumbnailId: itemThumbnailsMap[i.id]?.id,
+                  backgroundColor: isMediaItem(i) ? undefined : i.backgroundColor,
                   text: isMedia ? undefined : i.text,
 
                   ...(i.type === 'actionButton'
@@ -225,11 +239,7 @@ export class TapestryImportService {
                     i.type === 'webpage'
                       ? (i.webpageType ?? (await determineWebpageType(i.source)))
                       : null,
-                  ...(isPlayable(i) ? { startTime: i.startTime, stopTime: i.stopTime } : {}),
-
-                  thumbnail: thumbnail?.source,
-                  thumbnailHeight: thumbnail?.size.height,
-                  thumbnailWidth: thumbnail?.size.width,
+                  ...(hasStartStopTime(i) ? { startTime: i.startTime, stopTime: i.stopTime } : {}),
                   defaultPage: i.type === 'pdf' ? i.defaultPage : null,
                 }
               }) ?? [],
diff --git a/server/src/tasks/ffmpeg.ts b/server/src/tasks/ffmpeg.ts
deleted file mode 100644
index 49f9e45..0000000
--- a/server/src/tasks/ffmpeg.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { exec } from './utils'
-
-export async function getVideoFPS(source: string): Promise<number> {
-  const [num, denom] = (
-    await exec(
-      `ffprobe -v 0 -of csv=p=0 -select_streams v:0 -show_entries stream=r_frame_rate "${source}"`,
-    )
-  ).split('/')
-
-  return Math.round(Number.parseInt(num) / Number.parseInt(denom))
-}
-
-export async function extractVideoFrame(source: string, frame = 0): Promise<Buffer> {
-  return Buffer.from(
-    await exec(
-      `ffmpeg -i "${source}"  -vf "select=eq(n\\,${frame})" -vframes 1 -f image2 pipe:1 2>/dev/null | base64`,
-    ),
-    'base64',
-  )
-}
diff --git a/server/src/tasks/generate-item-thumbnail.ts b/server/src/tasks/generate-item-thumbnail.ts
deleted file mode 100644
index 9b5252c..0000000
--- a/server/src/tasks/generate-item-thumbnail.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { JobTypeMap } from './index.js'
-import { s3Service, tapestryKey } from '../services/s3-service.js'
-import { prisma } from '../db.js'
-import { takeScreenshot } from './puppeteer.js'
-import axios from 'axios'
-import { OEmbed } from 'tapestry-core/src/oembed.js'
-import { Item, ItemType } from '@prisma/client'
-import { scheduleTapestryThumbnailGeneration } from '../resources/tapestries.js'
-import { parseDBItemSource } from '../transformers/item.js'
-import { WEB_SOURCE_PARSERS } from 'tapestry-core/src/web-sources/index.js'
-import { extractVideoFrame, getVideoFPS } from './ffmpeg.js'
-import { screenshotPage } from './pdf.js'
-
-async function getPDFThumbnail(item: Item) {
-  const { source } = await parseDBItemSource(item.source!)
-  if (source.startsWith('blob:')) {
-    return
-  }
-
-  return screenshotPage(source, item.defaultPage ?? 1)
-}
-
-async function getYoutubeThumbnail(embedUrl: string) {
-  const { data: oembed } = await axios.get<OEmbed>(
-    `https://www.youtube.com/oembed?url=${WEB_SOURCE_PARSERS.youtube.getWatchUrl(embedUrl)}`,
-  )
-  const { type, thumbnail_url } = oembed
-  if (type !== 'video' || !thumbnail_url) {
-    return undefined
-  }
-  const { data: blob } = await axios.get<ArrayBuffer>(thumbnail_url, {
-    responseType: 'arraybuffer',
-  })
-  return blob
-}
-
-async function getVideoThumbnail(item: Item): Promise<Buffer | undefined> {
-  const { source } = await parseDBItemSource(item.source!)
-  // Upon initial upload the source is the local blob, so we skip it.
-  // After uploading the video to S3 an item update will come with the object key
-  // based off of which we will extract the video thumbnail
-  if (source.startsWith('blob:')) {
-    return
-  }
-  const startFrame = item.startTime ? (await getVideoFPS(source)) * item.startTime : undefined
-  return extractVideoFrame(source, startFrame)
-}
-
-async function getThumbnail(item: Item) {
-  if (item.type === 'pdf') {
-    return getPDFThumbnail(item)
-  }
-  if (item.type === 'video') {
-    return getVideoThumbnail(item)
-  }
-
-  const { width, height, source, webpageType } = item
-
-  if (webpageType === 'youtube') {
-    const buffer = await getYoutubeThumbnail(source!)
-    if (buffer) {
-      return new Uint8Array(buffer)
-    }
-  }
-
-  return takeScreenshot(source!, { width, height, timeout: 120_000 })
-}
-
-const THUMBNAIL_TYPES: ItemType[] = ['webpage', 'video', 'pdf']
-
-export async function generateItemThumbnail({ itemId }: JobTypeMap['generate-item-thumbnail']) {
-  const item = await prisma.item.findUniqueOrThrow({ where: { id: itemId } })
-  const { type } = item
-
-  if (!THUMBNAIL_TYPES.includes(type)) {
-    console.error(`Cannot generate thumbnail for item of type ${type}`)
-    return
-  }
-
-  const thumbnailKey = tapestryKey(item.tapestryId, `item-${itemId}-thumbnail.jpeg`)
-  try {
-    const thumbnail = await getThumbnail(item)
-    if (!thumbnail) {
-      return
-    }
-
-    await s3Service.putObject(thumbnailKey, thumbnail, 'image/jpeg')
-
-    await prisma.item.update({
-      where: { id: itemId },
-      data: {
-        thumbnail: thumbnailKey,
-        thumbnailWidth: item.width,
-        thumbnailHeight: item.height,
-      },
-    })
-
-    await scheduleTapestryThumbnailGeneration(item.tapestryId)
-  } catch (error) {
-    console.error('Error while generating item thumbnail', error)
-  }
-}
diff --git a/server/src/tasks/generate-tapestry-thumbnail.ts b/server/src/tasks/generate-tapestry-thumbnail.ts
index 65d7d49..1048c5c 100644
--- a/server/src/tasks/generate-tapestry-thumbnail.ts
+++ b/server/src/tasks/generate-tapestry-thumbnail.ts
@@ -1,11 +1,8 @@
-import { URL } from 'url'
 import { JobTypeMap } from './index.js'
 import { config } from '../config.js'
 import { s3Service, tapestryKey } from '../services/s3-service.js'
 import { prisma } from '../db.js'
-import { createJWT } from '../auth/tokens.js'
-import { takeScreenshot } from './puppeteer.js'
-import { REFRESH_TOKEN_COOKIE_NAME } from '../auth/index.js'
+import { takeTapestryScreenshot } from './thumbnail-generators/tapestry.js'
 
 // 6 times the dimensions of the thumbnail as displayed in the UI
 const WIDTH = 6 * 375
@@ -14,29 +11,6 @@ const HEIGHT = Math.floor(WIDTH * (10 / 21))
 // Inset to clip toolbars near the edges of the tapestry viewer.
 const INSET = 100
 
-async function screenshot(url: string, userId: string) {
-  return takeScreenshot(url, {
-    width: WIDTH + 2 * INSET,
-    height: HEIGHT + 2 * INSET,
-    timeout: config.worker.tapestryThumbnailGenerationTimeout,
-    clip: {
-      x: INSET,
-      y: INSET,
-      width: WIDTH,
-      height: HEIGHT,
-    },
-    setupContext: (context) =>
-      context.setCookie({
-        domain: new URL(config.server.externalUrl).host,
-        name: REFRESH_TOKEN_COOKIE_NAME,
-        value: createJWT({ userId }, '10m'),
-        expires: -1, // Session cookie
-        httpOnly: true,
-        secure: true,
-      }),
-  })
-}
-
 export async function generateTapestryThumbnail({
   tapestryId,
 }: JobTypeMap['generate-tapestry-thumbnail']) {
@@ -45,10 +19,17 @@ export async function generateTapestryThumbnail({
     const tapestry = await prisma.tapestry.findUniqueOrThrow({
       where: { id: tapestryId },
     })
-    const thumbnail = await screenshot(
-      `${config.server.viewerUrl}/t/${tapestryId}`,
-      tapestry.ownerId,
-    )
+    const thumbnail = await takeTapestryScreenshot(`/t/${tapestryId}`, tapestry.ownerId, {
+      width: WIDTH + 2 * INSET,
+      height: HEIGHT + 2 * INSET,
+      timeout: config.worker.tapestryThumbnailGenerationTimeout,
+      clip: {
+        x: INSET,
+        y: INSET,
+        width: WIDTH,
+        height: HEIGHT,
+      },
+    })
     await s3Service.putObject(thumbnailKey, thumbnail, 'image/jpeg')
 
     await prisma.tapestry.update({
diff --git a/server/src/tasks/index.ts b/server/src/tasks/index.ts
index 1b6dc29..0163d43 100644
--- a/server/src/tasks/index.ts
+++ b/server/src/tasks/index.ts
@@ -13,8 +13,9 @@ export interface JobTypeMap {
   'generate-tapestry-thumbnail': {
     tapestryId: string
   }
-  'generate-item-thumbnail': {
+  'process-item-thumbnail': {
     itemId: string
+    forceRegenerate: boolean
   }
   's3-cleanup': void
   'create-tapestry': {
diff --git a/server/src/tasks/pdf.ts b/server/src/tasks/pdf.ts
deleted file mode 100644
index 657f13a..0000000
--- a/server/src/tasks/pdf.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { createWriteStream } from 'fs'
-import { exec } from './utils'
-import { tmpdir } from 'os'
-import { resolve } from 'path'
-import { randomUUID } from 'crypto'
-import { Readable } from 'stream'
-import { finished } from 'stream/promises'
-import { unlink } from 'fs/promises'
-
-export async function screenshotPage(src: string, page: number): Promise<Buffer | undefined> {
-  const { body } = await fetch(src)
-  if (!body) {
-    return
-  }
-  const outFile = resolve(tmpdir(), `${randomUUID()}.pdf`)
-  await finished(Readable.fromWeb(body).pipe(createWriteStream(outFile)))
-
-  const buffer = Buffer.from(
-    await exec(`magick "${outFile}[${page - 1}]" -density 96 -quality 75 jpg:- | base64`),
-    'base64',
-  )
-  await unlink(outFile)
-  return buffer
-}
diff --git a/server/src/tasks/process-item-thumbnail.ts b/server/src/tasks/process-item-thumbnail.ts
new file mode 100644
index 0000000..6974fad
--- /dev/null
+++ b/server/src/tasks/process-item-thumbnail.ts
@@ -0,0 +1,146 @@
+import { JobTypeMap } from './index.js'
+import { s3Service, tapestryKey } from '../services/s3-service.js'
+import { prisma } from '../db.js'
+import { ImageAssetRendition, Item } from '@prisma/client'
+import { scheduleTapestryThumbnailGeneration } from '../resources/tapestries.js'
+import { generatePrimaryThumbnail, ThumbnailRenditionOutput } from './thumbnail-generators/index.js'
+import { generateItemThumbnailRenditionName } from 'tapestry-shared/src/utils.js'
+import { parseDBItemSource } from '../transformers/item.js'
+import { downloadImageToArrayBuffer } from './utils.js'
+import { generateThumbnail } from './thumbnail-generators/image.js'
+import sharp from 'sharp'
+
+async function storeThumbnailRendition(
+  item: Item,
+  isPrimary: boolean,
+  generate: (item: Item) => Promise<ThumbnailRenditionOutput | null | undefined>,
+) {
+  try {
+    console.log(`Generating thumbnail rendition for item ${item.id}...`)
+    const output = await generate(item)
+    if (!output) {
+      console.log(`[${item.id}] Thumbnail generation failed.`)
+      return
+    }
+
+    console.log(`[${item.id}] Thumbnail generated. Uploading to S3...`)
+
+    const { data, extension, format, size } = output
+    const renditionName = generateItemThumbnailRenditionName(item.id, {
+      format,
+      size,
+      isPrimary,
+      isAutoGenerated: true,
+    })
+    const renditionKey = tapestryKey(item.tapestryId, `${renditionName}.${extension}`)
+
+    await s3Service.putObject(renditionKey, data, `image/${format}`)
+
+    console.log(`[${item.id}] Thumbnail uploaded. Updating db records...`)
+    const assetId =
+      item.thumbnailId ??
+      (
+        await prisma.imageAsset.create({
+          data: { thumbnailForItems: { connect: { id: item.id } } },
+        })
+      ).id
+
+    await prisma.imageAssetRendition.create({
+      data: {
+        source: renditionKey,
+        format,
+        isPrimary,
+        isAutoGenerated: true,
+        width: size.width,
+        height: size.height,
+        assetId,
+      },
+    })
+
+    if (isPrimary) {
+      await scheduleTapestryThumbnailGeneration(item.tapestryId)
+    }
+
+    console.log(`[${item.id}] Done.`)
+    return output
+  } catch (error) {
+    console.error('Error while generating item thumbnail', error)
+  }
+}
+
+const LEVELS_OF_DETAIL = [256, 512, 1024, 2048, 4096]
+
+function hasRenditionAtLOD(renditions: ImageAssetRendition[], lod: number) {
+  return renditions.some(
+    ({ width, height }) =>
+      width < 1.5 * lod && height < 1.5 * lod && (width > 0.75 * lod || height > 0.75 * lod),
+  )
+}
+
+export async function processItemThumbnail({
+  itemId,
+  forceRegenerate,
+}: JobTypeMap['process-item-thumbnail']) {
+  const loadItem = () =>
+    prisma.item.findUniqueOrThrow({
+      where: { id: itemId },
+      include: { thumbnail: { include: { renditions: true } } },
+    })
+
+  let item = await loadItem()
+
+  // Never regenerate thumbnails if they have not been automatically generated in the first place.
+  // In particular, if the user has manually uploaded a custom thumbnail, we should never delete it
+  // and replace it with an automatically generated one.
+  if (forceRegenerate && item.thumbnail?.renditions.every((r) => r.isAutoGenerated)) {
+    await prisma.imageAsset.delete({ where: { id: item.thumbnail.id } })
+    item = await loadItem()
+  }
+
+  let primaryRendition = item.thumbnail?.renditions.find((r) => r.isPrimary)
+  let primaryRenditionBitmap: Buffer<ArrayBufferLike>
+
+  if (primaryRendition) {
+    primaryRenditionBitmap = await downloadImageToArrayBuffer(
+      (await parseDBItemSource(primaryRendition.source)).source,
+    )
+    if (primaryRendition.width === 0 || primaryRendition.height === 0) {
+      // In some cases we have invalid dimensions stored in the database. Infer the correct ones from the bitmap.
+      const meta = await sharp(primaryRenditionBitmap, { failOn: 'none' }).metadata()
+      primaryRendition = await prisma.imageAssetRendition.update({
+        where: { id: primaryRendition.id },
+        data: {
+          width: meta.width,
+          height: meta.height,
+        },
+      })
+    }
+  } else {
+    const output = await storeThumbnailRendition(item, true, generatePrimaryThumbnail)
+
+    if (!output) {
+      console.error(`Failed to generate thumbnail for item ${itemId}.`)
+      return
+    }
+
+    // Reload the item so that all foreign keys and relations are loaded properly after any updates that may
+    // have been done in storeThumbnailRendition above.
+    item = await loadItem()
+    primaryRendition = item.thumbnail!.renditions.find((r) => r.isPrimary)!
+    primaryRenditionBitmap = output.data
+  }
+
+  const derivedRenditions = item.thumbnail?.renditions.filter((r) => !r.isPrimary) ?? []
+  const maxPrimaryDim = Math.max(primaryRendition.width, primaryRendition.height)
+
+  for (const lod of LEVELS_OF_DETAIL) {
+    if (maxPrimaryDim > lod && !hasRenditionAtLOD([primaryRendition, ...derivedRenditions], lod)) {
+      await storeThumbnailRendition(item, false, () =>
+        generateThumbnail(primaryRenditionBitmap, {
+          maxDim: lod,
+          optimizeForText: item.type === 'text',
+        }),
+      )
+    }
+  }
+}
diff --git a/server/src/tasks/puppeteer.ts b/server/src/tasks/puppeteer.ts
deleted file mode 100644
index 2b35597..0000000
--- a/server/src/tasks/puppeteer.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import puppeteer, { BrowserContext, Page, ScreenshotOptions } from 'puppeteer'
-import { config } from '../config.js'
-
-// This is the user agent as if the browser was launched with { headless : false }.
-// Vimeo appears to have some sort of filtering (evidently only for public videos) based on the user agent.
-// When the puppeteer browser is launched with { headless: true } (the default) it automatically has "HeadlessChrome"
-// as part of its user agent, which causes Vimeo to block the requests
-const USER_AGENT =
-  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36'
-
-async function inNewBrowserPage<T>(perform: (page: Page, context: BrowserContext) => Promise<T>) {
-  const start = Date.now()
-  const browser = await puppeteer.launch({ args: config.worker.puppeteerArgs.split(',') })
-  const context = await browser.createBrowserContext()
-  const page = await context.newPage()
-  await page.setUserAgent(USER_AGENT)
-
-  try {
-    return await perform(page, context)
-  } finally {
-    try {
-      await browser.close()
-    } catch (e) {
-      console.debug('Error while closing puppeteer browser context', e)
-    }
-    console.log(`Browser session completed in ${Date.now() - start}ms.`)
-  }
-}
-
-export interface ScreenshotConfig extends ScreenshotOptions {
-  width: number
-  height: number
-  timeout?: number
-  setupContext?: (context: BrowserContext) => Promise<void>
-}
-
-export async function takeScreenshot(
-  url: string,
-  { width, height, setupContext, timeout, ...options }: ScreenshotConfig,
-) {
-  console.log(`Taking screenshot of ${url} with dimensions ${width}x${height}...`)
-  return inNewBrowserPage(async (page, context) => {
-    console.log('>  Setting up context...')
-    await setupContext?.(context)
-    console.log('>  Configuring viewport...')
-    await page.setViewport({ width, height })
-    console.log(`>  Navigating to ${url}...`)
-    await page.goto(url, { timeout: 120_000 })
-    try {
-      console.log(`>  Waiting for network idle...`)
-      await page.waitForNetworkIdle({ idleTime: 3000, concurrency: 0, timeout: timeout ?? 60_000 })
-    } catch (error) {
-      console.warn(
-        'Error while waiting for the page to load before taking a screenshot. ' +
-          'Taking the screenshot anyway, but it may appear broken.',
-        error,
-      )
-    }
-    console.log('>  Taking screenshot...')
-    return page.screenshot(options)
-  })
-}
diff --git a/server/src/tasks/s3-cleanup.ts b/server/src/tasks/s3-cleanup.ts
index e5e4808..ee365dc 100644
--- a/server/src/tasks/s3-cleanup.ts
+++ b/server/src/tasks/s3-cleanup.ts
@@ -8,26 +8,22 @@ const PERSISTED_KEYS: string[] = []
 
 export async function s3Cleanup() {
   try {
-    const thumbnails = await prisma.tapestry.findMany({
+    const tapestries = await prisma.tapestry.findMany({
       select: { thumbnail: true },
       where: { thumbnail: { not: null } },
     })
     const items = await prisma.item.findMany({
-      select: { source: true, thumbnail: true, customThumbnail: true },
-      where: {
-        OR: [
-          { source: { not: null } },
-          { thumbnail: { not: null } },
-          { customThumbnail: { not: null } },
-        ],
-      },
+      select: { source: true },
+      where: { source: { not: null } },
+    })
+    const imageAssetsRenditions = await prisma.imageAssetRendition.findMany({
+      select: { source: true },
     })
 
     const allS3Keys = new Set([
-      ...thumbnails.map((t) => t.thumbnail!),
+      ...tapestries.map((t) => t.thumbnail!),
+      ...imageAssetsRenditions.map((r) => r.source),
       ...compact(items.map((i) => i.source)),
-      ...compact(items.map((i) => i.thumbnail)),
-      ...compact(items.map((i) => i.customThumbnail)),
       ...PERSISTED_KEYS,
     ])
 
diff --git a/server/src/tasks/thumbnail-generators/image.ts b/server/src/tasks/thumbnail-generators/image.ts
new file mode 100644
index 0000000..889eef7
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/image.ts
@@ -0,0 +1,49 @@
+import sharp from 'sharp'
+import { ThumbnailRenditionOutput } from '.'
+import { downloadImageToArrayBuffer } from '../utils'
+
+interface DownscaleConfig {
+  maxDim: number
+  optimizeForText?: boolean
+}
+
+export async function generateThumbnail(
+  inputBuffer: Buffer<ArrayBufferLike>,
+  downscale?: DownscaleConfig,
+): Promise<ThumbnailRenditionOutput> {
+  const output = sharp(inputBuffer, { failOn: 'none' }).rotate()
+
+  if (downscale) {
+    output.gamma().resize({
+      width: downscale.maxDim,
+      height: downscale.maxDim,
+      fit: 'inside',
+      withoutEnlargement: true,
+      fastShrinkOnLoad: false,
+    })
+    if (downscale.optimizeForText) {
+      output.sharpen({ sigma: 0.5 })
+    }
+  }
+
+  output.webp({ lossless: true, effort: 6 })
+
+  const { data, info } = await output.toBuffer({ resolveWithObject: true })
+
+  return {
+    data,
+    format: 'webp',
+    extension: 'webp',
+    size: {
+      width: info.width,
+      height: info.height,
+    },
+  }
+}
+
+export async function generateImageThumbnail(
+  imageUrl: string,
+  downscale: DownscaleConfig = { maxDim: 1024 },
+): Promise<ThumbnailRenditionOutput> {
+  return generateThumbnail(await downloadImageToArrayBuffer(imageUrl), downscale)
+}
diff --git a/server/src/tasks/thumbnail-generators/index.ts b/server/src/tasks/thumbnail-generators/index.ts
new file mode 100644
index 0000000..a6a50f9
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/index.ts
@@ -0,0 +1,49 @@
+import { Size } from 'tapestry-core/src/data-format/schemas/common'
+import { prisma } from '../../db.js'
+import { Item } from '@prisma/client'
+import { parseDBItemSource } from '../../transformers/item.js'
+import { generateVideoThumbnail } from './video.js'
+import { generatePDFThumbnail } from './pdf.js'
+import { generateImageThumbnail } from './image.js'
+import { generateWebpageThumbnail, generateYoutubeThumbnail } from './webpage.js'
+import { generateTapestryItemThumbnail } from './tapestry.js'
+
+export interface ThumbnailRenditionOutput {
+  data: Buffer<ArrayBufferLike>
+  extension: string
+  format: string
+  size: Size
+}
+
+const MIN_THUMBNAIL_SIZE = 600
+
+export async function generatePrimaryThumbnail(item: Item) {
+  if (item.type === 'pdf' || item.type === 'video' || item.type === 'image') {
+    const source = (await parseDBItemSource(item.source!)).source
+    // We cannot make thumbnails for blob URLs. The thumbnail creation job should be re-triggered
+    // when the source is changed.
+    if (source.startsWith('blob:')) return
+
+    const thumbWidth = Math.max(MIN_THUMBNAIL_SIZE, item.width)
+    if (item.type === 'pdf') {
+      return generatePDFThumbnail(source, item.defaultPage ?? 1, thumbWidth)
+    }
+    if (item.type === 'video') {
+      return generateVideoThumbnail(source, item.startTime || undefined, thumbWidth)
+    }
+    return generateImageThumbnail(source, { maxDim: thumbWidth })
+  }
+
+  if (item.type === 'webpage') {
+    const { width, height, source, webpageType } = item
+
+    if (webpageType === 'youtube') {
+      return generateYoutubeThumbnail(source!)
+    }
+
+    return generateWebpageThumbnail(source!, { width, height, timeout: 120_000 })
+  }
+
+  const tapestry = await prisma.tapestry.findUniqueOrThrow({ where: { id: item.tapestryId } })
+  return generateTapestryItemThumbnail(tapestry.id, item.id, tapestry.ownerId, item)
+}
diff --git a/server/src/tasks/thumbnail-generators/pdf.ts b/server/src/tasks/thumbnail-generators/pdf.ts
new file mode 100644
index 0000000..66dfc18
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/pdf.ts
@@ -0,0 +1,51 @@
+import { spawn } from 'child_process'
+import { ThumbnailRenditionOutput } from './index'
+import { generateThumbnail } from './image'
+
+export async function generatePDFThumbnail(
+  src: string,
+  page: number,
+  width: number,
+): Promise<ThumbnailRenditionOutput> {
+  const res = await fetch(src)
+  if (!res.ok) throw new Error(`Fetch failed: ${res.status} ${res.statusText}`)
+
+  const contentType = res.headers.get('content-type') || ''
+  if (!contentType.toLowerCase().startsWith('application/pdf')) {
+    throw new Error(`URL did not return a pdf (content-type: ${contentType || 'unknown'})`)
+  }
+
+  const inputBuffer = Buffer.from(await res.arrayBuffer())
+
+  return new Promise<ThumbnailRenditionOutput>((resolve, reject) => {
+    // prettier-ignore
+    const magickArgs = [
+      '-limit', 'memory', '256MiB',
+      '-limit', 'map', '512MiB',
+      '-limit', 'area', '100MP',
+      '-density', '300',
+      `pdf:-[${page - 1}]`,
+      '-background', 'white',
+      '-alpha', 'off',
+      '-resize', `${width}x`,
+      '-quality', '75',
+      'jpg:-',
+    ]
+
+    const proc = spawn('magick', magickArgs, { stdio: ['pipe', 'pipe', 'pipe'] })
+    const chunks: Buffer[] = []
+    let err = ''
+
+    proc.stdout.on('data', (d: Buffer) => chunks.push(d))
+    proc.stderr.on('data', (d: Buffer) => (err += d.toString()))
+
+    proc.on('error', reject)
+    proc.on('close', (code) => {
+      if (code !== 0) return reject(new Error(`magick exited ${code}: ${err}`))
+
+      generateThumbnail(Buffer.concat(chunks)).then(resolve, reject)
+    })
+
+    proc.stdin.end(inputBuffer)
+  })
+}
diff --git a/server/src/tasks/thumbnail-generators/tapestry.ts b/server/src/tasks/thumbnail-generators/tapestry.ts
new file mode 100644
index 0000000..9209cab
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/tapestry.ts
@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+import { URL } from 'url'
+import { config } from '../../config.js'
+import { createJWT } from '../../auth/tokens.js'
+import { REFRESH_TOKEN_COOKIE_NAME } from '../../auth/index.js'
+import { ScreenshotConfig, takeScreenshot } from './webpage.js'
+import { Size } from 'tapestry-core/src/data-format/schemas/common.js'
+import { ThumbnailRenditionOutput } from './index.js'
+import { generateThumbnail } from './image.js'
+
+export async function takeTapestryScreenshot(
+  tapestryPath: string,
+  userId: string,
+  options: ScreenshotConfig,
+) {
+  return takeScreenshot(`${config.server.viewerUrl}${tapestryPath}`, {
+    setupContext: (context) =>
+      context.setCookie({
+        domain: new URL(config.server.externalUrl).host,
+        name: REFRESH_TOKEN_COOKIE_NAME,
+        value: createJWT({ userId }, '10m'),
+        expires: -1, // Session cookie
+        httpOnly: true,
+        secure: true,
+      }),
+    ...options,
+  })
+}
+
+export async function generateTapestryItemThumbnail(
+  tapestryId: string,
+  itemId: string,
+  ownerId: string,
+  { width, height }: Size,
+): Promise<ThumbnailRenditionOutput | undefined> {
+  const tapestryPath = `/t/${tapestryId}?focus=${itemId}&deopt=1`
+  const elementSelector = `[data-model-id="${itemId}"]`
+  const screenshot = await takeTapestryScreenshot(tapestryPath, ownerId, {
+    // Deactivate the tapestry item first, so that its border disappears
+    interact: async (page) => {
+      // Hide everything else around it
+      await page.evaluate((elementSelector) => {
+        // @ts-expect-error This will be executed in a browser context
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const global = window
+        // Deactivate the focused element
+        global.postMessage({ type: 'deactivate' })
+        global.document.documentElement.style.background = 'transparent'
+        global.document.body.style.background = 'transparent'
+        global.document
+          .querySelectorAll(`.pixi-container, [data-model-id]:not(${elementSelector})`)
+          .forEach((elem: { style: { display: string } }) => {
+            elem.style.display = 'none'
+          })
+      }, elementSelector)
+    },
+    elementSelector,
+    // The browser window should be larger than the required element size in order to accommodate
+    // for the tapestry controls around it.
+    width: width + 100,
+    height: height + 300,
+    omitBackground: true,
+    type: 'png',
+  })
+  return generateThumbnail(Buffer.from(screenshot), { maxDim: Math.max(width, height) })
+}
diff --git a/server/src/tasks/thumbnail-generators/video.ts b/server/src/tasks/thumbnail-generators/video.ts
new file mode 100644
index 0000000..3b8e03f
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/video.ts
@@ -0,0 +1,59 @@
+import { spawn } from 'node:child_process'
+import { unlink } from 'node:fs'
+import { noop } from 'lodash-es'
+import { downloadToTempFile } from '../utils'
+import { ThumbnailRenditionOutput } from '.'
+import { generateThumbnail } from './image'
+
+function extractVideoThumbnailFromFile(
+  filePath: string,
+  startTime = 1,
+  width = 320,
+): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    // prettier-ignore
+    const args = [
+      "-hide_banner",
+      "-loglevel", "error",
+      "-nostdin",
+      "-ss", String(startTime),
+      "-i", filePath,
+      "-frames:v", "1",
+      "-an", "-sn", "-dn",
+      // scale with aspect preserved; -2 makes height even
+      "-vf", `scale=${width}:-2:flags=lanczos`,
+      "-f", "image2pipe",
+      "-vcodec", "mjpeg",
+      "pipe:1",
+    ];
+
+    const proc = spawn('ffmpeg', args, { stdio: ['ignore', 'pipe', 'pipe'] })
+
+    const chunks: Buffer[] = []
+    let err = ''
+
+    proc.stdout.on('data', (d: Buffer) => chunks.push(d))
+    proc.stderr.on('data', (d: Buffer) => (err += d.toString('utf8')))
+
+    proc.on('error', reject)
+    proc.on('close', (code) => {
+      if (code !== 0) return reject(new Error(`ffmpeg exited ${code}: ${err}`))
+      resolve(Buffer.concat(chunks))
+    })
+  })
+}
+
+export async function generateVideoThumbnail(
+  videoUrl: string,
+  startTime: number | undefined,
+  width: number,
+): Promise<ThumbnailRenditionOutput> {
+  let tmpFile = ''
+  try {
+    tmpFile = await downloadToTempFile(videoUrl)
+    const frame = await extractVideoThumbnailFromFile(tmpFile, startTime, width)
+    return generateThumbnail(frame)
+  } finally {
+    unlink(tmpFile, noop)
+  }
+}
diff --git a/server/src/tasks/thumbnail-generators/webpage.ts b/server/src/tasks/thumbnail-generators/webpage.ts
new file mode 100644
index 0000000..932545c
--- /dev/null
+++ b/server/src/tasks/thumbnail-generators/webpage.ts
@@ -0,0 +1,114 @@
+import axios from 'axios'
+import { OEmbed } from 'tapestry-core/src/oembed.js'
+import { WEB_SOURCE_PARSERS } from 'tapestry-core/src/web-sources/index.js'
+import { generateThumbnail } from './image'
+import puppeteer, { BrowserContext, Page, ScreenshotOptions } from 'puppeteer'
+import { config } from '../../config.js'
+import { downloadImageToArrayBuffer } from '../utils'
+
+// This is the user agent as if the browser was launched with { headless : false }.
+// Vimeo appears to have some sort of filtering (evidently only for public videos) based on the user agent.
+// When the puppeteer browser is launched with { headless: true } (the default) it automatically has "HeadlessChrome"
+// as part of its user agent, which causes Vimeo to block the requests
+const USER_AGENT =
+  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36'
+
+async function inNewBrowserPage<T>(perform: (page: Page, context: BrowserContext) => Promise<T>) {
+  const start = Date.now()
+  const browser = await puppeteer.launch({ args: config.worker.puppeteerArgs.split(',') })
+  const context = await browser.createBrowserContext()
+  const page = await context.newPage()
+  await page.setUserAgent({ userAgent: USER_AGENT })
+
+  try {
+    return await perform(page, context)
+  } finally {
+    try {
+      await browser.close()
+    } catch (e) {
+      console.debug('Error while closing puppeteer browser context', e)
+    }
+    console.log(`Browser session completed in ${Date.now() - start}ms.`)
+  }
+}
+
+export interface ScreenshotConfig extends ScreenshotOptions {
+  width: number
+  height: number
+  timeout?: number
+  elementSelector?: string
+  setupContext?: (context: BrowserContext) => Promise<void>
+  interact?: (page: Page) => Promise<void>
+}
+
+export async function takeScreenshot(
+  url: string,
+  { width, height, setupContext, interact, timeout, elementSelector, ...options }: ScreenshotConfig,
+) {
+  console.log(`Taking screenshot of ${url} with dimensions ${width}x${height}...`)
+  return inNewBrowserPage(async (page, context) => {
+    console.log('>  Setting up context...')
+    await setupContext?.(context)
+    console.log('>  Configuring viewport...')
+    await page.setViewport({ width, height, deviceScaleFactor: 2 })
+    console.log(`>  Navigating to ${url}...`)
+    await page.goto(url, { timeout: 120_000 })
+    try {
+      console.log(`>  Waiting for network idle...`)
+      await page.waitForNetworkIdle({ idleTime: 3000, concurrency: 0, timeout: timeout ?? 60_000 })
+      console.log(`>  Waiting for fonts to load...`)
+      // @ts-expect-error The following expression will be evaluated in the browser context
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+      await page.evaluate(() => document.fonts.ready)
+    } catch (error) {
+      console.warn(
+        'Error while waiting for the page to load before taking a screenshot. ' +
+          'Taking the screenshot anyway, but it may appear broken.',
+        error,
+      )
+    }
+    console.log('>  Taking screenshot...')
+
+    const elementHandle = elementSelector
+      ? await page.waitForSelector(elementSelector, { visible: true })
+      : null
+
+    await interact?.(page)
+
+    return elementHandle ? elementHandle.screenshot(options) : page.screenshot(options)
+  })
+}
+
+export async function generateWebpageThumbnail(url: string, options: ScreenshotConfig) {
+  const screenshot = await takeScreenshot(url, options)
+  return generateThumbnail(Buffer.from(screenshot))
+}
+
+export async function generateYoutubeThumbnail(embedUrl: string) {
+  const videoId = WEB_SOURCE_PARSERS.youtube.getVideoId(embedUrl)
+  const urlsToTest = ['maxresdefault', 'hqdefault'].map(
+    (variant) => `https://i.ytimg.com/vi/${videoId}/${variant}.jpg`,
+  )
+
+  for (const url of urlsToTest) {
+    try {
+      const arrayBuffer = await downloadImageToArrayBuffer(url)
+      return generateThumbnail(arrayBuffer)
+    } catch (error) {
+      console.warn(`Failed to fetch YouTube thumbnail ${url}:`, error)
+    }
+  }
+
+  // If we couldn't find a thumbnail from known URL formats, try the oEmbed API
+  const { data: oembed } = await axios.get<OEmbed>(
+    `https://www.youtube.com/oembed?url=${WEB_SOURCE_PARSERS.youtube.getWatchUrl(embedUrl)}`,
+  )
+  const { type, thumbnail_url: thumbnailUrl } = oembed
+  if (type !== 'video' || !thumbnailUrl) return
+
+  const { data: blob } = await axios.get<ArrayBuffer>(thumbnailUrl, {
+    responseType: 'arraybuffer',
+  })
+
+  return generateThumbnail(Buffer.from(blob))
+}
diff --git a/server/src/tasks/utils.ts b/server/src/tasks/utils.ts
index 068a2c7..2025f06 100644
--- a/server/src/tasks/utils.ts
+++ b/server/src/tasks/utils.ts
@@ -1,13 +1,60 @@
-import { exec as nodeExec } from 'child_process'
-
-export function exec(cmd: string) {
-  return new Promise<string>((resolve, reject) => {
-    nodeExec(cmd, { maxBuffer: 50 * 1024 * 1024 }, (error, stdout) => {
-      if (error) {
-        reject(error)
-        return
-      }
-      resolve(stdout)
-    })
-  })
+import { createWriteStream } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { extname, join } from 'node:path'
+import { randomUUID } from 'node:crypto'
+import { Readable } from 'node:stream'
+import { finished } from 'node:stream/promises'
+
+export interface DownloadOpts {
+  timeoutMs?: number
+  maxBytes?: number
+  allowedContentTypePrefixes?: string[] // e.g. "video/"
+}
+
+export async function downloadImageToArrayBuffer(url: string) {
+  const res = await fetch(url, { redirect: 'follow' })
+  if (!res.ok) throw new Error(`Fetch failed: ${res.status} ${res.statusText}`)
+
+  const contentType = res.headers.get('content-type') || ''
+  if (!contentType.startsWith('image/')) {
+    throw new Error(`URL did not return an image (content-type: ${contentType || 'unknown'})`)
+  }
+
+  return Buffer.from(await res.arrayBuffer())
+}
+
+export async function downloadToTempFile(urlStr: string, opts: DownloadOpts = {}) {
+  const url = new URL(urlStr)
+
+  const {
+    timeoutMs = 60_000,
+    maxBytes = 200 * 1024 * 1024, // 200MB default limit
+    allowedContentTypePrefixes,
+  } = opts
+
+  const abortController = new AbortController()
+  const timeoutId = setTimeout(() => abortController.abort(), timeoutMs)
+
+  const res = await fetch(url, {
+    redirect: 'follow',
+    signal: abortController.signal,
+  }).finally(() => clearTimeout(timeoutId))
+
+  if (!res.ok || !res.body) throw new Error(`Fetch failed: ${res.status} ${res.statusText}`)
+
+  const contentType = (res.headers.get('content-type') || '').toLowerCase()
+  if (allowedContentTypePrefixes?.every((prefix) => !contentType.startsWith(prefix))) {
+    throw new Error(`Not a matching content-type: ${contentType || 'unknown'}`)
+  }
+
+  const contentLength = res.headers.get('content-length')
+  if (contentLength && Number(contentLength) > maxBytes) {
+    throw new Error(`Content too large (content-length=${contentLength})`)
+  }
+
+  const extension = extname(url.pathname) || '.bin'
+  const filePath = join(tmpdir(), `file-${randomUUID()}${extension}`)
+  await finished(Readable.fromWeb(res.body).pipe(createWriteStream(filePath)))
+
+  return filePath
 }
diff --git a/server/src/tasks/worker.ts b/server/src/tasks/worker.ts
index 14bbac0..7ffcad7 100644
--- a/server/src/tasks/worker.ts
+++ b/server/src/tasks/worker.ts
@@ -2,15 +2,15 @@ import { Job, Worker } from 'bullmq'
 import { BULLMQ_REDIS_BASE_OPTIONS, JobName, JobTypeMap, QUEUE_NAME } from './index.js'
 import { generateTapestryThumbnail } from './generate-tapestry-thumbnail.js'
 import { s3Cleanup } from './s3-cleanup.js'
-import { generateItemThumbnail } from './generate-item-thumbnail.js'
+import { processItemThumbnail } from './process-item-thumbnail.js'
 import { createTapestry } from './create-tapestry.js'
 
 async function processTask(job: Job<JobTypeMap[JobName], void, JobName>) {
   switch (job.name) {
     case 'generate-tapestry-thumbnail':
       return generateTapestryThumbnail(job.data as JobTypeMap['generate-tapestry-thumbnail'])
-    case 'generate-item-thumbnail':
-      return generateItemThumbnail(job.data as JobTypeMap['generate-item-thumbnail'])
+    case 'process-item-thumbnail':
+      return processItemThumbnail(job.data as JobTypeMap['process-item-thumbnail'])
     case 's3-cleanup':
       return s3Cleanup()
     case 'create-tapestry':
diff --git a/server/src/transformers/index.ts b/server/src/transformers/index.ts
index 668bff4..988188e 100644
--- a/server/src/transformers/index.ts
+++ b/server/src/transformers/index.ts
@@ -14,7 +14,7 @@ import { TapestryCreateJobDto } from 'tapestry-shared/src/data-transfer/resource
 import { userDbToDto } from './user.js'
 import { tapestryDbToDto } from './tapestry.js'
 import { get, identity, set, pick } from 'lodash-es'
-import { itemDbToDto } from './item.js'
+import { imageAssetRenditionDbToDto, itemDbToDto } from './item.js'
 import { relDbToDto } from './rel.js'
 import { commentDbToDto } from './comment.js'
 import { TapestryInteractionDto } from 'tapestry-shared/src/data-transfer/resources/dtos/tapestry-interaction.js'
@@ -30,6 +30,10 @@ import { OneOrMore } from 'tapestry-core/src/utils.js'
 import { UserSecretDto } from 'tapestry-shared/src/data-transfer/resources/dtos/user-secret.js'
 import { TapestryBookmarkDto } from 'tapestry-shared/src/data-transfer/resources/dtos/tapestry-bookmark.js'
 import { userToPublicProfileDto } from 'tapestry-shared/src/utils.js'
+import {
+  ImageAssetDto,
+  ImageAssetRenditionDto,
+} from 'tapestry-shared/src/data-transfer/resources/dtos/image-assets.js'
 
 interface DtoMap {
   Tapestry: { default: TapestryDto }
@@ -51,6 +55,8 @@ interface DtoMap {
   PresentationStep: { default: PresentationStepDto }
   UserSecret: { default: UserSecretDto }
   TapestryBookmark: { default: TapestryBookmarkDto }
+  ImageAsset: { default: ImageAssetDto }
+  ImageAssetRendition: { default: ImageAssetRenditionDto }
 }
 
 type ModelSerializer<M extends Prisma.ModelName, V extends keyof DtoMap[M]> = (
@@ -87,6 +93,8 @@ const MODEL_SERIALIZERS: ModelSerializersMap = {
   PresentationStep: { default: presentationStepDbToDto },
   UserSecret: { default: identity },
   TapestryBookmark: { default: identity },
+  ImageAsset: { default: identity },
+  ImageAssetRendition: { default: imageAssetRenditionDbToDto },
 }
 
 type RelationViews = {
diff --git a/server/src/transformers/item.ts b/server/src/transformers/item.ts
index e0126d3..2d9140a 100644
--- a/server/src/transformers/item.ts
+++ b/server/src/transformers/item.ts
@@ -1,10 +1,11 @@
-import { Item } from '@prisma/client'
+import { ImageAssetRendition, Item } from '@prisma/client'
 import { get, set } from 'lodash-es'
 import { HexColor } from 'tapestry-core/src/data-format/schemas/common.js'
 import { ItemDto } from 'tapestry-shared/src/data-transfer/resources/dtos/item.js'
 import { extractInternallyHostedS3Key, s3Service } from '../services/s3-service.js'
 import { isHTTPURL } from 'tapestry-core/src/utils.js'
 import { MEDIA_ITEM_TYPES } from 'tapestry-core/src/data-format/schemas/item.js'
+import { ImageAssetRenditionDto } from 'tapestry-shared/src/data-transfer/resources/dtos/image-assets.js'
 
 export async function parseDBItemSource(source: string) {
   const internallyHosted = !isHTTPURL(source) && !source.startsWith('blob:')
@@ -12,6 +13,24 @@ export async function parseDBItemSource(source: string) {
   return { source, internallyHosted }
 }
 
+export async function imageAssetRenditionDbToDto(
+  dbRendition: ImageAssetRendition,
+): Promise<ImageAssetRenditionDto> {
+  return Promise.resolve({
+    id: dbRendition.id,
+    createdAt: dbRendition.createdAt,
+    updatedAt: dbRendition.updatedAt,
+    source: (await parseDBItemSource(dbRendition.source)).source,
+    format: dbRendition.format,
+    isPrimary: dbRendition.isPrimary,
+    isAutoGenerated: dbRendition.isAutoGenerated,
+    size: {
+      width: dbRendition.width,
+      height: dbRendition.height,
+    },
+  })
+}
+
 export async function itemDbToDto(dbItem: Item): Promise<ItemDto> {
   const commonProps = {
     id: dbItem.id,
@@ -53,23 +72,7 @@ export async function itemDbToDto(dbItem: Item): Promise<ItemDto> {
     }
   }
 
-  const thumbnail = dbItem.thumbnail
-    ? {
-        source: await s3Service.getReadObjectUrl(dbItem.thumbnail),
-        size: {
-          width: dbItem.thumbnailWidth!,
-          height: dbItem.thumbnailHeight!,
-        },
-      }
-    : undefined
-
-  const commonMediaItemProps = {
-    ...(await parseDBItemSource(dbItem.source!)),
-    thumbnail,
-    customThumbnail: dbItem.customThumbnail
-      ? (await parseDBItemSource(dbItem.customThumbnail)).source
-      : null,
-  }
+  const commonMediaItemProps = await parseDBItemSource(dbItem.source!)
 
   if (type === 'video' || type === 'audio') {
     return {
@@ -123,14 +126,11 @@ const DB_TO_DTO_FIELD_MAP: Record<ItemDBField, string> = {
   text: 'text',
   backgroundColor: 'backgroundColor',
   source: 'source',
-  thumbnail: 'thumbnail.source',
-  thumbnailWidth: 'thumbnail.size.width',
-  thumbnailHeight: 'thumbnail.size.height',
+  thumbnailId: 'thumbnailId',
   startTime: 'startTime',
   stopTime: 'stopTime',
   groupId: 'groupId',
   notes: 'notes',
-  customThumbnail: 'customThumbnail',
   defaultPage: 'defaultPage',
   actionType: 'actionType',
   action: 'action',
@@ -165,7 +165,6 @@ export function itemDtoToDb<O extends ItemDBField>(
   }
 
   dbItem.source = extractInternallyHostedS3Key(dbItem.source) ?? dbItem.source
-  dbItem.thumbnail = extractInternallyHostedS3Key(dbItem.thumbnail) ?? dbItem.thumbnail
 
   return dbItem as Omit<Item, O>
 }
diff --git a/shared/src/data-transfer/resources/dtos/image-assets.ts b/shared/src/data-transfer/resources/dtos/image-assets.ts
new file mode 100644
index 0000000..1d37087
--- /dev/null
+++ b/shared/src/data-transfer/resources/dtos/image-assets.ts
@@ -0,0 +1,5 @@
+import { BaseResourceDto } from './common.js'
+import { ImageAsset, ImageAssetRendition } from 'tapestry-core/src/data-format/schemas/item.js'
+
+export interface ImageAssetDto extends ImageAsset, BaseResourceDto {}
+export interface ImageAssetRenditionDto extends ImageAssetRendition, BaseResourceDto {}
diff --git a/shared/src/data-transfer/resources/dtos/item.ts b/shared/src/data-transfer/resources/dtos/item.ts
index f8a895e..7123b15 100644
--- a/shared/src/data-transfer/resources/dtos/item.ts
+++ b/shared/src/data-transfer/resources/dtos/item.ts
@@ -6,11 +6,13 @@ import {
   AudioItem,
   BookItem,
   ImageItem,
+  Item,
   PdfItem,
   TextItem,
   VideoItem,
   WebpageItem,
 } from 'tapestry-core/src/data-format/schemas/item.js'
+import { Size } from 'tapestry-core/src/data-format/schemas/common.js'
 
 interface BaseItemDto extends BaseResourceDto {
   tapestry?: TapestryDto | null
@@ -21,28 +23,33 @@ interface BaseMediaItemDto extends BaseItemDto {
   internallyHosted: boolean
 }
 
-type ItemReadonlyProps = keyof BaseItemDto
+interface ThumbnailUpdate {
+  thumbnail?: {
+    source: string
+    size: Size
+  } | null
+}
+
+type ItemReadonlyProps = keyof BaseItemDto | 'thumbnail'
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type NonNullishType = { type: {} }
 
+type CreateDto<I extends Item & BaseItemDto> = Omit<I, Exclude<ItemReadonlyProps, 'tapestryId'>>
+type CreateInTapestryDto<I extends Item & BaseItemDto> = Omit<I, Exclude<ItemReadonlyProps, 'id'>>
+type UpdateDto<I extends Item & BaseItemDto> = Omit<Partial<I>, ItemReadonlyProps> &
+  NonNullishType &
+  ThumbnailUpdate
+
 export interface TextItemDto extends TextItem, BaseItemDto {}
 
-export type TextItemCreateDto = Omit<TextItemDto, Exclude<ItemReadonlyProps, 'tapestryId'>>
-export type TextItemCreateInTapestryDto = Omit<TextItemDto, Exclude<ItemReadonlyProps, 'id'>>
-export type TextItemUpdateDto = Omit<Partial<TextItemDto>, ItemReadonlyProps> & NonNullishType
+export type TextItemCreateDto = CreateDto<TextItemDto>
+export type TextItemCreateInTapestryDto = CreateInTapestryDto<TextItemDto>
+export type TextItemUpdateDto = UpdateDto<TextItemDto>
 
 export interface ActionButtonItemDto extends ActionButtonItem, BaseItemDto {}
-
-export type ActionButtonItemCreateDto = Omit<
-  ActionButtonItemDto,
-  Exclude<ItemReadonlyProps, 'tapestryId'>
->
-export type ActionButtonItemCreateInTapestryDto = Omit<
-  ActionButtonItemDto,
-  Exclude<ItemReadonlyProps, 'id'>
->
-export type ActionButtonItemUpdateDto = Omit<Partial<ActionButtonItemDto>, ItemReadonlyProps> &
-  NonNullishType
+export type ActionButtonItemCreateDto = CreateDto<ActionButtonItemDto>
+export type ActionButtonItemCreateInTapestryDto = CreateInTapestryDto<ActionButtonItemDto>
+export type ActionButtonItemUpdateDto = UpdateDto<ActionButtonItemDto>
 
 export interface AudioItemDto extends AudioItem, BaseMediaItemDto {}
 export interface VideoItemDto extends VideoItem, BaseMediaItemDto {}
@@ -59,7 +66,7 @@ export type MediaItemDto =
   | VideoItemDto
   | WebpageItemDto
 
-type MediaItemReadonlyProps = ItemReadonlyProps | 'thumbnail' | 'internallyHosted'
+type MediaItemReadonlyProps = ItemReadonlyProps | 'internallyHosted'
 
 type BaseMediaItemWriteProps = MediaItemDto & {
   skipSourceResolution?: boolean
@@ -81,7 +88,8 @@ export type MediaItemUpdateDto = DistributiveOmit<
   Partial<BaseMediaItemWriteProps>,
   MediaItemReadonlyProps
 > &
-  NonNullishType
+  NonNullishType &
+  ThumbnailUpdate
 
 export type ItemDto = TextItemDto | ActionButtonItemDto | MediaItemDto
 export type ItemCreateDto = TextItemCreateDto | ActionButtonItemCreateDto | MediaItemCreateDto
diff --git a/shared/src/data-transfer/resources/index.ts b/shared/src/data-transfer/resources/index.ts
index 324c17a..6c71d7c 100644
--- a/shared/src/data-transfer/resources/index.ts
+++ b/shared/src/data-transfer/resources/index.ts
@@ -90,7 +90,7 @@ import {
 
 const tapestryIncludes = [
   'owner',
-  'items',
+  'items.thumbnail.renditions',
   'rels',
   'groups',
   'userAccess',
diff --git a/shared/src/data-transfer/resources/schemas/item.ts b/shared/src/data-transfer/resources/schemas/item.ts
index 38eeac6..819aa32 100644
--- a/shared/src/data-transfer/resources/schemas/item.ts
+++ b/shared/src/data-transfer/resources/schemas/item.ts
@@ -11,7 +11,7 @@ import {
   ImageItemSchema as BaseImageItemSchema,
   WebpageItemSchema as BaseWebpageItemSchema,
 } from 'tapestry-core/src/data-format/schemas/item.js'
-import { IdentifiableSchema } from 'tapestry-core/src/data-format/schemas/common.js'
+import { IdentifiableSchema, SizeSchema } from 'tapestry-core/src/data-format/schemas/common.js'
 
 const readonlyProps = {
   tapestryId: z.string(),
@@ -32,7 +32,17 @@ function constructItemSchemas<P extends Record<string, ZodType>>(
     ...readonlyProps,
     ...itemProps,
   })
-  const createItemProps = omit(itemProps, createOmitProps) as P
+  const itemWriteProps = {
+    ...(itemProps as Omit<P, 'thumbnail'>),
+    thumbnail: z
+      .object({
+        source: z.string(),
+        size: SizeSchema,
+      })
+      .nullish(),
+  }
+  type W = typeof itemWriteProps
+  const createItemProps = omit(itemWriteProps, createOmitProps) as W
   const itemCreateSchema = z.object({
     ...readonlyProps,
     ...createItemProps,
@@ -45,10 +55,10 @@ function constructItemSchemas<P extends Record<string, ZodType>>(
     ...createItemProps,
   })
 
-  const { type, ...otherProps } = itemProps
+  const { type, ...otherProps } = itemWriteProps
   const partialProps = z
     .object({
-      ...(omit(otherProps, createOmitProps) as Omit<P, 'type'>),
+      ...(omit(otherProps, createOmitProps) as Omit<W, 'type'>),
     })
     .partial()
   const itemUpdateSchema = z.object({ ...partialProps.shape, type: type as P['type'] })
diff --git a/shared/src/data-transfer/resources/types.ts b/shared/src/data-transfer/resources/types.ts
index c228fcc..e6c803d 100644
--- a/shared/src/data-transfer/resources/types.ts
+++ b/shared/src/data-transfer/resources/types.ts
@@ -1,5 +1,5 @@
 import type { ZodType } from 'zod/v4'
-import type { Path } from 'tapestry-core/src/type-utils.js'
+import type { Prev } from 'tapestry-core/src/type-utils.js'
 import {
   EmptyObject,
   IdParam,
@@ -31,7 +31,23 @@ export interface Request<PathParams extends IO = IO, Query extends IO = IO, Body
   body: Body
 }
 
-export type Includes<R> = readonly Path<R>[]
+// This type is very similar to Path<T> except that it skips array indices
+export type Include<R, D extends number = 3> = [D] extends [never]
+  ? never
+  : R extends Date
+    ? never
+    : R extends unknown[]
+      ? Include<R[number], Prev[D]>
+      : R extends object
+        ? {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+            [K in keyof R]-?: R[K] extends Function
+              ? never
+              : `${Extract<K, string>}${'' | `.${Include<R[K], Prev[D]>}`}`
+          }[keyof R]
+        : never
+
+export type Includes<R> = readonly Include<R>[]
 
 export interface Endpoint<
   Method extends HTTPMethod = HTTPMethod,
diff --git a/shared/src/utils.ts b/shared/src/utils.ts
index a5097d9..43e2818 100644
--- a/shared/src/utils.ts
+++ b/shared/src/utils.ts
@@ -1,4 +1,5 @@
 import { PublicUserProfileDto, UserDto } from './data-transfer/resources/dtos/user'
+import { Size } from 'tapestry-core/src/data-format/schemas/common'
 
 export function userToPublicProfileDto(user: UserDto): PublicUserProfileDto {
   return {
@@ -11,3 +12,12 @@ export function userToPublicProfileDto(user: UserDto): PublicUserProfileDto {
     avatar: user.avatar,
   }
 }
+
+export function generateItemThumbnailRenditionName(
+  itemId: string,
+  opts: { isPrimary: boolean; isAutoGenerated: boolean; format: string; size: Size },
+) {
+  const autoPrefix = opts.isAutoGenerated ? 'auto' : 'custom'
+  const primaryPrefix = opts.isPrimary ? 'primary' : 'derived'
+  return `${itemId}-${autoPrefix}-${primaryPrefix}-thumbnail-${opts.format}-${opts.size.width}x${opts.size.height}`
+}
diff --git a/viewer/src/components/tapestry/index.tsx b/viewer/src/components/tapestry/index.tsx
index ad6d25b..6608e62 100644
--- a/viewer/src/components/tapestry/index.tsx
+++ b/viewer/src/components/tapestry/index.tsx
@@ -14,6 +14,7 @@ import { TapestryLifecycleController } from 'tapestry-core-client/src/stage/cont
 import { GlobalEventsController } from 'tapestry-core-client/src/stage/controller/global-events-controller'
 import { ItemController } from 'tapestry-core-client/src/stage/controller/item-controller'
 import { ViewportController } from 'tapestry-core-client/src/stage/controller/viewport-controller'
+import { ItemThumbnailController } from 'tapestry-core-client/src/stage/controller/item-thumbnail-controller'
 import { TapestryRenderer } from 'tapestry-core-client/src/stage/renderer'
 import { idMapToArray } from 'tapestry-core/src/utils'
 import { useTapestryStore } from '../../app'
@@ -32,7 +33,7 @@ export function Tapestry({ onBack }: TapestryProps) {
   const store = useTapestryStore()
 
   useStageInit(sceneRef, {
-    gestureDectorOptions: { scrollGesture: 'pan', dragToPan: store.get('pointerMode') === 'pan' },
+    gestureDetectorOptions: { scrollGesture: 'pan', dragToPan: store.get('pointerMode') === 'pan' },
     createPixiApps: async () => [
       {
         name: 'tapestry',
@@ -44,6 +45,7 @@ export function Tapestry({ onBack }: TapestryProps) {
     lifecycleController: (stage) =>
       new TapestryLifecycleController(store, stage, {
         default: [
+          new ItemThumbnailController(store),
           new ViewportController(store, stage),
           new (class extends TapestryRenderer<TapestryElementViewModel> {
             protected getItems() {
diff --git a/viewer/src/index.css b/viewer/src/index.css
index 4eb42d7..b70218d 100644
--- a/viewer/src/index.css
+++ b/viewer/src/index.css
@@ -43,13 +43,6 @@ body,
     transform-origin: 0% 0%;
     user-select: none;
     -webkit-user-select: none;
-
-    /* This is used in order to force the browser (Safari in particular)
-     * to draw a compositing layer for the dom-container. Otherwise when the dom-container
-     * goes out of the viewport Safari starts drawing layers for every single item in the viewport
-     * which causes crashes on iPhones
-     */
-    will-change: transform;
   }
 }
 
diff --git a/viewer/src/services/import-service.ts b/viewer/src/services/import-service.ts
index 716bba4..dfcab7c 100644
--- a/viewer/src/services/import-service.ts
+++ b/viewer/src/services/import-service.ts
@@ -6,6 +6,7 @@ import {
   type Entry,
   type FileEntry,
 } from '@zip.js/zip.js'
+import { compact } from 'lodash-es'
 import { Store } from 'tapestry-core-client/src/lib/store'
 import { viewModelFromTapestry } from 'tapestry-core-client/src/view-model/utils'
 import {
@@ -15,7 +16,8 @@ import {
   ROOT_FILE,
 } from 'tapestry-core/src/data-format/export'
 import { HexColor } from 'tapestry-core/src/data-format/schemas/common'
-import { hasThumbnail, isMediaItem } from 'tapestry-core/src/utils'
+import { MediaItem } from 'tapestry-core/src/data-format/schemas/item'
+import { isMediaItem } from 'tapestry-core/src/utils'
 
 type ExportItem = NonNullable<CurrentExport['items']>[number]
 
@@ -59,21 +61,23 @@ export class ImportService {
     this.entries.find((e) => e.filename === name) as FileEntry | undefined
 
   private parseItem = async (i: ExportItem) => {
-    if (!isMediaItem(i)) {
-      return i
+    const item = { ...i }
+
+    if (isMediaItem(i)) {
+      ;(item as MediaItem).source = (await this.toObjectUrl(i.source)) ?? i.source
     }
 
-    return {
-      ...i,
-      source: (await this.toObjectUrl(i.source)) ?? i.source,
-      thumbnail: hasThumbnail(i)
-        ? {
-            source: (await this.toObjectUrl(i.thumbnail.source))!,
-            size: i.thumbnail.size,
-          }
-        : undefined,
-      customThumbnail: await this.toObjectUrl(i.customThumbnail),
+    item.thumbnail = i.thumbnail && {
+      renditions: compact(
+        await Promise.all(
+          i.thumbnail.renditions.map(async (r) => {
+            const source = await this.toObjectUrl(r.source)
+            return source && { ...r, source }
+          }),
+        ),
+      ),
     }
+    return item
   }
 
   private async toObjectUrl(url: string | undefined | null) {