diff --git a/README.md b/README.md
index 8d55f5c..1d3caa6 100644
--- a/README.md
+++ b/README.md
@@ -6,10 +6,12 @@ Resize, compress and convert images for websites, in the browser. Files are proc
 
 ## Using it
 
-Drop images or folders on the page, choose files, or paste. Then pick an output:
+Drop images or folders on the page, choose files, or paste. They're listed, and nothing is made until you press **Optimize**. Pick an output first:
 
+- **CMS master** (the default): one high-quality file per image, no wider than a maximum width. For a CMS or site builder that makes its own sizes (Wagtail, Payload, Webflow, Framer, …), so the stored original isn't needlessly large.
 - **Responsive set**: several widths of each image in modern formats, plus `<picture>` markup to paste into your site. For sites you build yourself.
-- **CMS master**: one high-quality file per image, no wider than a maximum width. For a CMS or site builder that makes its own sizes (Wagtail, Payload, Webflow, Framer, …), so the stored original isn't needlessly large.
+
+The settings are locked while images are being optimized; _Stop_ ends the run. Changing a setting afterwards doesn't run anything: press Optimize again. If you switch back to settings an image was already optimized with, its files come back without another run.
 
 Download everything as a ZIP, or single files from a row. In Chrome and Edge, _Save to folder_ writes everything straight into a folder you pick, such as your site's `public/images`. Tap a thumbnail to compare an output with the original: drag the divider and switch between fit and actual pixels.
 
@@ -54,7 +56,7 @@ Reads JPEG, PNG, WebP, AVIF, GIF (first frame) and TIFF. Other formats are hande
 
 Images are decoded, resized and encoded on your device, in the page. The Content Security Policy (`connect-src 'self'`) stops the page from sending data to any other server, and there are no analytics, trackers or third-party scripts. The font is served from the same site.
 
-Your settings (output, role, quality, maximum width, path, markup, placeholder) are kept in your browser's local storage. A service worker keeps a copy of the app in the browser's cache, so it works offline; it only ever fetches the app's own files.
+Your settings (role, quality, maximum width, path, markup, placeholder) are kept in your browser's local storage. The output isn't: each visit starts on CMS master. A service worker keeps a copy of the app in the browser's cache, so it works offline; it only ever fetches the app's own files.
 
 ## Development
 
diff --git a/e2e/a11y.spec.ts b/e2e/a11y.spec.ts
index 9e6838c..010e30f 100644
--- a/e2e/a11y.spec.ts
+++ b/e2e/a11y.spec.ts
@@ -21,6 +21,12 @@ for (const colorScheme of ['light', 'dark'] as const) {
       // A failed row, for the contrast of its message.
       { name: 'broken.heic', mimeType: 'image/heic', buffer: Buffer.from('not a HEIC') },
     ])
+    // Listed, waiting for Optimize.
+    await expect(page.getByRole('cell', { name: 'Ready' })).toHaveCount(2, { timeout: 30_000 })
+    expect(await violations(page), 'ready').toEqual([])
+
+    await page.getByRole('radio', { name: 'Responsive set' }).click()
+    await page.getByRole('button', { name: 'Optimize 2 images' }).click()
     // While processing: the progress bar needs a name.
     await expect(page.getByRole('progressbar', { name: 'Processing photo.jpg' })).toBeVisible()
     expect(await violations(page), 'processing').toEqual([])
@@ -42,6 +48,7 @@ test('focus stays on the list when rows are removed', async ({ page }) => {
     { name: 'b.jpg', mimeType: 'image/jpeg', buffer: await makeJpeg(page, 600, 400) },
     { name: 'c.jpg', mimeType: 'image/jpeg', buffer: await makeJpeg(page, 600, 400) },
   ])
+  await page.getByRole('button', { name: 'Optimize 3 images' }).click()
   await expect(page.getByText(/^3 done/)).toBeVisible({ timeout: 90_000 })
   const remove = (name: string) => page.getByRole('button', { name: `Remove ${name}` })
 
@@ -73,6 +80,8 @@ test('copying is announced', async ({ page, context }) => {
     mimeType: 'image/jpeg',
     buffer: await makeJpeg(page, 600, 400),
   })
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   const announced = page.getByRole('status').filter({ hasText: 'Copied to the clipboard.' })
 
diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index b4e9b4b..a4b4950 100644
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -16,6 +16,9 @@ test('makes a responsive set, a ZIP and a CMS master', async ({ page, context })
     mimeType: 'image/jpeg',
     buffer: await makeJpeg(page, 1000, 600),
   })
+  await expect(page.getByRole('radio', { name: 'CMS master' })).toBeChecked()
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
 
   // Content role, 1000 px source: 400, 800 and 1000 px, as AVIF + JPEG
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
@@ -33,7 +36,7 @@ test('makes a responsive set, a ZIP and a CMS master', async ({ page, context })
     '<img src="/images/hero-shot-1000w.jpg"',
   )
 
