From 3659561d12e4ee693966163fc56f0fb76bb4542e Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Thu, 10 Sep 2026 00:53:37 +0800
Subject: [PATCH] fix: `emitFile`, eager/priority modes, noscript, srcset

---
 .changeset/lucky-moons-repeat.md           |  13 +++
 README.md                                  |  25 ++++-
 src/__tests__/browser/solid-image.test.tsx |  46 +++++++++
 src/__tests__/components.test.tsx          |  83 +++++++++++++++-
 src/__tests__/vite-plugin.test.ts          |  59 +++++++++++-
 src/core/index.tsx                         | 106 +++++++++++++++------
 src/vite/index.ts                          |  41 +++++++-
 7 files changed, 328 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/lucky-moons-repeat.md

diff --git a/.changeset/lucky-moons-repeat.md b/.changeset/lucky-moons-repeat.md
new file mode 100644
index 0000000..c759e8e
--- /dev/null
+++ b/.changeset/lucky-moons-repeat.md
@@ -0,0 +1,13 @@
+---
+"@solidjs/image": minor
+---
+
+The `img` now carries a `srcset` of the last output format, so a browser that supports none of the `source` formats still picks a sized variant. It used to fall back to the full size original.
+
+The original image is no longer imported. `src.source` points at the largest variant of the fallback format, so the untouched original never reaches the bundle.
+
+Processed images go through the bundler on build, so `base`, `assetsDir` and the build manifest now apply to them. The dev server still writes them to the public directory.
+
+`SolidImage` takes an `eager` prop for the image above the fold. It loads right away instead of waiting for the observer, and the server renders it in full so the browser finds it while parsing the page.
+
+Readers with no JavaScript now get the image. The server renders a `noscript` copy alongside the lazy one.
diff --git a/README.md b/README.md
index ed52ebb..b956dd0 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,8 @@
 Optimized image components and Vite tooling for [Solid](https://solidjs.com).
 
 - `SolidImage` renders a responsive `<picture>` that reserves the image's aspect ratio, so the page does not shift while the image loads.
-- The image only loads once it scrolls into view, using `IntersectionObserver`.
+- The image only loads once it scrolls into view, using `IntersectionObserver`. Mark the image above the fold as `eager` and it loads right away.
+- Readers with no JavaScript still get the image.
 - Your own placeholder is rendered while the image loads, and fades out when the image is ready.
 - The Vite plugin turns a local image import into a set of resized and reformatted files at build time.
 - Remote images go through your own URL mapping, so a CDN can serve the variants instead.
@@ -170,6 +171,7 @@ The component does not depend on the plugin. Pass `src` and an optional `transfo
 | `alt` | `string` | yes | Alternative text for the image. |
 | `fallback` | `(visible: () => boolean, onLoad: () => void) => JSX.Element` | yes | Placeholder shown while the image loads. See below. |
 | `transformer` | `SolidImageTransformer<T>` | no | Produces the responsive variants for `src`. |
+| `eager` | `boolean` | no | Loads the image right away instead of waiting for it to scroll into view. |
 | `onLoad` | `() => void` | no | Called once the image has loaded and the placeholder is hidden. |
 | `crossOrigin` | `JSX.HTMLCrossorigin` | no | Forwarded to the `<img>`. |
 | `fetchPriority` | `"high" \| "low" \| "auto"` | no | Forwarded to the `<img>`. |
@@ -182,6 +184,16 @@ The `fallback` callback receives two arguments.
 
 The `fallback` only renders on the client, and only after the container has scrolled into view.
 
+### Above the fold
+
+Lazy loading costs time for the first image on the page, because nothing starts until the observer reports. Mark that one image as `eager`.
+
+```tsx
+<SolidImage {...example} alt="example" eager fetchPriority="high" fallback={...} />
+```
+
+The server then renders the real image instead of a blank placeholder, so the browser finds it while it parses the page. Leave every other image lazy.
+
 ### Types
 
 ```ts
@@ -211,6 +223,8 @@ interface SolidImageTransformer<T> {
 
 Variants are grouped by `type` and merged into one `srcset` per group. The browser picks the first `<source>` whose type it supports, then picks a width from the `srcset`. Order your output formats from most to least preferred.
 
+The `<img>` carries the last group as its own `srcset`, for a browser that supports none of the formats above it. That group should be the most widely supported format, which is why the order matters.
+
 The transformer is optional. Without one, no `<source>` is rendered and the browser loads `src.source` directly.
 
 ### `imagePlugin(options)`
@@ -233,7 +247,11 @@ Handles imports ending in `?image`.
 
 One file is emitted per output format and per size, so `output: ["webp", "jpeg"]` with `sizes: [480, 800]` gives four files per image.
 
-Files are written to `<publicPath>/.image/i-<hash>-<width>.<ext>`, where the hash is an xxHash32 of the source path. The module exports the public URL `/.image/i-<hash>-<width>.<ext>`, so `publicPath` should be a directory that is served at the root of your site. Add `.image` to `.gitignore` if it lives inside a checked in directory such as `public`.
+On build the files go through the bundler as assets, so `base`, `assetsDir` and the build manifest apply to them like any other asset. Nothing is written to `publicPath`.
+
+On the dev server the files are written to `<publicPath>/.image/i-<hash>-<width>.<ext>` and served from `/.image/...`, so `publicPath` should be a directory that is served at the root of your site. Add `.image` to `.gitignore` if it lives inside a checked in directory such as `public`.
+
+The image the `<img>` falls back to is the largest size of the last output format. The original file is never imported, so it does not reach the bundle.
 
 #### `options.remote`
 
@@ -253,7 +271,8 @@ Both option groups are optional. Passing neither returns no plugin.
 2. An `IntersectionObserver` watches the container. Nothing loads until it enters the viewport.
 3. Once visible, the `<img>` and your placeholder are rendered. The image starts fully transparent.
 4. Your placeholder calls `onLoad` to say it is on screen. When the image finishes loading after that, the placeholder is hidden, the image fades in and the `onLoad` prop is called.
-5. On the server, the `<img>` renders with a blank SVG of the same size, so the browser does not fetch the image before it is in view. The placeholder and the loading logic are client only.
+5. On the server, a lazy `<img>` renders with a blank SVG of the same size, so the browser does not fetch the image before it is in view. An eager `<img>` renders in full. The placeholder and the loading logic are client only.
+6. The server also renders a `<noscript>` copy of the image, so a reader with no JavaScript sees it. Browsers never load the content of a `<noscript>` element, so it costs nothing otherwise.
 
 The rendered elements carry a `data-solid-image` attribute you can style. The values are `container`, `aspect-ratio`, `picture`, `image` and `blocker`. The shipped stylesheet uses the same attribute.
 
diff --git a/src/__tests__/browser/solid-image.test.tsx b/src/__tests__/browser/solid-image.test.tsx
index 97c09de..8c95757 100644
--- a/src/__tests__/browser/solid-image.test.tsx
+++ b/src/__tests__/browser/solid-image.test.tsx
@@ -170,6 +170,52 @@ describe("SolidImage in the browser", () => {
     expect(sources[0]!.srcset).toBe(`${PIXEL} 400w,${PIXEL} 800w`);
   });
 
+  it("loads an eager image without waiting for it to scroll into view", async () => {
+    const { host } = mount(() => (
+      <SolidImage
+        src={{ source: PIXEL, width: 100, height: 100, options: {} }}
+        alt="pixel"
+        eager
+        fallback={(visible, show) => (
+          <Show when={visible()}>
+            <Placeholder show={show} />
+          </Show>
+        )}
+      />
+    ));
+
+    // Never scrolled into view, so only `eager` can render this.
+    await expect.poll(() => findImage(host)?.getAttribute("src")).toBe(PIXEL);
+    await expect.poll(() => findImage(host)?.style.opacity).toBe("1");
+  });
+
+  it("gives the img a srcset the browser can pick from", async () => {
+    const { host, scrollIntoView } = mount(() => (
+      <SolidImage
+        src={{ source: PIXEL, width: 1600, height: 900, options: {} }}
+        alt="pixel"
+        transformer={{
+          transform: () => [
+            { path: PIXEL, width: 400, type: "image/webp" },
+            { path: PIXEL, width: 400, type: "image/jpeg" },
+            { path: PIXEL, width: 800, type: "image/jpeg" },
+          ],
+        }}
+        fallback={(visible, show) => (
+          <Show when={visible()}>
+            <Placeholder show={show} />
+          </Show>
+        )}
+      />
+    ));
+
+    scrollIntoView();
+
+    await expect.poll(() => findImage(host)).not.toBe(null);
+
+    expect(findImage(host)!.srcset).toBe(`${PIXEL} 400w,${PIXEL} 800w`);
+  });
+
   it("reserves the aspect ratio before the image loads", () => {
     const { host } = mount(() => (
       <SolidImage
diff --git a/src/__tests__/components.test.tsx b/src/__tests__/components.test.tsx
index 8e9a85b..e3c68cc 100644
--- a/src/__tests__/components.test.tsx
+++ b/src/__tests__/components.test.tsx
@@ -124,9 +124,13 @@ describe("SolidImage SSR", () => {
 
     // The server placeholder is a blank SVG of the same size, so the browser
     // does not fetch the image before it scrolls into view.
-    expect(html).not.toContain("hero.png");
     expect(html).toContain("data:image/svg+xml,");
     expect(html).toContain(encodeURIComponent('width="800"'));
+
+    // The real image is only offered to readers with no JavaScript, and a
+    // browser never loads the content of a noscript element.
+    const outsideNoscript = html.replace(/<noscript[^>]*>.*?<\/noscript>/gs, "");
+    expect(outsideNoscript).not.toContain("hero.png");
   });
 
   it("renders one <source> per MIME type with a srcset", () => {
@@ -145,9 +149,7 @@ describe("SolidImage SSR", () => {
       />
     ));
 
-    expect(html).toContain(
-      '<source data-hk="01000" type="image/webp" srcset="/hero-400.webp 400w,/hero-800.webp 800w">',
-    );
+    expect(html).toContain('type="image/webp" srcset="/hero-400.webp 400w,/hero-800.webp 800w"');
     expect(html).toContain('type="image/jpeg" srcset="/hero-400.jpg 400w"');
   });
 
@@ -192,6 +194,79 @@ describe("SolidImage SSR", () => {
     expect(html).not.toContain("loading");
   });
 
+  it("gives the img a srcset from the least preferred format", () => {
+    const html = renderToString(() => (
+      <SolidImage
+        src={{ source: "/hero.png", width: 1600, height: 900, options: {} }}
+        alt="hero"
+        eager
+        transformer={{
+          transform: () => [
+            { path: "/hero-400.webp", width: 400, type: "image/webp" },
+            { path: "/hero-400.jpg", width: 400, type: "image/jpeg" },
+            { path: "/hero-800.jpg", width: 800, type: "image/jpeg" },
+          ],
+        }}
+        fallback={() => <div>loading</div>}
+      />
+    ));
+
+    // Without this the browser falls back to the full size original.
+    expect(html).toContain('srcset="/hero-400.jpg 400w,/hero-800.jpg 800w" alt="hero"');
+  });
+
+  it("gives the img no srcset when there is no transformer", () => {
+    const html = renderToString(() => (
+      <SolidImage
+        src={{ source: "/hero.png", width: 100, height: 100, options: {} }}
+        alt="hero"
+        eager
+        fallback={() => <div>loading</div>}
+      />
+    ));
+
+    expect(html).not.toContain("srcset=");
+  });
+
+  it("renders the real image on the server when it is eager", () => {
+    const html = renderToString(() => (
+      <SolidImage
+        src={{ source: "/hero.png", width: 100, height: 100, options: {} }}
+        alt="hero"
+        eager
+        fetchPriority="high"
+        fallback={() => <div>loading</div>}
+      />
+    ));
+
+    const outsideNoscript = html.replace(/<noscript[^>]*>.*?<\/noscript>/gs, "");
+
+    // The browser finds the image while it parses the page, instead of waiting
+    // for the observer to report.
+    expect(outsideNoscript).toContain('src="/hero.png"');
+    expect(outsideNoscript).not.toContain("data:image/svg+xml,");
+    expect(outsideNoscript).toContain('fetchpriority="high"');
+  });
+
+  it("offers the image to readers with no JavaScript", () => {
+    const html = renderToString(() => (
+      <SolidImage
+        src={{ source: "/hero.png", width: 1600, height: 900, options: {} }}
+        alt="hero"
+        transformer={{
+          transform: () => [{ path: "/hero-400.jpg", width: 400, type: "image/jpeg" }],
+        }}
+        fallback={() => <div>loading</div>}
+      />
+    ));
+
+    const noscript = /<noscript[^>]*>(.*?)<\/noscript>/s.exec(html)![1]!;
+
+    expect(noscript).toContain('src="/hero.png"');
+    expect(noscript).toContain('srcset="/hero-400.jpg 400w"');
+    expect(noscript).toContain('alt="hero"');
+  });
+
   it("marks the container, aspect ratio box, picture and blocker elements", () => {
     const html = renderToString(() => (
       <SolidImage
diff --git a/src/__tests__/vite-plugin.test.ts b/src/__tests__/vite-plugin.test.ts
index ee21f20..09fab4f 100644
--- a/src/__tests__/vite-plugin.test.ts
+++ b/src/__tests__/vite-plugin.test.ts
@@ -3,7 +3,7 @@ import os from "node:os";
 import path from "node:path";
 import sharp from "sharp";
 import type { Plugin } from "vite";
-import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import { imagePlugin } from "../vite/index";
 import type { SolidImageOptions } from "../vite/index";
 
@@ -15,10 +15,16 @@ function callResolveId(plugin: Plugin, id: string, importer?: string) {
   return fn.call({} as any, id, importer, {});
 }
 
-function callLoad(plugin: Plugin, id: string) {
+function callLoad(plugin: Plugin, id: string, context: unknown = {}) {
   const hook = plugin.load as any;
   const fn = typeof hook === "function" ? hook : hook.handler;
-  return fn.call({} as any, id, {});
+  return fn.call(context as any, id, {});
+}
+
+function callConfigResolved(plugin: Plugin, command: "build" | "serve") {
+  const hook = plugin.configResolved as any;
+  const fn = typeof hook === "function" ? hook : hook.handler;
+  fn.call({} as any, { command } as any);
 }
 
 function getPlugin(plugins: Plugin[], name: string): Plugin {
@@ -207,7 +213,15 @@ describe("local images", () => {
 
     expect(code).toContain("width: 64");
     expect(code).toContain("height: 32");
-    expect(code).toContain('import source from "./photo.png"');
+  });
+
+  it("points the source at the largest variant of the fallback format", async () => {
+    const plugin = createLocalPlugin({ output: ["webp", "jpeg"], sizes: [400, 800] });
+    const code: string = await callLoad(plugin, path.join(dir, "photo.png?image-source"));
+
+    // jpeg is last in the output list, so it is the format every browser reads.
+    expect(code).toContain('import source from "./photo.png?image-raw-jpeg-800"');
+    expect(code).not.toContain('import source from "./photo.png"');
   });
 
   it("loads a transformer that imports one variant per format and size", async () => {
@@ -249,6 +263,43 @@ describe("local images", () => {
     expect(meta.width).toBe(400);
   });
 
+  it("emits the file through the bundler on build", async () => {
+    const plugin = createLocalPlugin();
+    callConfigResolved(plugin, "build");
+
+    const emitFile = vi.fn((_asset: { type: string; name: string; source: Buffer }) => "abc123");
+    const code: string = await callLoad(
+      plugin,
+      path.join(dir, "photo.png?image-raw-webp-400"),
+      { emitFile },
+    );
+
+    // Going through the bundler is what makes `base`, `assetsDir` and the
+    // manifest apply to these files.
+    expect(code).toBe("export default import.meta.ROLLUP_FILE_URL_abc123;");
+    expect(emitFile).toHaveBeenCalledTimes(1);
+
+    const emitted = emitFile.mock.calls[0]![0];
+    expect(emitted.type).toBe("asset");
+    expect(emitted.name).toMatch(/^i-[0-9a-f]+-400\.webp$/);
+
+    const meta = await sharp(emitted.source).metadata();
+    expect(meta.format).toBe("webp");
+    expect(meta.width).toBe(400);
+  });
+
+  it("does not write to the public directory on build", async () => {
+    const buildPublicPath = path.join(dir, "build-public");
+    const plugin = createLocalPlugin({ publicPath: buildPublicPath });
+    callConfigResolved(plugin, "build");
+
+    await callLoad(plugin, path.join(dir, "photo.png?image-raw-webp-400"), {
+      emitFile: () => "abc123",
+    });
+
+    await expect(fs.stat(buildPublicPath)).rejects.toThrow();
+  });
+
   it("uses the jpg extension for jpeg output", async () => {
     const plugin = createLocalPlugin();
     const code: string = await callLoad(plugin, path.join(dir, "photo.png?image-raw-jpeg-800"));
diff --git a/src/core/index.tsx b/src/core/index.tsx
index 6163aac..b64973c 100644
--- a/src/core/index.tsx
+++ b/src/core/index.tsx
@@ -7,7 +7,7 @@ import {
   mergeImageVariantsByType,
   mergeImageVariantsToSrcSet,
 } from "./transformer.ts";
-import type { SolidImageSource, SolidImageTransformer, SolidImageVariant } from "./types.ts";
+import type { SolidImageSource, SolidImageTransformer } from "./types.ts";
 import { getAspectRatioBoxStyle, getEmptyImageURL } from "./utils.ts";
 
 import "./styles.css";
@@ -32,31 +32,28 @@ export interface SolidImageProps<T> {
    */
   fallback: (visible: () => boolean, onLoad: () => void) => JSX.Element;
 
+  /**
+   * Loads the image right away instead of waiting for it to scroll into view.
+   *
+   * The server renders the real image, so the browser finds it while it parses
+   * the page. Use it for the image above the fold and leave the rest lazy.
+   */
+  eager?: boolean;
+
   crossOrigin?: JSX.HTMLCrossorigin | undefined;
   fetchPriority?: "high" | "low" | "auto" | undefined;
   decoding?: "sync" | "async" | "auto" | undefined;
 }
 
-interface SolidImageSourcesProps<T> extends SolidImageProps<T> {
-  variants: SolidImageVariant[];
-}
-
-function SolidImageSources<T>(props: SolidImageSourcesProps<T>): JSX.Element {
-  const mergedVariants = createMemo(() => {
-    const types = mergeImageVariantsByType(props.variants);
-
-    const values: [type: string, srcset: string][] = [];
-
-    for (const [key, variants] of types) {
-      values.push([key, mergeImageVariantsToSrcSet(variants)]);
-    }
+/** A MIME type and the `srcset` built from every variant of that type. */
+type VariantGroup = [type: string, srcset: string];
 
-    return values;
-  });
+interface SolidImageSourcesProps {
+  groups: VariantGroup[];
+}
 
-  return (
-    <For each={mergedVariants()}>{([type, srcset]) => <source type={type} srcset={srcset} />}</For>
-  );
+function SolidImageSources(props: SolidImageSourcesProps): JSX.Element {
+  return <For each={props.groups}>{([type, srcset]) => <source type={type} srcset={srcset} />}</For>;
 }
 
 /**
@@ -76,6 +73,41 @@ export function SolidImage<T>(props: SolidImageProps<T>): JSX.Element {
   const width = createMemo(() => props.src.width);
   const height = createMemo(() => props.src.height);
 
+  const groups = createMemo<VariantGroup[]>(() => {
+    const transformer = props.transformer;
+    if (!transformer) {
+      return [];
+    }
+
+    const types = mergeImageVariantsByType(createImageVariants(props.src, transformer));
+
+    const values: VariantGroup[] = [];
+    for (const [type, variants] of types) {
+      values.push([type, mergeImageVariantsToSrcSet(variants)]);
+    }
+
+    return values;
+  });
+
+  // The browser takes the first `source` it supports and only reaches the `img`
+  // when it supports none of them. Give the `img` the last group, which is the
+  // least preferred format and so the most widely supported one.
+  const fallbackSrcSet = createMemo(() => {
+    const values = groups();
+    return values.length > 0 ? values[values.length - 1]![1] : undefined;
+  });
+
+  const visible = createMemo(() => props.eager || laze.visible);
+
+  const serverSrc = createMemo(() =>
+    props.eager
+      ? props.src.source
+      : getEmptyImageURL({
+          width: width(),
+          height: height(),
+        }),
+  );
+
   return (
     <div ref={laze.ref} data-solid-image="container">
       <div
@@ -86,19 +118,16 @@ export function SolidImage<T>(props: SolidImageProps<T>): JSX.Element {
         })}
       >
         <picture data-solid-image="picture">
-          <Show when={props.transformer}>
-            {cb => <SolidImageSources variants={createImageVariants(props.src, cb())} {...props} />}
-          </Show>
+          <SolidImageSources groups={groups()} />
           <ClientOnly
             fallback={
-              // The image must not load before it scrolls into view, so the
-              // server renders a blank placeholder of the same size instead.
+              // An eager image is rendered in full, so the browser finds it
+              // while it parses the page. A lazy image gets a blank placeholder
+              // of the same size and loads nothing.
               <img
                 data-solid-image="image"
-                src={getEmptyImageURL({
-                  width: width(),
-                  height: height(),
-                })}
+                src={serverSrc()}
+                srcset={props.eager ? fallbackSrcSet() : undefined}
                 alt={props.alt}
                 crossOrigin={props.crossOrigin}
                 fetchpriority={props.fetchPriority}
@@ -106,10 +135,11 @@ export function SolidImage<T>(props: SolidImageProps<T>): JSX.Element {
               />
             }
           >
-            <Show when={laze.visible}>
+            <Show when={visible()}>
               <img
                 data-solid-image="image"
                 src={props.src.source}
+                srcset={fallbackSrcSet()}
                 alt={props.alt}
                 onLoad={() => {
                   if (!defer()) {
@@ -127,10 +157,26 @@ export function SolidImage<T>(props: SolidImageProps<T>): JSX.Element {
             </Show>
           </ClientOnly>
         </picture>
+        {/* Readers with no JavaScript never run the loading logic, so the
+            server gives them a plain image they can see. */}
+        <ClientOnly
+          fallback={
+            <noscript>
+              <img
+                data-solid-image="image"
+                src={props.src.source}
+                srcset={fallbackSrcSet()}
+                alt={props.alt}
+                crossOrigin={props.crossOrigin}
+                decoding={props.decoding}
+              />
+            </noscript>
+          }
+        />
       </div>
       <div data-solid-image="blocker">
         <ClientOnly>
-          <Show when={laze.visible}>{props.fallback(showPlaceholder, onPlaceholderLoad)}</Show>
+          <Show when={visible()}>{props.fallback(showPlaceholder, onPlaceholderLoad)}</Show>
         </ClientOnly>
       </div>
     </div>
diff --git a/src/vite/index.ts b/src/vite/index.ts
index 6cafb79..916e9fc 100644
--- a/src/vite/index.ts
+++ b/src/vite/index.ts
@@ -55,11 +55,23 @@ function isValidFileExtension(extensions: Set<string>, target: string): target i
   return extensions.has(target);
 }
 
-async function getImageSource(imagePath: string, relativePath: string): Promise<string> {
-  // TODO add format variation
+/**
+ * Builds the module that carries the image and its intrinsic size.
+ *
+ * `source` points at the largest variant of the fallback format rather than the
+ * original file, so the untouched original never reaches the bundle.
+ */
+async function getImageSource(
+  imagePath: string,
+  relativePath: string,
+  fallback: SolidImageFormat,
+  largestSize: number,
+): Promise<string> {
   const imageData = await getImageData(imagePath);
+  const variantPath = `${relativePath}?image-raw-${fallback}-${largestSize}`;
+
   return `
-import source from ${JSON.stringify(relativePath)};
+import source from ${JSON.stringify(variantPath)};
 export default {
   width: ${JSON.stringify(imageData.width)},
   height: ${JSON.stringify(imageData.height)},
@@ -154,12 +166,21 @@ export default {
     const quality = options.local.quality ?? DEFAULT_QUALITY;
     const sizes = options.local.sizes;
     const publicPath = options.local.publicPath ?? "dist";
+    // The last output format is the least preferred one, so it is the format
+    // every browser is expected to read.
+    const fallbackFormat = outputFormat[outputFormat.length - 1]!;
+    const largestSize = Math.max(...sizes);
 
     const validInputFileExtensions = getValidFileExtensions(inputFormat);
 
+    let isBuild = false;
+
     plugins.push({
       name: "solid-start:image/local",
       enforce: "pre",
+      configResolved(config) {
+        isBuild = config.command === "build";
+      },
       resolveId(id, importer) {
         if (LOCAL_PATH.test(id) && importer) {
           return path.join(path.dirname(importer), id);
@@ -183,7 +204,7 @@ export default {
         const relativePath = `./${name}.${actualExtension}`;
         // Get the true source
         if (condition.startsWith("image-source")) {
-          return await getImageSource(originalPath, relativePath);
+          return await getImageSource(originalPath, relativePath, fallbackFormat, largestSize);
         }
         // Get the transformer file
         if (condition.startsWith("image-transformer")) {
@@ -196,6 +217,18 @@ export default {
           const filename = `i-${hash}-${size}.${getOutputFileFromFormat(format as SolidImageFormat)}`;
           const image = transformImage(originalPath, format as SolidImageFormat, +size!, quality);
           const buffer = await image.toBuffer();
+
+          // On build the file goes through the bundler, so it picks up `base`,
+          // `assetsDir` and the manifest like any other asset.
+          if (isBuild) {
+            const referenceId = this.emitFile({
+              type: "asset",
+              name: filename,
+              source: buffer,
+            });
+            return `export default import.meta.ROLLUP_FILE_URL_${referenceId};`;
+          }
+
           const basePath = path.join(".image", filename);
           const targetPath = path.join(publicPath, basePath);
           await outputFile(targetPath, buffer);