Assets and Images

function getImage(options: UnresolvedImageTransform, imageConfig: AstroConfig['image']): Promise<GetImageResult>;

interface UnresolvedImageTransform {
  src: ImageMetadata | string;
  width?: number; height?: number; aspectRatio?: string | number;
  format?: ImageOutputFormat; quality?: ImageQuality;
  densities?: number[]; widths?: number[];
}

interface GetImageResult {
  src: string;
  srcSet: { values: SrcSetValue[]; attribute: string; };
  attributes: Record<string, any>;
}

import { getImage } from 'astro:assets';
import myImage from '../assets/photo.jpg';

const optimized = await getImage({
  src: myImage, width: 800, format: 'webp', quality: 80
});

function getConfiguredImageService(): Promise<ImageService>;

function inferRemoteSize(url: string): Promise<ImageMetadata>;

interface ImageMetadata {
  src: string; width: number; height: number; format: ImageInputFormat;
}

---
import { Image } from 'astro:assets';
import localImage from '../assets/photo.jpg';
---

<!-- Local -->
<Image src={localImage} alt="Description" />

<!-- Remote (requires width/height) -->
<Image src="https://example.com/image.jpg" width={800} height={600} alt="Description" />

<!-- With transformations -->
<Image src={localImage} width={800} format="webp" quality={80} alt="Description" />

interface LocalImageProps {
  src: ImageMetadata; alt: string;
  width?: number; height?: number; format?: ImageOutputFormat; quality?: ImageQuality;
  densities?: number[]; widths?: number[];
  loading?: 'lazy' | 'eager'; decoding?: 'async' | 'sync' | 'auto';
}

interface RemoteImageProps {
  src: string; alt: string; width: number; height: number;
  format?: ImageOutputFormat; quality?: ImageQuality;
  loading?: 'lazy' | 'eager'; inferSize?: boolean;
}

---
import { Picture } from 'astro:assets';
import myImage from '../assets/photo.jpg';
---

<Picture src={myImage} formats={['avif', 'webp']} alt="Description" widths={[400, 800, 1200]} />

---
import { Font } from 'astro:assets';
---

<Font cssVariable="--font-inter" preload={true} />

interface FontProps {
  cssVariable: string | { name: string; fallback?: string };
  preload?: boolean | ((font: FontData) => boolean);
}

function getFontData(cssVariable: string | { name: string; fallback?: string }): FontData[];

interface FontData {
  src: Array<{ url: string; format?: string; tech?: string }>;
  weight?: string; style?: string;
}

type ImageOutputFormat = 'avif' | 'png' | 'webp' | 'jpeg' | 'jpg' | 'svg';
type ImageInputFormat = 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp' | 'gif' | 'svg' | 'avif';
type ImageQuality = 'low' | 'mid' | 'high' | 'max' | number;

import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService({ limitInputPixels: 268402689 })
  }
});

import { defineConfig, passthroughImageService } from 'astro/config';

export default defineConfig({
  image: { service: passthroughImageService() }
});

function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata;
function isRemoteImage(src: ImageMetadata | string): src is string;
function resolveSrc(src: UnresolvedImageTransform['src']): Promise<string | ImageMetadata>;

function imageMetadata(data: Uint8Array, src?: string): Promise<Omit<ImageMetadata, 'src' | 'fsPath'>>;
function emitImageMetadata(id: string | undefined, fileEmitter?: FileEmitter): Promise<ImageMetadataWithContents | undefined>;

interface RemotePattern {
  hostname?: string; pathname?: string; protocol?: string; port?: string;
}

function isRemoteAllowed(src: string, options: { domains: string[]; remotePatterns: RemotePattern[]; }): boolean;
function matchPattern(url: URL, remotePattern: RemotePattern): boolean;

import { isRemoteAllowed } from 'astro/assets/utils';

const allowed = isRemoteAllowed('https://cdn.example.com/images/photo.jpg', {
  domains: ['cdn.example.com'],
  remotePatterns: [{ protocol: 'https', hostname: '**.example.com', pathname: '/images/**' }]
});

function hashTransform(transform: ImageTransform, imageService: string, propertiesToHash: string[]): string;
function propsToFilename(filePath: string, transform: ImageTransform, hash: string): string;

---
import logo from '../assets/logo.svg';
---

<!-- As image -->
<img src={logo.src} width={logo.width} height={logo.height} alt="Logo" />

<!-- As component -->
<logo width="100" height="100" />

<Image src={photo} widths={[400, 800, 1200]} sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" alt="Responsive" />

// astro.config.mjs
export default defineConfig({
  build: { assetsPrefix: 'https://cdn.example.com' }
});