@pixel-puppy/javascript
Version:
Official JavaScript/TypeScript library for Pixel Puppy - Transform and optimize images with WebP conversion and smart resizing
103 lines • 3.34 kB
TypeScript
/**
* Options for generating responsive image attributes
*/
export interface ResponsiveImageOptions {
/**
* Base URL to prepend to relative image URLs.
* Overrides any globally configured baseUrl for this call only.
*
* @example
* getResponsiveImageAttributes('project', '/images/hero.webp', {
* baseUrl: 'https://cdn.example.com'
* })
*/
baseUrl?: string;
/**
* Custom device width breakpoints
* @default [480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
*/
deviceBreakpoints?: number[];
/**
* The desired image format
*/
format?: 'webp' | 'png';
/**
* Custom image width breakpoints (concatenated with deviceBreakpoints)
* @default [16, 32, 48, 64, 96, 128, 256, 384]
*/
imageBreakpoints?: number[];
/**
* Whether to generate responsive image attributes (srcset, sizes)
* When false, returns only a single src URL
* @default true
*/
responsive?: boolean;
/**
* The HTML sizes attribute value
* When provided, uses sizes-based strategy with filtered breakpoints
*/
sizes?: string;
/**
* The intended display width of the image in pixels
*/
width?: number;
}
/**
* Generated responsive image attributes for use in img tags
*/
export interface ResponsiveImageAttributes {
/**
* The sizes attribute value (only present for width-based strategy)
*/
sizes?: string;
/**
* The src attribute value (fallback image URL)
*/
src: string;
/**
* The srcSet attribute value with multiple image candidates
*/
srcSet: string;
/**
* The width attribute value (only present for DPR-based strategy)
*/
width?: number;
}
/**
* Generates responsive image attributes for use in img tags
*
* @param project - The Pixel Puppy project identifier
* @param src - The original image URL
* @param options - Responsive image options
* @returns Object with src, srcSet, and optionally sizes and width attributes
*
* @example
* // Non-responsive (single URL)
* const attrs = getResponsiveImageAttributes('my-project', 'https://example.com/image.jpg', {
* width: 800,
* responsive: false
* })
* // Returns: { src: '...' }
*
* @example
* // Width-based strategy (width provided, no sizes)
* const attrs = getResponsiveImageAttributes('my-project', 'https://example.com/image.jpg', {
* width: 800
* })
* // Returns: { src: '...', srcSet: '... 480w, 640w, 750w, 800w, ..., 1600w, ...', sizes: '(min-width: 1024px) 1024px, 100vw', width: 800 }
*
* @example
* // Sizes-based strategy (with sizes)
* const attrs = getResponsiveImageAttributes('my-project', 'https://example.com/image.jpg', {
* width: 800,
* sizes: '(min-width: 768px) 50vw, 100vw'
* })
* // Returns: { src: '...', srcSet: '... 640w, ... 750w, ...', sizes: '(min-width: 768px) 50vw, 100vw' }
*
* @example
* // Default strategy (no width or sizes)
* const attrs = getResponsiveImageAttributes('my-project', 'https://example.com/image.jpg')
* // Returns: { src: '...', srcSet: '... 480w, 640w, 750w, ...', sizes: '100vw' }
*/
export declare function getResponsiveImageAttributes(project: string, src: string, options?: ResponsiveImageOptions): ResponsiveImageAttributes;
//# sourceMappingURL=responsive.d.ts.map