-  // JSX markup: React prop names; the choice is remembered
+  // JSX markup: React prop names; the choice is remembered, unlike the output
   await page.getByLabel('Markup').selectOption('JSX')
   await expect(page.locator('pre')).toContainText(
     '<source type="image/avif" srcSet="/images/hero-shot-400w.avif 400w',
@@ -43,9 +46,11 @@ test('makes a responsive set, a ZIP and a CMS master', async ({ page, context })
   expect(await page.evaluate(() => navigator.clipboard.readText())).toMatch(
     /^\{\/\* Hero Shot\.jpg \*\/\}\n<picture>/,
   )
-  expect(
-    await page.evaluate(() => JSON.parse(localStorage.getItem('image-optimizer:settings')!).markup),
-  ).toBe('jsx')
+  const stored = await page.evaluate(() =>
+    JSON.parse(localStorage.getItem('image-optimizer:settings')!),
+  )
+  expect(stored.markup).toBe('jsx')
+  expect(stored).not.toHaveProperty('mode')
 
   // average-colour placeholder, as an inline style
   await page.getByLabel('Placeholder').check()
@@ -76,12 +81,21 @@ test('makes a responsive set, a ZIP and a CMS master', async ({ page, context })
   ])
   expect(download.suggestedFilename()).toBe('images.zip')
 
-  // Switching mode re-processes; the row stays expanded.
+  // Switching mode runs nothing until Optimize; then the row opens on the new files.
   await page.getByRole('radio', { name: 'CMS master' }).click()
+  await expect(page.getByRole('cell', { name: 'Ready' })).toBeVisible()
+  await expect(page.getByRole('progressbar')).toHaveCount(0)
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await expect(page.getByText('hero-shot.jpg', { exact: true })).toBeVisible()
   await expect(page.getByText('hero-shot-400w.avif', { exact: true })).toHaveCount(0)
 
+  // Switching back brings the responsive set back, without another run.
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await expect(page.getByRole('cell', { name: 'Done' })).toBeVisible()
+  await expect(page.getByText('hero-shot-400w.avif', { exact: true })).toBeVisible()
+  await expect(page.getByRole('progressbar')).toHaveCount(0)
+
   expect(errors).toEqual([])
 })
 
@@ -92,14 +106,18 @@ test('detects a flat graphic and gives it lossless WebP + PNG', async ({ page })
     mimeType: 'image/png',
     buffer: await makePng(page, 1800, 900),
   })
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await expect(page.getByLabel('Role for logo.png')).toHaveValue('Graphic')
   await page.getByRole('button', { name: 'logo.png', exact: true }).click()
   for (const name of ['logo-800w.webp', 'logo-800w.png', 'logo-1600w.webp', 'logo-1600w.png'])
     await expect(page.getByText(name, { exact: true })).toBeVisible()
 
-  // overriding the role re-processes just this image
+  // overriding the role needs another Optimize, for just this image
   await page.getByLabel('Role for logo.png').selectOption('Content')
+  await expect(page.getByRole('cell', { name: 'Ready' })).toBeVisible()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await expect(page.getByText('logo-1600w.avif', { exact: true })).toBeVisible()
 })
