Sharp Images

Importing through astro:assets (import { Image } from "astro:assets") triggers Sharp during astro build. Source files live under website/src/assets/ (landing screenshots, testimonial avatars, tutorial PNGs, footer paper texture). Output is responsive WebP under dist/_astro/*.webp.

Components pass widths and sizes so Astro generates a srcset. Landing feature rows, hero carousel slides, and testimonial columns all use this path. Layout stays stable because width/height hints reserve space before lazy-loaded images arrive.

Sharp does not ship in the RuForge installer. Player thumbnails come from yt-dlp art, ffmpeg poster JPEGs, or local files on disk. Scrub sprites are ffmpeg output, not Astro image service.

Adding a new marketing image: drop source in website/src/assets/, import in the .astro component, run npm run build in website/ to verify Sharp output.

---
import { Image } from 'astro:assets';
import { landingFeatureIntro, landingFeatureRows } from '../lib/landingFeatures';
---

          <figure class="landing-features__figure">
            <div class="landing-features__frame">
              <Image
                src={row.image}
                alt={row.imageAlt}
                class="landing-features__shot"
                widths={[640, 960, 1280]}
                sizes="(max-width: 768px) 100vw, 56vw"
                loading="lazy"
                decoding="async"
              />
            </div>
          </figure>
        </article>