/**
 * Responsive images from Moteur assets, without network calls: an asset (or a media field's
 * value read with `resolveAssets=1`) turned into `src`, `srcset`, `width`, `height` and `alt`
 * for an `<img>`. Addresses come from the server (`resizeUrl`, `cropUrl`); these only add the
 * width and format. See docs/Images.md.
 */
/**
 * The widths the server makes (core `RESIZE_WIDTHS`): another width gets the next one up, and
 * nothing is made wider than the original.
 */
export declare const IMAGE_WIDTHS: readonly [160, 320, 480, 640, 800, 1024, 1280, 1600, 2048, 2560];
/** The shapes the server crops to (core `RESIZE_RATIOS`), around the picture's focal point. */
export declare const IMAGE_RATIOS: readonly ["1:1", "4:3", "3:2", "16:9", "21:9", "3:4", "2:3", "9:16"];
export type ImageRatio = (typeof IMAGE_RATIOS)[number];
export type ImageFormat = 'webp' | 'avif' | 'jpg' | 'png';
/** Text in one string, or one per language. */
type LocalText = string | Record<string, string> | null | undefined;
/** What these helpers read from an asset. */
export type ImageAsset = {
    url?: string;
    resizeUrl?: string;
    width?: number;
    height?: number;
    focalPoint?: {
        x: number;
        y: number;
    };
    alt?: LocalText;
};
/** A media field's value read with `resolveAssets=1`: the field's texts, the asset, its crop. */
export type ResolvedImage = {
    assetId?: string;
    alt?: LocalText;
    caption?: LocalText;
    cropUrl?: string;
    aspectRatio?: string;
    _resolved?: ImageAsset | null;
};
export type ImageSource = ImageAsset | ResolvedImage | null | undefined;
export type ImageOptions = {
    /** Crop to this shape (overrides the field's own crop). */
    ratio?: ImageRatio;
    /** `webp` unless set. */
    format?: ImageFormat;
};
/**
 * The picture at a width (rounded up by the server to one of `IMAGE_WIDTHS`), cropped to the
 * field's shape when it asks for one. Without `resizeUrl` (not an image, or an older server):
 * the file as uploaded.
 */
export declare function imageUrl(source: ImageSource, width: number, options?: ImageOptions): string | undefined;
/**
 * `srcset` for the widths the server makes, up to the original's: `…&w=320 320w, …`. Each
 * descriptor is the width actually served (never wider than the original).
 */
export declare function imageSrcset(source: ImageSource, options?: ImageOptions & {
    widths?: readonly number[];
}): string | undefined;
export type ImageAttributes = {
    src?: string;
    srcset?: string;
    sizes?: string;
    /** The picture's shape, so the page doesn't jump while it loads. */
    width?: number;
    height?: number;
    alt: string;
};
/**
 * Everything an `<img>` needs: `<img {...imageAttributes(entry.data.cover, { sizes: '50vw' })}>`.
 * `alt` is the field's own text if it has one, else the asset's, in `locale`; empty when there
 * is none (a decorative picture), never missing.
 */
export declare function imageAttributes(source: ImageSource, options?: ImageOptions & {
    /** How wide the picture shows, as in `<img sizes>`: `100vw` unless set. */
    sizes?: string;
    widths?: readonly number[];
    /** The width for `src`, for browsers without `srcset` (1024 unless set). */
    fallbackWidth?: number;
    locale?: string;
    defaultLocale?: string;
}): ImageAttributes;
/**
 * The focal point as CSS `object-position` ("30% 70%"), for crops made in the page (CSS
 * `object-fit: cover`) to keep what the server's crops keep.
 */
export declare function focalPosition(source: ImageSource): string;
export {};
//# sourceMappingURL=images.d.ts.map