Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-astro
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.
npx claudepluginhub fusengine/agents --plugin fuse-astroHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-astro:astro-assetsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Production-ready image optimization and asset management with `astro:assets` in Astro 6.
Automatically optimizes images in Astro at build time using astro:assets — enforces alt text, generates WebP/AVIF, prevents layout shift, and supports remote images with configurable allowlists.
SEO for Astro sites — meta tags, Open Graph, Twitter Cards, JSON-LD structured data, sitemap, RSS, robots.txt, canonical URLs, hreflang, Core Web Vitals. Use when optimizing search engine visibility or social sharing.
Comprehensive best practices, routing patterns, component architecture, and static site generation techniques for building high-performance Astro websites.
Share bugs, ideas, or general feedback.
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