Image and asset optimization in Astro 6 — <Image />, <Picture />, getImage(), remote images, @astrojs/sharp, Fonts API, OG image generation with Satori, Cloudinary/Imgix. Use for any image optimization or asset handling task.
From fuse-astronpx claudepluginhub fusengine/agents --plugin fuse-astroThis skill uses the workspace's default tool permissions.
references/cdn-integration.mdreferences/fonts-api.mdreferences/image-component.mdreferences/og-satori.mdreferences/picture-responsive.mdreferences/remote-images.mdreferences/templates/image-setup.mdreferences/templates/og-image-route.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
Production-ready image optimization and asset management with astro:assets in Astro 6.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Module | Exports |
|---|---|
astro:assets | <Image />, <Picture />, getImage() |
@astrojs/sharp | Default image processing service |
| Fonts API (Astro 6) | Built-in experimental.fonts config |
<Image /> automatically optimizes local and remote images. Always provide alt. Use priority for above-the-fold images. Defaults to WebP output.
<Picture /> generates <source> elements for multiple formats. Use formats={['avif', 'webp']} for best compression with fallback.
For server-side image generation (API routes, CSS background images). Returns { src, attributes } object.
Built-in font optimization via experimental.fonts in astro.config.mjs. Zero layout shift, automatic preloading, supports Google Fonts and local fonts.
| Topic | Reference | When to Consult |
|---|---|---|
| Image Component | image-component.md | Local/remote image display |
| Responsive Images | picture-responsive.md | Multi-format, srcset, sizes |
| Remote Images | remote-images.md | External URLs, inferSize |
| Fonts API | fonts-api.md | Zero-CLS font loading |
| OG with Satori | og-satori.md | Dynamic OG image generation |
| CDN Integration | cdn-integration.md | Cloudinary, Imgix setup |
| Template | When to Use |
|---|---|
| image-setup.md | Full image optimization setup |
| og-image-route.md | Dynamic OG image API route |
alt - Required for accessibility and SEOpriority for LCP - Above-the-fold images load eagerlyinferSize for remote - Avoids layout shift without known dimensions