diff --git a/.changeset/image-preloads.md b/.changeset/image-preloads.md
new file mode 100644
index 0000000..cb38ec2
--- /dev/null
+++ b/.changeset/image-preloads.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/redact': patch
+---
+
+Document renders now preload the images they render eagerly and open `<head>` with the charset and viewport metas, as React's server renderer does. Every `<img>` outside `<picture>`, `<noscript>` and SVG that has a `src` or `srcSet`, is not `loading="lazy"` or `fetchPriority="low"` and is not a `data:` URI gets a `<link rel="preload" as="image">`; the first ten and every `fetchPriority="high"` image are placed ahead of the stylesheets, the rest after the scripts.
diff --git a/packages/redact/src/server/dispatcher.ts b/packages/redact/src/server/dispatcher.ts
index fe22539..2fc7b6b 100644
--- a/packages/redact/src/server/dispatcher.ts
+++ b/packages/redact/src/server/dispatcher.ts
@@ -17,9 +17,11 @@ export interface SSRFrame {
 
 let frame: SSRFrame | null = null
 
+const resources = () => frame!.resources ||= createResourceHints(!!frame!.shellFlushed, frame!.styleNonce)
+
 resourceHintDispatcher.emit = (kind, href, options) => {
   if (!frame) return false
-  ;(frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).add(kind, href, options)
+  resources().add(kind, href, options)
   return true
 }
 
@@ -35,7 +37,13 @@ export function currentSSRFrame(): SSRFrame {
 }
 
 export function recordHostResource(type: string, props: any, scope?: ResourceScope): boolean {
-  return !!frame && (frame.resources ||= createResourceHints(!!frame.shellFlushed, frame.styleNonce)).addHost(type, props, scope)
+  return !!frame && resources().addHost(type, props, scope)
+}
+
+// An <img> adds its preload. A charset or viewport <meta> in the shell returns the sink that
+// hoists its markup.
+export function recordHoisted(tag: string, props: any): ((chunk: string) => void) | null | void {
+  if (frame) return tag === 'img' ? resources().addImage(props) : resources().addMeta(props)
 }
 
 export function endSSR(previous?: ReturnType<typeof beginSSR>): void {
diff --git a/packages/redact/src/server/resource-hints.ts b/packages/redact/src/server/resource-hints.ts
index 285812a..393cbc9 100644
--- a/packages/redact/src/server/resource-hints.ts
+++ b/packages/redact/src/server/resource-hints.ts
@@ -1,4 +1,4 @@
-import { isFunction } from '../core/functions'
+import { isFunction, isString } from '../core/functions'
 import { resourceKind, resourceURL, type ResourceHintKind, type ResourceHintOptions } from '../core/resource-hints'
 import { attrToHtml, escapeAttr } from './escape'
 import { attributeName } from '../core/attributes'
@@ -56,8 +56,9 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
   const styles = new Map<string, Resource[]>()
   const dependencies = new Map<string, string[]>()
   const visibleInline = new Set<string>()
+  let charset = '', viewport = ''
   const collector = {
-    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions): Resource {
+    add(kind: ResourceHintKind | 'style', href: string, options: ResourceHintOptions, eager?: boolean): Resource {
       let type: string = kind
       let source = href
       const init = kind === 'style' || kind === 'stylesheet' || kind === 'script' || kind === 'module-script'
@@ -69,7 +70,15 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       else if (kind === 'preconnect') type += ':' + (options.crossOrigin ?? 'default')
       const key = JSON.stringify([type, source])
       const prior = resources.get(key)
-      if (prior && (!init || prior.kind !== 'preload' && prior.kind !== 'modulepreload')) return prior
+      // Image preloads that go ahead of the stylesheets: every fetchPriority="high" one and the
+      // first ten eager <img> per flush, as in React.
+      const high = kind === 'preload' && options.as === 'image' && (options.fetchPriority === 'high' || eager && groups[2]!.length < 10)
+      if (prior && (!init || prior.kind !== 'preload' && prior.kind !== 'modulepreload')) {
+        // An eager <img> also moves the preload() of the same image ahead, keeping its attributes.
+        const index = eager && high ? groups[4]!.indexOf(prior) : -1
+        if (index >= 0) groups[2]!.push(...groups[4]!.splice(index, 1))
+        return prior
+      }
 
       const resource: Resource = { kind, href, options: { ...options } }
       if (kind === 'style' && (!styleNonce || options.nonce === styleNonce)) resource.css = styleText(options)
@@ -89,12 +98,32 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       } else {
         const group = kind === 'dns-prefetch' || kind === 'preconnect' ? 0
           : kind === 'preload' && options.as === 'font' ? 1
-          : kind === 'preload' && options.as === 'image' && options.fetchPriority === 'high' ? 2
+          : high ? 2
           : init ? 3 : 4
         groups[group]!.push(resource)
       }
       return resource
     },
+    // Preload an eagerly rendered <img> as React does: the first ten per flush and every
+    // fetchPriority="high" image go ahead of the stylesheets, the rest after the scripts.
+    addImage(props: any): void {
+      const { srcSet } = props, source = srcSet || props.src
+      if (props.loading === 'lazy' || props.fetchPriority === 'low' || !source || !isString(source) || /^data:/i.test(source)) return
+      collector.add('preload', source, { as: 'image', imageSrcSet: srcSet, imageSizes: props.sizes, crossOrigin: props.crossOrigin, integrity: props.integrity, type: props.type, fetchPriority: props.fetchPriority, referrerPolicy: props.referrerPolicy } as any, true)
+    },
+    // Hoist <meta charSet> and <meta name="viewport"> to the start of the head. Content streamed
+    // after the shell keeps its metas in place.
+    addMeta(props: any): ((chunk: string) => void) | null {
+      const isCharset = isString(props.charSet)
+      return !shellFlushed && (isCharset || props.name === 'viewport') && props.itemProp == null ? chunk => { isCharset ? charset += chunk : viewport += chunk } : null
+    },
+    // Snapshot the hoisted metas, or restore a snapshot when the content that added them is
+    // discarded (a suspended boundary, an abandoned shell attempt). Hints stay: they deduplicate.
+    metas(restore?: string[]): string[] {
+      const saved = [charset, viewport]
+      if (restore) [charset, viewport] = restore as [string, string]
+      return saved
+    },
     addHost(type: string, props: any, scope?: ResourceScope): boolean {
       const kind = resourceKind(type, props)
       if (!kind) return false
@@ -127,7 +156,8 @@ export function createResourceHints(shellFlushed = false, styleNonce?: string) {
       return result
     },
     drain(): string {
-      let output = ''
+      let output = charset + viewport
+      charset = viewport = ''
       function flush(group: Resource[], precedence?: string) {
         let remaining = 0
         let inline = false, hasStylesheets = false
diff --git a/packages/redact/src/server/stream.ts b/packages/redact/src/server/stream.ts
index 694a489..a17fc88 100644
--- a/packages/redact/src/server/stream.ts
+++ b/packages/redact/src/server/stream.ts
@@ -124,6 +124,7 @@ export async function streamHtml(
         shellChunks.length = chunkCount
         boundaries.length = boundaryCount
         state.nextId = nextId
+        currentSSRFrame().resources?.metas(['', ''])
         if (!isThenable(err)) throw err
         if (++rootRetries > 50) {
           throw new Error('renderToReadableStream exceeded 50 root suspension retries.')
@@ -221,6 +222,7 @@ function streamBoundary(
           onError: options.onError,
         componentStack: b.componentStack,
         resourceScope,
+        textState: { bits: b.textBits },
       })
       state.frame?.resources?.mergeScope(resourceScope)
     } catch (err) {
diff --git a/packages/redact/src/server/walk.ts b/packages/redact/src/server/walk.ts
index c015f74..a871c3f 100644
--- a/packages/redact/src/server/walk.ts
+++ b/packages/redact/src/server/walk.ts
@@ -34,6 +34,7 @@ import {
   popContext,
   snapshotContexts,
   recordHostResource,
+  recordHoisted,
   currentSSRFrame,
   type ContextSnapshot,
 } from './dispatcher'
@@ -54,6 +55,8 @@ export interface SuspendedBoundary {
   thenable: Promise<any>
   contextSnapshot: ContextSnapshot
   componentStack: string
+  // SVG, picture, noscript and document flags of the parent, so a boundary rendered later keeps them.
+  textBits: number
 }
 
 export interface WalkOptions {
@@ -68,7 +71,8 @@ export interface WalkOptions {
   bootstrapped?: boolean | undefined
   isBoundaryResolution?: boolean | undefined
   resourceScope?: ResourceScope | undefined
-  // Shared traversal flags: SVG = 1, adjacent text = 2.
+  // Shared traversal flags: SVG = 1, adjacent text = 2, inside <picture> = 4, inside <noscript> = 8,
+  // inside <html> = 16.
   // Host children restore previous flags on return or throw.
   textState?: { bits: number }
 }
@@ -247,6 +251,19 @@ function walkHost(
 ): void {
   const isSvg = !!(opts.textState!.bits & 1) || tag === 'svg'
   if (!isSvg && resourceKind(tag, props) && recordHostResource(tag, props, opts.resourceScope)) return
+  // In a document render React's server renderer preloads the images it renders eagerly and
+  // opens <head> with the charset and viewport metas. Only document renders do this here, since
+  // their head is position-insensitive for hydration. Neither applies inside <svg> or <noscript>,
+  // and images inside <picture> are not preloaded.
+  const bits = opts.textState!.bits
+  if (!isSvg && bits & 16 && !(bits & 8) && (tag === 'meta' || tag === 'img' && !(bits & 4))) {
+    const emit = recordHoisted(tag, props)
+    if (emit) {
+      // The hoisted meta leaves the body, so keep the text around it apart as React does.
+      if (bits & 2) opts.emit('<!-- -->')
+      opts = { ...opts, emit }
+    }
+  }
   // <textarea value="..."> serializes its value as a TEXT CHILD, not an
   // attribute. `defaultValue` is the fallback when `value` is absent. This
   // matches React and the HTML spec — `<textarea value="x">` is not valid
@@ -322,7 +339,7 @@ function walkHost(
 
   if (VOID_ELEMENTS.has(tag)) {
     opts.emit('/>')
-    opts.textState!.bits &= 1
+    opts.textState!.bits &= 29
     return
   }
   opts.emit('>')
@@ -342,7 +359,7 @@ function walkHost(
   if (isTextarea && textareaValue != null) {
     opts.emit(escapeText(String(textareaValue)))
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 1
+    parentTextState!.bits &= 29
     return
   }
 
@@ -360,7 +377,7 @@ function walkHost(
       }
     }
     opts.emit(`</${tag}>`)
-    parentTextState!.bits &= 1
+    parentTextState!.bits &= 29
     return
   }
 
@@ -368,7 +385,7 @@ function walkHost(
     opts.emit(String(dangerouslyHtml))
   } else {
     const previousState = parentTextState!.bits
-    parentTextState!.bits = +(isSvg && tag !== 'foreignObject')
+    parentTextState!.bits = +(isSvg && tag !== 'foreignObject') | previousState & 28 | (tag === 'picture' ? 4 : tag === 'noscript' ? 8 : tag === 'html' ? 16 : 0)
     try {
       walkNode(props.children, opts)
     } finally {
@@ -377,7 +394,7 @@ function walkHost(
   }
   opts.emit(`</${tag}>`)
   // Host element closing resets outer flow — next sibling text starts fresh.
-  parentTextState!.bits &= 1
+  parentTextState!.bits &= 29
   } finally {
     if (isSelect) popSelectContext()
   }
@@ -459,37 +476,51 @@ function walkSuspense(
   const nested: SuspendedBoundary[] = []
   const thrownInfo: { componentStack?: string | undefined } = {}
   const childEmit = (s: string) => childParts.push(s)
+  // Where <head> opened inside the buffered children, reported to the renderer once they commit.
+  let head = -1
   const resourceScope: ResourceScope | undefined = currentSSRFrame().shellFlushed ? {} : undefined
+  const frame = currentSSRFrame()
+  const metas = frame.resources?.metas()
   try {
     walkNode(props.children, {
       ...opts,
       resourceScope,
       thrownInfo,
       emit: childEmit,
+      onHead: () => { head = childParts.length },
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
   } catch (thenable: any) {
     nested.length = 0
+    frame.resources?.metas(metas || ['', ''])
     const suspended = isThenable(thenable)
     if (!suspended) {
       if (isBrowserError(thenable)) opts.onBrowserBailout?.(thenable, { componentStack: (thenable as any).componentStack || opts.componentStack || '' })
       else opts.onError?.(thenable)
     }
     const fallbackParts: string[] = []
+    head = -1
     walkNode(props.fallback, {
       ...opts,
       emit: (s) => fallbackParts.push(s),
+      onHead: () => { head = fallbackParts.length },
       onSuspend: opts.onSuspend ? (boundary) => nested.push(boundary) : undefined,
       nextBoundaryId: opts.nextBoundaryId,
     })
-    if (!suspended) {
-      opts.emit(`<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->${fallbackParts.join('')}<!--/$-->`)
-    } else emitBoundary(opts, id, fallbackParts.join(''))
+    // A fallback's charset and viewport metas are omitted, as React omits hoistables from fallbacks.
+    frame.resources?.metas(metas || ['', ''])
+    // Visible div wrapper for a pending boundary so the fallback UI shows; B: id lets $RC locate it on
+    // reveal. The leading/trailing comments let hydration detect a pending boundary and register a
+    // reveal callback.
+    opts.emit(suspended ? `<!--$?${id}--><div id="B:${id}">` : `<!--${isBrowserError(thenable) ? '$!' : '$E'}${id}-->`)
+    emitParts(opts, fallbackParts, head)
+    opts.emit(suspended ? '</div><!--/$-->' : '<!--/$-->')
     for (const boundary of nested) opts.onSuspend?.(boundary)
     if (suspended) opts.onSuspend?.({
       id, fallbackHTML: fallbackParts.join(''), children: props.children, thenable, contextSnapshot,
       componentStack: thrownInfo.componentStack || opts.componentStack || '',
+      textBits: opts.textState!.bits & 29,
     })
     return
   }
@@ -504,16 +535,15 @@ function walkSuspense(
   // producing visible duplicates (e.g. double navbar logos). Markers let the
   // client treat this as a resolved boundary and hydrate in-place.
   opts.emit(`<!--$${id}-->`)
-  opts.emit(childParts.join(''))
+  emitParts(opts, childParts, head)
   opts.emit(`<!--/$-->`)
   for (const boundary of nested) opts.onSuspend?.(boundary)
 }
 
-function emitBoundary(opts: WalkOptions, id: number, fallbackHTML: string): void {
-  // Visible div wrapper so the fallback UI shows; B: id lets $RC locate it on
-  // reveal. The leading/trailing comments let hydration detect a pending
-  // boundary and register a reveal callback.
-  opts.emit(`<!--$?${id}--><div id="B:${id}">`)
-  opts.emit(fallbackHTML)
-  opts.emit(`</div><!--/$-->`)
+// Emit buffered output, reporting where <head> opened in it so the renderer inserts its hints there.
+function emitParts(opts: WalkOptions, parts: string[], head: number): void {
+  if (head < 0) return opts.emit(parts.join(''))
+  opts.emit(parts.slice(0, head).join(''))
+  opts.onHead?.()
+  opts.emit(parts.slice(head).join(''))
 }
diff --git a/scripts/size-check.mjs b/scripts/size-check.mjs
index fc69f74..c5b39d6 100644
--- a/scripts/size-check.mjs
+++ b/scripts/size-check.mjs
@@ -63,11 +63,17 @@ const STORE_HYDRATION_SIZE_ALLOWANCE = {
   'redact/dom-client (hydration=stub)': [3, 0],
 }
 
+// Approved image preload and head meta hoisting cost on main 0c7274e, [source, built].
+// Only the server bundle changes; the client entries are untouched.
+const IMAGE_PRELOAD_SIZE_ALLOWANCE = {
+  'redact/server': [468, 468],
+}
+
 let failed = false
 for (const tree of ['src', 'dist']) {
   for (const row of await measureSizes(tree)) {
     const baseBudget = BUDGETS[row.name]
-    const budget = baseBudget === undefined ? undefined : baseBudget + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
+    const budget = baseBudget === undefined ? undefined : baseBudget + (IMAGE_PRELOAD_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (STORE_HYDRATION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (ROOT_TRANSITION_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0) + (QUEUE_SIZE_ALLOWANCE[row.name]?.[tree === 'src' ? 0 : 1] ?? 0)
     const ok = budget !== undefined && row.gz <= budget
     failed ||= !ok
     console.log(`${ok ? 'PASS' : 'FAIL'} ${tree} ${row.name}: ${row.gz} B gzip, budget ${budget ?? 'missing'}`)
diff --git a/tests/image-preloads.test.tsx b/tests/image-preloads.test.tsx
new file mode 100644
index 0000000..89eabad
--- /dev/null
+++ b/tests/image-preloads.test.tsx
@@ -0,0 +1,325 @@
+import { describe, expect, it, vi } from 'vitest'
+import { preload } from 'react-dom'
+import { hydrateRoot } from 'react-dom/client'
+import { renderToReadableStream, renderToString } from 'react-dom/server'
+
+type Attributes = Record<string, string>
+function tags(html: string): Attributes[] {
+  return Array.from(html.matchAll(/<(link|meta|title)\b([^>]*)>/g), ([, tag, source]) => ({
+    tag: tag!,
+    ...Object.fromEntries(Array.from(source!.matchAll(/([\w-]+)="([^"]*)"/g), ([, name, value]) => [name!.toLowerCase(), value!])),
+  }))
+}
+const head = (html: string) => tags(html.slice(html.indexOf('<head>'), html.indexOf('</head>')))
+
+function Page({ children }: { children?: any }) {
+  return (
+    <html>
+      <head>
+        <link rel="stylesheet" href="/app.css" precedence="default" />
+        <title>page</title>
+        <meta name="viewport" content="width=device-width" />
+        <meta charSet="utf-8" />
+        <meta name="description" content="stays in place" />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const images = (
+  <>
+    <img src="/hero.png" fetchPriority="high" alt="" />
+    <img src="/plain.png" alt="" />
+    <img src="/plain.png" alt="again" />
+    <img src="/fallback.png" srcSet="/small.png 1x, /large.png 2x" sizes="100vw" crossOrigin="anonymous" alt="" />
+    <img src="/lazy.png" loading="lazy" alt="" />
+    <img src="/low.png" fetchPriority="low" alt="" />
+    <img src="data:image/png;base64,AAAA" alt="" />
+    <img src="" alt="" />
+    <picture><source srcSet="/picture.webp" type="image/webp" /><img src="/picture.png" alt="" /></picture>
+    <noscript><img src="/noscript.png" alt="" /></noscript>
+    <svg><image href="/vector.png" /></svg>
+  </>
+)
+
+const expectedHead = [
+  { tag: 'meta', charset: 'utf-8' },
+  { tag: 'meta', name: 'viewport', content: 'width=device-width' },
+  { tag: 'link', rel: 'preload', as: 'image', href: '/hero.png', fetchpriority: 'high' },
+  { tag: 'link', rel: 'preload', as: 'image', href: '/plain.png' },
+  { tag: 'link', rel: 'preload', as: 'image', imagesrcset: '/small.png 1x, /large.png 2x', imagesizes: '100vw', crossorigin: 'anonymous' },
+  { tag: 'link', rel: 'stylesheet', href: '/app.css', 'data-precedence': 'default' },
+  { tag: 'title' },
+  { tag: 'meta', name: 'description', content: 'stays in place' },
+]
+
+async function streamed(element: any) {
+  const stream = await renderToReadableStream(element)
+  await stream.allReady
+  return new Response(stream).text()
+}
+
+describe('image preloads', () => {
+  it('preloads eagerly rendered images and opens the head with charset and viewport', () => {
+    const html = renderToString(<Page>{images}</Page>)
+    expect(head(html)).toEqual(expectedHead)
+    // The images themselves still render where they are.
+    expect(html.match(/<img\b/g)).toHaveLength(10)
+    expect(html).toContain('<meta name="description" content="stays in place"/></head>')
+  })
+
+  it('streams the same head', async () => {
+    expect(head(await streamed(<Page>{images}</Page>))).toEqual(expectedHead)
+  })
+
+  it('sends the first ten image preloads ahead of the stylesheets and the rest after the scripts', () => {
+    const html = renderToString(
+      <Page>
+        {Array.from({ length: 12 }, (_, index) => <img key={index} src={`/${index}.png`} alt="" />)}
+        <img src="/late-hero.png" fetchPriority="high" alt="" />
+      </Page>,
+    )
+    const links = head(html).filter(link => link.rel !== undefined)
+    expect(links.map(link => link.href ?? link.rel)).toEqual([
+      ...Array.from({ length: 10 }, (_, index) => `/${index}.png`),
+      '/late-hero.png',
+      '/app.css',
+      '/10.png',
+      '/11.png',
+    ])
+  })
+
+  it('shares one preload with an explicit preload() of the same image', () => {
+    function App() {
+      preload('/explicit.png', { as: 'image' })
+      preload('/high.png', { as: 'image', fetchPriority: 'high' })
+      return <><img src="/explicit.png" alt="" /><img src="/high.png" alt="" /><img src="/other.png" alt="" /></>
+    }
+    const links = head(renderToString(<Page><App /></Page>)).filter(link => link.rel !== undefined)
+    // The explicit preload moves ahead of the stylesheet once its image renders, keeping its own attributes.
+    expect(links).toEqual([
+      { tag: 'link', rel: 'preload', as: 'image', href: '/high.png', fetchpriority: 'high' },
+      { tag: 'link', rel: 'preload', as: 'image', href: '/explicit.png' },
+      { tag: 'link', rel: 'preload', as: 'image', href: '/other.png' },
+      { tag: 'link', rel: 'stylesheet', href: '/app.css', 'data-precedence': 'default' },
+    ])
+  })
+
+  it('leaves fragment renders alone, whose root-container hydration is positional', () => {
+    const html = renderToString(<><p>intro</p><meta charSet="utf-8" /><img src="/inline.png" alt="" /></>)
+    expect(html).toBe('<p>intro</p><meta charset="utf-8"/><img src="/inline.png" alt=""/>')
+  })
+
+  it('leaves a fragment that renders its own head alone', () => {
+    const html = renderToString(<><head><meta charSet="utf-8" /></head><img src="/inline.png" alt="" /></>)
+    expect(html).toBe('<head><meta charset="utf-8"/></head><img src="/inline.png" alt=""/>')
+  })
+
+  it('keeps a fragment out of document mode when its suspended child opened html', async () => {
+    const { Suspense } = await import('react')
+    function Doc() {
+      return <html><body><Never /></body></html>
+    }
+    function Never(): null {
+      throw new Promise(() => {})
+    }
+    const html = renderToString(<><Suspense fallback={<><meta charSet="utf-8" /><img src="/fallback.png" alt="" /></>}><Doc /></Suspense><img src="/after.png" alt="" /></>)
+    expect(html).not.toContain('rel="preload"')
+    expect(html).toContain('<meta charset="utf-8"/><img src="/fallback.png" alt=""/>')
+    expect(html).toMatch(/<img src="\/after.png" alt=""\/>$/)
+  })
+
+  it('inserts the head hints after the doctype of a document wrapped in a resolved boundary', async () => {
+    const { Suspense } = await import('react')
+    const page = <Suspense fallback={null}><Page><img src="/hero.png" alt="" /></Page></Suspense>
+    for (const html of [renderToString(page), await streamed(page)]) {
+      expect(html.startsWith('<!--$0--><!DOCTYPE html><html><head><meta charset="utf-8"/>')).toBe(true)
+      expect(head(html)[2]).toEqual({ tag: 'link', rel: 'preload', as: 'image', href: '/hero.png' })
+    }
+  })
+
+  it('inserts the head hints after the doctype of a document fallback', async () => {
+    const { Suspense } = await import('react')
+    function Broken(): null {
+      throw new Error('broken')
+    }
+    const html = renderToString(<Suspense fallback={<Page><img src="/hero.png" alt="" /></Page>}><Broken /></Suspense>)
+    expect(html.startsWith('<!--$E0--><!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image"/>')).toBe(true)
+  })
+
+  it('keeps a fragment out of document mode after a fallback that opened html', async () => {
+    const { Suspense } = await import('react')
+    function Never(): null {
+      throw new Promise(() => {})
+    }
+    const html = renderToString(<><Suspense fallback={<html><body /></html>}><Never /></Suspense><meta charSet="utf-8" /></>)
+    expect(html).toMatch(/<meta charset="utf-8"\/>$/)
+  })
+
+  it('hoists the metas inside a picture, as React does, but not its images', () => {
+    const html = renderToString(<html><head /><body><picture><meta name="viewport" content="pic" /><img src="/pic.png" alt="" /></picture></body></html>)
+    expect(html).toBe('<!DOCTYPE html><html><head><meta name="viewport" content="pic"/></head><body><picture><img src="/pic.png" alt=""/></picture></body></html>')
+  })
+
+  it('preloads the images of a boundary nested in a document fallback when it streams later', async () => {
+    const { Suspense } = await import('react')
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <img src="/late.png" alt="" />
+    }
+    function Broken(): null {
+      throw new Error('broken')
+    }
+    const stream = await renderToReadableStream(
+      <Suspense fallback={<Page><Suspense fallback={null}><Late /></Suspense></Page>}><Broken /></Suspense>,
+      { onError() {} },
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).toContain('<img src="/late.png" alt=""/>')
+    expect(html).toContain('rel="preload" href="/late.png"')
+  })
+
+  it('keeps the text around a hoisted meta apart', () => {
+    const page = <html><head /><body><p>{'a'}<meta charSet="utf-8" />{'b'}</p></body></html>
+    const html = renderToString(page)
+    expect(html).toBe('<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><p>a<!-- -->b</p></body></html>')
+    const doc = new (globalThis as any).DOMParser().parseFromString(html, 'text/html') as Document
+    expect(doc.querySelector('p')!.childNodes).toHaveLength(3)
+  })
+
+  it('synthesises the head of an html tree that omits it', () => {
+    const html = renderToString(<html><body><img src="/hero.png" fetchPriority="high" alt="" /></body></html>)
+    expect(html).toBe('<!DOCTYPE html><html><head><link rel="preload" href="/hero.png" as="image" fetchpriority="high"/></head><body><img src="/hero.png" fetchpriority="high" alt=""/></body></html>')
+  })
+
+  it('keeps itemProp metas and metas inside noscript where they are', () => {
+    const html = renderToString(<Page><meta itemProp="name" content="item" /><noscript><meta charSet="latin1" /></noscript></Page>)
+    expect(html).toContain('<body><meta itemprop="name" content="item"/><noscript><meta charset="latin1"/></noscript></body>')
+    expect(head(html).filter(tag => tag.charset)).toEqual([{ tag: 'meta', charset: 'utf-8' }])
+  })
+
+  it('drops the metas of a boundary that suspends and keeps its preload', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <p>late</p>
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(
+      <Page>
+        <Suspense fallback={<p>loading</p>}>
+          <meta name="viewport" content="late" />
+          <img src="/late.png" alt="" />
+          <Late />
+        </Suspense>
+      </Page>,
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    // The shell keeps only the head's viewport; the boundary's meta arrives in place with its content.
+    expect(html.match(/<meta name="viewport"/g)).toHaveLength(2)
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    expect(html).toContain('<meta name="viewport" content="late"/><img src="/late.png" alt=""/><p>late</p>')
+    // The preload registered by the discarded attempt stays in the shell and is not repeated.
+    expect(html.match(/rel="preload" href="\/late.png"/g)).toHaveLength(1)
+    expect(head(html).some(tag => tag.href === '/late.png')).toBe(true)
+  })
+
+  it('keeps excluding the images of a picture whose boundary streams later', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <img src="/late.png" alt="" />
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(
+      <Page><picture><source srcSet="/late.webp" type="image/webp" /><Suspense fallback={null}><Late /></Suspense></picture></Page>,
+    )
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).toContain('<img src="/late.png" alt=""/>')
+    expect(html).not.toContain('rel="preload" href="/late.png"')
+  })
+
+  it('omits the charset and viewport metas of a fallback and preloads its images', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <p>late</p>
+    }
+    const { Suspense } = await import('react')
+    const fallback = <><meta name="viewport" content="fallback" /><meta name="robots" content="noindex" /><img src="/fallback.png" alt="" /></>
+    const stream = await renderToReadableStream(<Page><Suspense fallback={fallback}><Late /></Suspense></Page>)
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(html).not.toContain('content="fallback"')
+    expect(html).toContain('<meta name="robots" content="noindex"/><img src="/fallback.png" alt=""/>')
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    expect(head(html).some(tag => tag.href === '/fallback.png')).toBe(true)
+  })
+
+  it('renders the preloads of a boundary that streams later with its content', async () => {
+    let resolve!: () => void
+    const ready = new Promise<void>(next => { resolve = next })
+    let done = false
+    function Late() {
+      if (!done) throw ready.then(() => { done = true })
+      return <><meta name="viewport" content="late" /><img src="/late.png" alt="" /></>
+    }
+    const { Suspense } = await import('react')
+    const stream = await renderToReadableStream(<Page><Suspense fallback={<p>loading</p>}><Late /></Suspense></Page>)
+    resolve()
+    await stream.allReady
+    const html = await new Response(stream).text()
+    expect(head(html).filter(tag => tag.name === 'viewport')).toEqual([{ tag: 'meta', name: 'viewport', content: 'width=device-width' }])
+    const body = html.slice(html.indexOf('<body>'))
+    expect(body).toContain('<link rel="preload" href="/late.png" as="image"/>')
+    expect(body).toContain('<meta name="viewport" content="late"/><img src="/late.png" alt=""/>')
+  })
+
+  it('emits the metas of a retried shell once', async () => {
+    let value: string | undefined
+    const pending = Promise.resolve('ready').then(result => { value = result })
+    function Late() {
+      // Suspends outside any boundary after the head was walked, so the shell is rendered twice.
+      if (value === undefined) throw pending
+      return <p>{value}</p>
+    }
+    const html = await streamed(<Page><img src="/hero.png" alt="" /><Late /></Page>)
+    expect(head(html)).toEqual([expectedHead[0], expectedHead[1], { tag: 'link', rel: 'preload', as: 'image', href: '/hero.png' }, ...expectedHead.slice(5)])
+    expect(html).toContain('<p>ready</p>')
+  })
+
+  it('hydrates the reordered head without recoverable errors', () => {
+    const html = renderToString(<Page>{images}</Page>)
+    const doc = new (globalThis as any).DOMParser().parseFromString('<!doctype html>' + html, 'text/html') as Document
+    const onRecoverableError = vi.fn()
+    const errors: unknown[] = []
+    const consoleError = vi.spyOn(console, 'error').mockImplementation((...args) => { errors.push(args) })
+    try {
+      hydrateRoot(doc as any, <Page>{images}</Page>, { onRecoverableError })
+    } finally {
+      consoleError.mockRestore()
+    }
+    expect(onRecoverableError).not.toHaveBeenCalled()
+    expect(errors).toEqual([])
+    expect(doc.querySelectorAll('link[rel="preload"][as="image"]')).toHaveLength(3)
+    expect(doc.querySelector('meta[charset]')).toBe(doc.head.firstElementChild)
+    expect(doc.querySelectorAll('img')).toHaveLength(10)
+  })
+})