Skill

astro-assets

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-astro

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-astro

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/cdn-integration.md

references/fonts-api.md

references/image-component.md

references/og-satori.md

references/picture-responsive.md

references/remote-images.md

references/templates/image-setup.md

references/templates/og-image-route.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.7k

claude-opus-4-5-migration

2 files

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.

claude-opus-4-5-migration

83.2k

bmad-help

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.

bmad-pro-skills

43.8k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 17, 2026

Actions

View Source View Plugin View on GitHub View README

Astro Assets

Production-ready image optimization and asset management with astro:assets in Astro 6.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing image usage and asset patterns
fuse-ai-pilot:research-expert - Verify astro:assets API via Context7/Exa
mcp__context7__query-docs - Check Astro 6 Fonts API and image component docs

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Displaying optimized images with automatic WebP/AVIF conversion
Building responsive images with multiple breakpoints
Loading remote images from external CDNs
Configuring custom fonts without layout shift
Generating OG images dynamically with Satori
Integrating Cloudinary or Imgix as image CDN

Key Modules

Module	Exports
`astro:assets`	`<Image />`, `<Picture />`, `getImage()`
`@astrojs/sharp`	Default image processing service
Fonts API (Astro 6)	Built-in `experimental.fonts` config

Core Concepts

Image Component

<Image /> automatically optimizes local and remote images. Always provide alt. Use priority for above-the-fold images. Defaults to WebP output.

Picture Component

<Picture /> generates <source> elements for multiple formats. Use formats={['avif', 'webp']} for best compression with fallback.

getImage()

For server-side image generation (API routes, CSS background images). Returns { src, attributes } object.

Fonts API (Astro 6)

Built-in font optimization via experimental.fonts in astro.config.mjs. Zero layout shift, automatic preloading, supports Google Fonts and local fonts.

Reference Guide

Concepts

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

Templates

Template	When to Use
image-setup.md	Full image optimization setup
og-image-route.md	Dynamic OG image API route

Best Practices

Always provide alt - Required for accessibility and SEO
Use priority for LCP - Above-the-fold images load eagerly
inferSize for remote - Avoids layout shift without known dimensions
Fonts API over @font-face - Built-in optimization, no manual preload
Satori at build time - Run OG generation during SSG, not SSR