Images

The <Image> component handles optimization, responsive srcset, lazy loading, and blur-up placeholders — all automatically.

Basic usage

The width, height, and alt props are required. They help the framework reserve space and generate the correct srcset.

import { Image } from "swift-rust";

<Image
  src="/hero.jpg"
  alt="A description of the image"
  width={1200}
  height={600}
  priority
/>

Responsive srcset

The framework generates a srcset with three densities (1x, 2x, 3x) and emits a sizes attribute when you provide one. Add priority for above-the-fold images to skip lazy loading.

Remote sources

Add the domain to swift-rust.config.json to allow remote images:

{
  "image": {
    "domains": ["cdn.example.com"],
    "formats": ["image/avif", "image/webp"]
  }
}

Blur placeholders

Pass a blurDataURL (a small base64-encoded image) to show a blurry preview while the full image loads.

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Next steps

Continue to Videos.