astro-assets

Import the Image component from astro:assets and pass a local image import as src with a required alt attribute. Astro automatically infers dimensions and outputs WebP; add widths and sizes props for responsive srcset generation.

The Image component outputs a single optimized img element, while Picture generates source elements for multiple formats like AVIF and WebP with a fallback img. Use Picture when you need format fallbacks or art direction across viewports.

Use the stable Fonts API by adding a fonts array with fontProviders.google() in astro.config.mjs, then render the Font component with your cssVariable in the layout head. It applies font-display: optional and automatic preloading to eliminate CLS.

Yes, authorize the CDN domain in the image config using domains or remotePatterns, then use the Image component with the remote URL. Add inferSize when dimensions are unknown, or configure a custom image service entrypoint for Cloudinary or Imgix transformations.

Create a dynamic API route like src/pages/og/[slug].png.ts that uses Satori to render an SVG from a JSX-like object and Resvg or Sharp to convert it to PNG. Run it at build time via getStaticPaths since Satori rendering is expensive for SSR.

Astro only optimizes images from authorized domains by default, so unlisted hosts are blocked for security. Add the hostname to image.domains or image.remotePatterns in astro.config.mjs, and use inferSize if width and height are unknown.