@@ -146,6 +164,8 @@ test('saves into a folder, leaving a foreign manifest.json alone', async ({ page
     mimeType: 'image/jpeg',
     buffer: await makeJpeg(page, 1000, 600),
   })
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await page.getByRole('button', { name: 'Save to folder' }).click()
   await expect(page.getByRole('status').filter({ hasText: 'Saved' })).toHaveText(
@@ -180,3 +200,39 @@ test('saves into a folder, leaving a foreign manifest.json alone', async ({ page
     'Saved 7 files to “site”, replacing 7.',
   )
 })
+
+test('waits for Optimize, locks the settings while it runs, and can stop', async ({ page }) => {
+  await page.goto('/')
+  const jpeg = await makeJpeg(page, 3000, 2000)
+  await page
+    .locator('input[type=file]')
+    .setInputFiles(
+      ['a.jpg', 'b.jpg', 'c.jpg'].map((name) => ({ name, mimeType: 'image/jpeg', buffer: jpeg })),
+    )
+
+  // Listed and read, but nothing is made until Optimize.
+  await expect(page.getByRole('cell', { name: 'Ready' })).toHaveCount(3, { timeout: 30_000 })
+  await expect(page.getByText('3 images', { exact: true })).toBeVisible()
+  await expect(page.getByRole('progressbar')).toHaveCount(0)
+  await expect(page.getByRole('button', { name: 'Download ZIP' })).toHaveCount(0)
+
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 3 images' }).click()
+  await expect(page.getByRole('progressbar')).toBeVisible()
+  await expect(page.getByRole('radio', { name: 'CMS master' })).toBeDisabled()
+  await expect(page.getByLabel(/^Quality/)).toBeDisabled()
+  await expect(page.getByLabel('Role for b.jpg')).toBeDisabled()
+
+  // Stop: nothing is queued or running, and the settings unlock.
+  await page.getByRole('button', { name: 'Stop' }).click()
+  const optimize = page.getByRole('button', { name: /^Optimize \d images?$/ })
+  await expect(optimize).toBeFocused()
+  await expect(page.getByRole('progressbar')).toHaveCount(0)
+  await expect(page.getByRole('cell', { name: 'Queued' })).toHaveCount(0)
+  await expect(page.getByRole('radio', { name: 'CMS master' })).toBeEnabled()
+
+  // Optimize again finishes the rest; the same button then downloads.
+  await optimize.click()
+  await expect(page.getByText(/^3 done/)).toBeVisible({ timeout: 120_000 })
+  await expect(page.getByRole('button', { name: 'Download ZIP' })).toBeFocused()
+})
diff --git a/e2e/decode.spec.ts b/e2e/decode.spec.ts
index 0f8263f..f0be96b 100644
--- a/e2e/decode.spec.ts
+++ b/e2e/decode.spec.ts
@@ -30,12 +30,12 @@ test('falls back to the browser for formats libvips can’t read', async ({ page
     mimeType: 'image/bmp',
     buffer: bmp(1000, 600),
   })
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await expect(page.getByText('1000 × 600')).toBeVisible()
   await page.getByRole('button', { name: 'scan.bmp', exact: true }).click()
-  // Opaque, so it's a photo with a JPEG fallback, not a transparent image with WebP.
-  for (const name of ['scan-1000w.avif', 'scan-1000w.jpg'])
-    await expect(page.getByText(name, { exact: true })).toBeVisible()
+  // Opaque, so a JPEG master, not a PNG.
+  await expect(page.getByText('scan.jpg', { exact: true })).toBeVisible()
 })
 
 test('says when the browser can’t open a HEIC either, in full on a phone', async ({ page }) => {
diff --git a/e2e/focus.spec.ts b/e2e/focus.spec.ts
index 42e69b9..fa6042f 100644
--- a/e2e/focus.spec.ts
+++ b/e2e/focus.spec.ts
@@ -15,6 +15,8 @@ test('every control shows a focus ring when tabbed to', async ({ page }) => {
     mimeType: 'image/jpeg',
     buffer: Buffer.from(jpeg),
   })
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await page.getByRole('button', { name: 'photo.jpg', exact: true }).click()
   await page.locator('h1').click()
diff --git a/e2e/offline.spec.ts b/e2e/offline.spec.ts
index 8a6acb1..9fc1261 100644
--- a/e2e/offline.spec.ts
+++ b/e2e/offline.spec.ts
@@ -60,6 +60,9 @@ test('works offline after the first visit', async ({ page }) => {
     mimeType: 'image/jpeg',
     buffer: jpeg,
   })
+  // A responsive set, so the AVIF encoder is used too.
+  await page.getByRole('radio', { name: 'Responsive set' }).click()
+  await page.getByRole('button', { name: 'Optimize 1 image' }).click()
   await expect(page.getByText(/^1 done/)).toBeVisible({ timeout: 90_000 })
   await page.getByRole('button', { name: 'photo.jpg', exact: true }).click()
   await expect(page.getByText('photo-1000w.avif', { exact: true })).toBeVisible()
diff --git a/src/App.svelte b/src/App.svelte
index 51aac15..7da3752 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -17,6 +17,7 @@
 
   let input: HTMLInputElement
   let dropzone: HTMLButtonElement | undefined = $state()
+  let nextButton: HTMLButtonElement | undefined = $state()
   let table: HTMLTableElement | undefined = $state()
   let dragging = $state(false)
   let zipping = $state(false)
@@ -29,7 +30,51 @@
   const totals = $derived(app.totals)
   const done = $derived(app.done.length)
   const failed = $derived(app.items.filter((i) => i.status === 'error').length)
-  const pending = $derived(app.items.length - done - failed)
+  const toOptimize = $derived(app.toOptimize)
+  const optimizing = $derived(app.optimizing)
+  /** Everything is made with the current settings: the files can be downloaded. */
+  const finished = $derived(done > 0 && !toOptimize && !optimizing)
+  const progress = $derived(describeProgress(app.items.length - failed))
+
+  // One button for the next step, Optimize and then Download ZIP, so focus stays put between them.
+  const next = $derived(
+    optimizing
+      ? { label: 'Optimizing…', disabled: true }
+      : toOptimize
+        ? {
+            label: `Optimize ${toOptimize} ${toOptimize === 1 ? 'image' : 'images'}`,
+            disabled: false,
+          }
+        : done
+          ? { label: zipping ? 'Preparing…' : 'Download ZIP', disabled: zipping }
+          : { label: 'Optimize', disabled: true },
+  )
+
+  function describeProgress(count: number): string {
+    const parts = []
+    if (count)
+      parts.push(
+        optimizing || (done && done < count)
+          ? `${done} of ${count} done`
+          : done
+            ? `${done} done`
+            : `${count} ${count === 1 ? 'image' : 'images'}`,
+      )
+    if (failed) parts.push(`${failed} couldn’t be read`)
+    return parts.join(' · ')
+  }
+
+  function step() {
+    if (next.disabled) return
+    if (toOptimize) app.optimize()
+    else void downloadZip()
+  }
+
+  async function stop() {
+    app.stop()
+    await tick()
+    nextButton?.focus()
+  }
 
   function describe(s: PlanSettings): string {
     if (s.mode === 'master')
@@ -116,7 +161,7 @@
   }
 
   const button =
-    'rounded-md px-3 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-40'
+    'rounded-md px-3 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-40 aria-disabled:cursor-default aria-disabled:opacity-40'
   const secondary = `${button} border border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-900`
   const primary = `${button} bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200`
 </script>
@@ -176,6 +221,7 @@
           label="Output"
           value={app.settings.mode}
           options={MODES}
+          disabled={optimizing}
           onchange={(mode) => app.set({ mode })}
         />
         {#if app.settings.mode === 'responsive'}
@@ -183,12 +229,14 @@
             label="Role"
             value={app.settings.role}
             options={ROLES}
+            disabled={optimizing}
             onchange={(role) => app.set({ role })}
           />
           <Select
             label="Quality"
             value={app.settings.quality}
             options={QUALITIES}
+            disabled={optimizing}
             onchange={(quality) => app.set({ quality })}
           />
         {:else}
@@ -196,39 +244,36 @@
             label="Max width"
             value={app.settings.masterWidth}
             options={MASTER_WIDTHS}
+            disabled={optimizing}
             onchange={(masterWidth) => app.set({ masterWidth })}
           />
         {/if}
         <!-- The actions wrap as one group, after the settings. -->
         <div class="flex flex-wrap gap-2 sm:ml-auto">
           <button type="button" class={secondary} onclick={() => input.click()}>Add images</button>
-          {#if app.settings.mode === 'responsive'}
-            <button
-              type="button"
-              class={secondary}
-              disabled={!done || pending > 0}
-              onclick={copyAll}
-            >
-              {copied ? 'Copied' : `Copy ${app.settings.markup === 'jsx' ? 'JSX' : 'HTML'}`}
-            </button>
-          {/if}
-          {#if canSaveToFolder}
-            <button
-              type="button"
-              class={secondary}
-              disabled={!done || pending > 0 || saving}
-              onclick={saveFolder}
-            >
-              {saving ? 'Saving…' : 'Save to folder'}
-            </button>
+          {#if optimizing}
+            <button type="button" class={secondary} onclick={stop}>Stop</button>
+          {:else if finished}
+            {#if app.settings.mode === 'responsive'}
+              <button type="button" class={secondary} onclick={copyAll}>
+                {copied ? 'Copied' : `Copy ${app.settings.markup === 'jsx' ? 'JSX' : 'HTML'}`}
+              </button>
+            {/if}
+            {#if canSaveToFolder}
+              <button type="button" class={secondary} disabled={saving} onclick={saveFolder}>
+                {saving ? 'Saving…' : 'Save to folder'}
+              </button>
+            {/if}
           {/if}
+          <!-- aria-disabled, not disabled: a disabled button would drop focus. -->
           <button
+            bind:this={nextButton}
             type="button"
             class={primary}
-            disabled={!done || pending > 0 || zipping}
-            onclick={downloadZip}
+            aria-disabled={next.disabled}
+            onclick={step}
           >
-            {zipping ? 'Preparing…' : 'Download ZIP'}
+            {next.label}
           </button>
         </div>
       </div>
@@ -269,6 +314,7 @@
               path={app.settings.path}
               markup={app.settings.markup}
               placeholder={app.settings.placeholder}
+              locked={optimizing}
               onsnippet={(patch) => app.setSnippet(patch)}
               onrole={(role) => app.setRole(item, role)}
               oncompare={(output) => app.compare(item, output)}
@@ -282,11 +328,7 @@
         class="mt-4 flex items-center justify-between gap-4 text-sm text-neutral-500 tabular-nums dark:text-neutral-400"
         aria-live="polite"
       >
-        <span>
-          {pending ? `${done} of ${done + pending} done` : `${done} done`}{failed
-            ? ` · ${failed} couldn’t be read`
-            : ''}
-        </span>
+        <span>{progress}</span>
         <span class="flex items-center gap-4">
           {#if done && totals.original > totals.output}
             <span
diff --git a/src/lib/plan.test.ts b/src/lib/plan.test.ts
index 423e2da..c0d7ca6 100644
--- a/src/lib/plan.test.ts
+++ b/src/lib/plan.test.ts
@@ -25,9 +25,10 @@ describe('planWidths', () => {
 
 describe('planVariants', () => {
   const photo = { width: 4000, hasAlpha: false }
+  const responsive = { ...DEFAULT_SETTINGS, mode: 'responsive' } as const
 
   it('responsive photo: AVIF + JPEG at each width', () => {
-    const v = planVariants(photo, DEFAULT_SETTINGS)
+    const v = planVariants(photo, responsive)
     expect(v.map((x) => `${x.width} ${x.format}`)).toEqual([
       '400 avif',
       '400 jpeg',
@@ -41,15 +42,12 @@ describe('planVariants', () => {
   })
 
   it('transparent photo falls back to WebP instead of JPEG', () => {
-    const v = planVariants({ width: 1000, hasAlpha: true }, { ...DEFAULT_SETTINGS, role: 'card' })
+    const v = planVariants({ width: 1000, hasAlpha: true }, { ...responsive, role: 'card' })
     expect(v.map((x) => x.format)).toEqual(['avif', 'webp', 'avif', 'webp'])
   })
 
   it('graphics: lossless WebP + PNG', () => {
-    const v = planVariants(
-      { width: 2400, hasAlpha: true },
-      { ...DEFAULT_SETTINGS, role: 'graphic' },
-    )
+    const v = planVariants({ width: 2400, hasAlpha: true }, { ...responsive, role: 'graphic' })
     expect(v).toEqual([
       { width: 800, format: 'webp', quality: 100, lossless: true },
       { width: 800, format: 'png', quality: 100 },
@@ -58,19 +56,16 @@ describe('planVariants', () => {
     ])
   })
 
-  it('master: one high-quality JPEG capped at the master width', () => {
-    expect(planVariants(photo, { ...DEFAULT_SETTINGS, mode: 'master' })).toEqual([
+  it('master (the default): one high-quality JPEG capped at the master width', () => {
+    expect(planVariants(photo, DEFAULT_SETTINGS)).toEqual([
       { width: 2560, format: 'jpeg', quality: 90 },
     ])
-    expect(
-      planVariants({ width: 1800, hasAlpha: false }, { ...DEFAULT_SETTINGS, mode: 'master' })[0]
-        .width,
-    ).toBe(1800)
+    expect(planVariants({ width: 1800, hasAlpha: false }, DEFAULT_SETTINGS)[0].width).toBe(1800)
   })
 
   it('master: PNG for transparency', () => {
-    expect(
-      planVariants({ width: 900, hasAlpha: true }, { ...DEFAULT_SETTINGS, mode: 'master' }),
-    ).toEqual([{ width: 900, format: 'png', quality: 100 }])
+    expect(planVariants({ width: 900, hasAlpha: true }, DEFAULT_SETTINGS)).toEqual([
+      { width: 900, format: 'png', quality: 100 },
+    ])
   })
 })
diff --git a/src/lib/plan.ts b/src/lib/plan.ts
index 50e5fb5..ca9d238 100644
--- a/src/lib/plan.ts
+++ b/src/lib/plan.ts
@@ -20,7 +20,7 @@ export interface PlanSettings {
 }
 
 export const DEFAULT_SETTINGS: PlanSettings = {
-  mode: 'responsive',
+  mode: 'master',
   role: 'content',
   quality: 'balanced',
   masterWidth: 2560,
diff --git a/src/ui/FileRow.svelte b/src/ui/FileRow.svelte
index 0587c54..739e539 100644
--- a/src/ui/FileRow.svelte
+++ b/src/ui/FileRow.svelte
@@ -15,6 +15,7 @@
     path,
     markup,
     placeholder,
+    locked,
     onsnippet,
     onrole,
     oncompare,
@@ -26,6 +27,8 @@
     path: string
     markup: Markup
     placeholder: boolean
+    /** While optimizing: the role can't change. */
+    locked: boolean
     onsnippet: (patch: { path?: string; markup?: Markup; placeholder?: boolean }) => void
     onrole: (role: Role) => void
     oncompare: (output: Output) => void
@@ -84,6 +87,7 @@
               label="Role for {item.file.name}"
               value={role}
               options={ROLES}
+              disabled={locked}
               onchange={onrole}
             />
           </div>
@@ -125,7 +129,7 @@
       <span class="text-red-600 dark:text-red-400">Failed</span>
     {:else}
       <span class="text-neutral-500 dark:text-neutral-400">
-        {{ reading: 'Reading', queued: 'Queued', done: 'Done' }[item.status]}
+        {{ reading: 'Reading', ready: 'Ready', queued: 'Queued', done: 'Done' }[item.status]}
       </span>
     {/if}
   </td>
diff --git a/src/ui/InlineSelect.svelte b/src/ui/InlineSelect.svelte
index 9071469..752490f 100644
--- a/src/ui/InlineSelect.svelte
+++ b/src/ui/InlineSelect.svelte
@@ -6,6 +6,7 @@
     options,
     onchange,
     title,
+    disabled = false,
     class: className = '',
   }: {
     /** For screen readers; not shown. */
@@ -14,6 +15,7 @@
     options: readonly { value: T; label: string }[]
     onchange: (value: T) => void
     title?: string
+    disabled?: boolean
     class?: string
   } = $props()
 </script>
@@ -21,7 +23,8 @@
 <label class="relative inline-flex items-center" {title}>
   <span class="sr-only">{label}</span>
   <select
-    class="cursor-pointer appearance-none bg-transparent pr-3.5 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-blue-600 dark:hover:text-neutral-100 {className}"
+    class="cursor-pointer appearance-none bg-transparent pr-3.5 focus-visible:outline-2 focus-visible:outline-blue-600 enabled:hover:text-neutral-900 disabled:cursor-default dark:enabled:hover:text-neutral-100 {className}"
+    {disabled}
     onchange={(e) => onchange(options[e.currentTarget.selectedIndex].value)}
   >
     {#each options as option (option.value)}
diff --git a/src/ui/Segmented.svelte b/src/ui/Segmented.svelte
index 288d519..bd5a68d 100644
--- a/src/ui/Segmented.svelte
+++ b/src/ui/Segmented.svelte
@@ -4,11 +4,13 @@
     value,
     options,
     onchange,
+    disabled = false,
   }: {
     label: string
     value: T
     options: readonly { value: T; label: string }[]
     onchange: (value: T) => void
+    disabled?: boolean
   } = $props()
 </script>
 
@@ -22,12 +24,13 @@
       type="button"
       role="radio"
       aria-checked={option.value === value}
+      {disabled}
       onclick={() => onchange(option.value)}
       class={[
-        'rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-blue-600 motion-reduce:transition-none',
+        'rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-blue-600 disabled:opacity-50 motion-reduce:transition-none',
         option.value === value
           ? 'bg-white text-neutral-900 shadow-xs dark:bg-neutral-800 dark:text-neutral-100'
-          : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100',
+          : 'text-neutral-600 enabled:hover:text-neutral-900 dark:text-neutral-400 dark:enabled:hover:text-neutral-100',
       ]}
     >
       {option.label}
diff --git a/src/ui/Select.svelte b/src/ui/Select.svelte
index 4d35869..391dff1 100644
--- a/src/ui/Select.svelte
+++ b/src/ui/Select.svelte
@@ -4,20 +4,23 @@
     value,
     options,
     onchange,
+    disabled = false,
   }: {
     label: string
     value: T
     options: readonly { value: T; label: string }[]
     onchange: (value: T) => void
+    disabled?: boolean
   } = $props()
 </script>
 
 <label
-  class="relative inline-flex items-center gap-1.5 rounded-md border border-neutral-200 py-1.5 pr-7 pl-2.5 text-sm focus-within:outline-2 focus-within:outline-blue-600 dark:border-neutral-800"
+  class="relative inline-flex items-center gap-1.5 rounded-md border border-neutral-200 py-1.5 pr-7 pl-2.5 text-sm focus-within:outline-2 focus-within:outline-blue-600 has-disabled:opacity-50 dark:border-neutral-800"
 >
   <span class="text-neutral-500 dark:text-neutral-400">{label}</span>
   <select
-    class="cursor-pointer appearance-none bg-transparent font-medium outline-none"
+    class="cursor-pointer appearance-none bg-transparent font-medium outline-none disabled:cursor-default"
+    {disabled}
     onchange={(e) => onchange(options[e.currentTarget.selectedIndex].value)}
   >
     {#each options as option (option.value)}
diff --git a/src/ui/app.svelte.ts b/src/ui/app.svelte.ts
index ad3889e..adda814 100644
--- a/src/ui/app.svelte.ts
+++ b/src/ui/app.svelte.ts
@@ -12,7 +12,8 @@ import {
 import { comment, pictureMarkup, type Markup } from '../lib/snippet'
 import { isImage, saveToFolder, type ExportFile, type FolderResult } from './files'
 
-export type Status = 'reading' | 'queued' | 'processing' | 'done' | 'error'
+/** `ready`: read, and waiting for Optimize. `done`: has outputs for the current settings. */
+export type Status = 'reading' | 'ready' | 'queued' | 'processing' | 'done' | 'error'
 
 export interface Output {
   name: string
@@ -31,6 +32,12 @@ const MIME: Record<Format, string> = {
 }
 const SETTINGS_KEY = 'image-optimizer:settings'
 
+/** A finished set of outputs. Its key identifies the files it holds (mode and variants). */
+interface Result {
+  key: string
+  outputs: Output[]
+}
+
 export interface Settings extends PlanSettings {
   /** URL path the images will be served from, used in the snippets. */
   path: string
@@ -56,12 +63,15 @@ export class Item {
   info = $state.raw<SourceInfo | null>(null)
   thumb = $state<string | null>(null)
   progress = $state.raw({ done: 0, total: 0 })
+  /** Outputs for the current settings; empty until it has been optimized with them. */
   outputs = $state.raw<Output[]>([])
   error = $state<string | null>(null)
   /** Role picked for this image. `null` follows the toolbar (graphics default to Graphic). */
   roleOverride = $state<Role | null>(null)
-  /** Mode and role the current outputs were made with. */
-  madeWith = $state.raw<{ mode: Mode; role: Role } | null>(null)
+  /** Optimize was pressed while this was still being read. */
+  startWhenRead = $state(false)
+  /** The last finished set in each mode, so switching back needs no second run. */
+  readonly results = new Map<Mode, Result>()
   /** The original rendered losslessly at a given width, for comparisons. */
   readonly originals = new Map<number, Promise<string>>()
 
@@ -81,23 +91,28 @@ export class Item {
     return this.outputs.find((o) => o.width === widest)
   }
 
-  releaseOutputs() {
-    for (const o of this.outputs) URL.revokeObjectURL(o.url)
-    this.outputs = []
-    this.madeWith = null
+  /** Keeps a finished set, replacing the one before it in that mode. */
+  keep(mode: Mode, result: Result) {
+    for (const o of this.results.get(mode)?.outputs ?? []) URL.revokeObjectURL(o.url)
+    this.results.set(mode, result)
   }
 
   release() {
-    this.releaseOutputs()
+    for (const { outputs } of this.results.values())
+      for (const o of outputs) URL.revokeObjectURL(o.url)
+    this.results.clear()
+    this.outputs = []
     if (this.thumb) URL.revokeObjectURL(this.thumb)
     for (const url of this.originals.values()) void url.then(URL.revokeObjectURL, () => {})
     this.originals.clear()
   }
 }
 
+/** Everything but the output is remembered: each visit starts on CMS master. */
 function loadSettings(): Settings {
   try {
-    return { ...DEFAULTS, ...JSON.parse(localStorage.getItem(SETTINGS_KEY) ?? '{}') }
+    const stored = JSON.parse(localStorage.getItem(SETTINGS_KEY) ?? '{}')
+    return { ...DEFAULTS, ...stored, mode: DEFAULTS.mode }
   } catch {
     return { ...DEFAULTS }
   }
@@ -125,9 +140,20 @@ export class App {
     return this.items.filter((i) => i.status === 'done')
   }
 
-  get busy() {
+  /** How many images Optimize would start: read and not yet made with these settings, or still being read. */
+  get toOptimize() {
+    return this.items.filter(
+      (i) => i.status === 'ready' || (i.status === 'reading' && !i.startWhenRead),
+    ).length
+  }
+
+  /** Between Optimize and the last image finishing. Plan settings are locked meanwhile. */
+  get optimizing() {
     return this.items.some(
-      (i) => i.status === 'reading' || i.status === 'queued' || i.status === 'processing',
+      (i) =>
+        i.status === 'queued' ||
+        i.status === 'processing' ||
+        (i.status === 'reading' && i.startWhenRead),
     )
   }
 
@@ -153,13 +179,14 @@ export class App {
     return item.roleOverride ?? (item.info?.kind === 'graphic' ? 'graphic' : this.settings.role)
   }
 
-  /** Changing plan settings re-processes everything. */
+  /**
+   * Plan settings change what Optimize will make; nothing runs until it's pressed.
+   * Images already made with the new settings (in that mode) show those files again.
+   */
   set(patch: Partial<PlanSettings>) {
     Object.assign(this.settings, patch)
     this.save()
-    for (const item of this.items) this.requeue(item)
-    this.engine.cancel()
-    void this.pump()
+    for (const item of this.items) this.sync(item)
   }
 
   /** These only affect the snippets; nothing is re-processed. */
@@ -170,12 +197,27 @@ export class App {
 
   setRole(item: Item, role: Role) {
     item.roleOverride = role
-    const processing = item.status === 'processing'
-    this.requeue(item)
-    if (processing) this.engine.cancel()
+    this.sync(item)
+  }
+
+  /** Optimizes every image not yet made with the current settings, including any still being read. */
+  optimize() {
+    for (const item of this.items) {
+      if (item.status === 'ready') item.status = 'queued'
+      else if (item.status === 'reading') item.startWhenRead = true
+    }
     void this.pump()
   }
 
+  /** Stops the run. Finished images keep their files; the rest go back to ready. */
+  stop() {
+    for (const item of this.items) {
+      item.startWhenRead = false
+      if (item.status === 'queued' || item.status === 'processing') item.status = 'ready'
+    }
+    this.engine.cancel()
+  }
+
   /** Opens the before/after view. The original is rendered at the output's width, losslessly. */
   async compare(item: Item, output: Output) {
     this.comparing = { item, output, original: null }
@@ -197,10 +239,10 @@ export class App {
 
   /** `<picture>` markup for a finished responsive set; null for CMS masters. */
   snippet(item: Item): string | null {
-    if (item.status !== 'done' || item.madeWith?.mode !== 'responsive') return null
+    if (item.status !== 'done' || this.settings.mode !== 'responsive') return null
     const { path, markup, placeholder } = this.settings
     const background = placeholder ? (item.info?.colour ?? null) : null
-    return pictureMarkup(item.madeWith.role, item.outputs, { path, markup, background })
+    return pictureMarkup(this.roleFor(item), item.outputs, { path, markup, background })
   }
 
   /** Every image's snippet, each labelled with its file name. */
@@ -241,7 +283,7 @@ export class App {
       this.settings,
       done.map((item) => ({
         base: item.base,
-        role: item.madeWith?.role ?? this.roleFor(item),
+        role: this.roleFor(item),
         source: {
           file: item.file.name,
           width: item.info?.width ?? 0,
@@ -274,16 +316,27 @@ export class App {
     })
   }
 
-  private requeue(item: Item) {
-    if (this.comparing?.item === item) this.comparing = null
-    if (item.status !== 'done' && item.status !== 'processing') return
-    item.releaseOutputs()
-    item.status = 'queued'
+  /** What Optimize makes for this image now. Equal keys mean the same files, whatever the role. */
+  private plan(item: Item) {
+    const specs = planVariants(item.info!, { ...this.settings, role: this.roleFor(item) })
+    return { specs, key: JSON.stringify([this.settings.mode, specs]) }
+  }
+
+  /** Shows the image's finished set for the current settings, if it has one; otherwise it's ready. */
+  private sync(item: Item) {
+    if (item.status !== 'ready' && item.status !== 'done') return
+    const result = item.results.get(this.settings.mode)
+    const current = result?.key === this.plan(item).key ? result : undefined
+    item.outputs = current?.outputs ?? []
+    item.status = current ? 'done' : 'ready'
+    if (!current && this.comparing?.item === item) this.comparing = null
   }
 
   private save() {
     try {
-      localStorage.setItem(SETTINGS_KEY, JSON.stringify($state.snapshot(this.settings)))
+      // mode: undefined leaves the output out (JSON drops it); see loadSettings.
+      const settings = { ...$state.snapshot(this.settings), mode: undefined }
+      localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
     } catch {
       // storage unavailable (private mode); settings just won't persist
     }
@@ -298,8 +351,9 @@ export class App {
       if (!this.items.includes(item)) return
       item.info = info
       item.thumb = URL.createObjectURL(blobOf(thumb.bytes, 'webp'))
-      item.status = 'queued'
-      void this.pump()
+      item.status = item.startWhenRead ? 'queued' : 'ready'
+      item.startWhenRead = false
+      if (item.status === 'queued') void this.pump()
     } catch (e) {
       if (e instanceof CancelledError) return
       item.status = 'error'
@@ -326,19 +380,20 @@ export class App {
     try {
       for (let item = this.next(); item; item = this.next()) {
         const target = item
-        const settings = $state.snapshot(this.settings)
-        const role = this.roleFor(target)
+        const mode = this.settings.mode
+        const { specs, key } = this.plan(target)
         target.status = 'processing'
         target.progress = { done: 0, total: 0 }
         try {
           const encoded = await this.engine.process(
             target.source,
-            planVariants(target.info!, { ...settings, role }),
+            specs,
             (done, total) => (target.progress = { done, total }),
           )
-          target.outputs = encoded.map((e) => {
+          if (!this.items.includes(target)) continue
+          const outputs = encoded.map((e) => {
             const blob = blobOf(e.bytes, e.spec.format)
-            const width = settings.mode === 'master' ? null : e.width
+            const width = mode === 'master' ? null : e.width
             return {
               name: outputName(target.base, e.spec.format, width),
               format: e.spec.format,
@@ -348,10 +403,11 @@ export class App {
               url: URL.createObjectURL(blob),
             }
           })
-          target.madeWith = { mode: settings.mode, role }
-          target.status = 'done'
+          target.keep(mode, { key, outputs })
+          target.status = 'ready'
+          this.sync(target)
         } catch (e) {
-          // Cancelled by a settings change or removal: the item is already re-queued or gone.
+          // Stopped, removed or cleared: stop() has already put the image back to ready.
           if (e instanceof CancelledError) continue
           target.status = 'error'
           target.error = e instanceof Error ? e.message : String(e)
diff --git a/src/ui/options.ts b/src/ui/options.ts
index 0f2ed32..b3f7a9e 100644
--- a/src/ui/options.ts
+++ b/src/ui/options.ts
@@ -2,8 +2,8 @@ import type { Mode, QualityLevel, Role } from '../lib/plan'
 import type { Markup } from '../lib/snippet'
 
 export const MODES: readonly { value: Mode; label: string }[] = [
-  { value: 'responsive', label: 'Responsive set' },
   { value: 'master', label: 'CMS master' },
+  { value: 'responsive', label: 'Responsive set' },
 ]
 
 export const ROLES: readonly { value: Role; label: string }[] = [