Images and fonts

Dusk provides Image from @shadow-js/dusk/components and the images() optimizer at /_dusk/image. Image computes responsive candidates, reserves the aspect ratio and supports priority loading. Configure remote sources, widths, formats and qualities for the optimizer. A plain img also works; importing an image through Vite gives its hashed asset URL.

/// <reference types="vite/client" />
import logo from "./logo.png";

export function Avatar(props: { name: string }) {
  return (
    <img
      src={logo}
      alt={props.name}
      width={64}
      height={64}
      loading="lazy"
      decoding="async"
      srcset={`${logo} 1x`}
    />
  );
}

For fonts, use defineFonts (@shadow-js/dusk/vite): vendor the font files into public/fonts/, and it writes the @font-face rules (with font-display, the width axis and a size-adjusted fallback), a --font-* variable per family and the preload tags. Like next/font, it preloads fonts and builds the fallback by default (preload: false and metrics: false turn them off). Google Fonts are downloaded at build time only with the { google: [...] } input, and vendored into public/. Declaring @font-face in CSS by hand also works. Files in public/ are served by serve() with ETags; names with a content hash are sent immutable.