Image optimization

The Image component emits an img element with responsive optimizer URLs during SSR. Supply accurate dimensions to reserve space, a meaningful alt description, widths that match the design, and sizes that explain the rendered width to the browser.

tsximport { Image } from "@tavojs/core";
import { Page } from "@tavojs/ui";

export function ProjectHero() {
  return (
    <Page>
      <Image
        src="/images/project-dashboard.png"
        alt="Project dashboard showing active work"
        width={1280}
        height={720}
        widths={[640, 960, 1280]}
        sizes="(min-width: 60rem) 60rem, 100vw"
        priority
      />
    </Page>
  );
}

Files under public have root-relative browser URLs. Keep the source path inside that directory so the optimizer cannot read arbitrary server files. Use unoptimized when the source is already transformed or the deployment has no image optimizer.

Remote optimization is disabled until the application enables it and supplies an HTTPS allowlist. Restrict hostnames and paths to the product's actual media origins.

tsimport { defineConfig } from "@tavojs/core/config";

export default defineConfig({
  ssr: {
    images: {
      allowRemote: true,
      remotePatterns: [
        {
          protocol: "https:",
          hostname: "media.example.com",
          pathname: "/projects/",
        },
      ],
    },
  },
});

The SSR optimizer uses the optional sharp dependency for transformations. Install it in the application that runs the server, then verify the /_tavo/image endpoint in production preview and on the selected platform.

bashnpm install sharp
npm run build
npm run preview:ssr