ImgProcUserOptions

Image Processor User Options

Extends

Partial<ImgProcSettings>

Properties

componentProps?

optional componentProps: Partial<Pick<ImgProcProcessorOptions, "placeholder" | "format" | "tagName" | "placeholderColor" | "blurProcessor" | "upscale" | "layout" | "objectFit" | "objectPosition" | "backgroundSize" | "backgroundPosition" | "enforceAspectRatio" | "preload" | "formats" | "minAge" | "maxAge" | "crossOrigin">>

Defined in: types.ts:32

Default component properties (user settings)

concurrency?

optional concurrency: number

Defined in: types.ts:175

Concurrency

Default

Math.max(os.cpus().length, 1)

Inherited from

Partial.concurrency

dataAdapter?

optional dataAdapter: ImgProcDataAdapter

Defined in: types.ts:210

Data adapter for cache database

Default

"astro-image-processor/extras/JsonFileDataAdapter"

Inherited from

Partial.dataAdapter

disableCopy?

optional disableCopy: boolean

Defined in: types.ts:150

Disable copying from the cache to the output directory

Refer to the description of imageOutDirPattern

Default

false

Inherited from

Partial.disableCopy

downloadDirPattern?

optional downloadDirPattern: string

Defined in: types.ts:96

Directory for downloading remote files (pattern)

Support the following placeholders:
- [root]: Replace with root in Astro.
- [cacheDir]: Replace with cacheDir in Astro.
- [imageCacheDir]: Replace with imageCacheDir in this intergration.

Default

[imageCacheDir]downloads/

Inherited from

Partial.downloadDirPattern

fileNamePattern?

optional fileNamePattern: string

Defined in: types.ts:144

File name pattern when preserve directory structure option is enabled

Uses if preserveDirectories is true
Support the following placeholders:
- [name]: Original file name (without extension)
- [hash]: File hash (full)
- [hash8]: File hash (first 8 characters)
- [width]: Resolved width
- [height]: Resolved height
- [descriptor]: 1x 2x 1000w 2000w
- [ext]: Extension (without period)
The file name must include all of [name], [width], [height], and [descriptor], or include [hash8] or [hash]
- If this condition is not met, different images may be given the same name
Cache buster can be specified using the hash and query parameter

Default

[name]_[width]x[height]@[descriptor].[ext]?[hash8]

Inherited from

Partial.fileNamePattern

formatOptions?

optional formatOptions: ImgProcFormatOptions

Defined in: types.ts:57

Default format options (user settings)

globalClassNames?

optional globalClassNames: object

Defined in: types.ts:170

Class names used in global CSS

If change this, need to create and place the corresponding global CSS

cssVariables

cssVariables: object

cssVariables.blurredImage

blurredImage: string = "--aip-blurred-image"

cssVariables.placeholderAnimationState

placeholderAnimationState: string = "--aip-placeholder-animation-state"

element

element: object

element.asBackground

asBackground: string = "aip-elm-as-background"

element.background

background: string = "aip-elm-background"

element.container

container: string = "aip-elm-container"

element.img

img: string = "aip-elm-img"

element.picture

picture: string = "aip-elm-picture"

layout

layout: object

layout.constrained

constrained: string = "aip-layout-constrained"

layout.fill

fill: string = "aip-layout-fill"

layout.fixed

fixed: string = "api-layout-fixed"

layout.fullWidth

fullWidth: string = "aip-layout-fullWidth"

Default

Configured for <GlobalStyles> component

Inherited from

Partial.globalClassNames

hasher?

optional hasher: ImgProcHasher

Defined in: types.ts:205

Hash generator for buffer and string

Recommended to use astro-image-processor/extras/xxHash3Hasher with xxhash-addon.
If the hasher (or more specifically, the hash algorithm) is changed, caches and database must be cleared.
- Changing the hasher will rename the image files.

Default

"astro-image-processor/extras/cryptoHasher"

Inherited from

Partial.hasher

imageAssetsDirPattern?

optional imageAssetsDirPattern: string

Defined in: types.ts:104

Image assets directory (pattern)

Support the following placeholders:
- [assetsDirName]: Replaced with _astro by default Astro settings
Images placed in /_astro/[hash].[ext] by default.

Default

/[assetsDirName]/

Inherited from

Partial.imageAssetsDirPattern

imageCacheDirPattern?

optional imageCacheDirPattern: string

Defined in: types.ts:87

Image cache directory (pattern)

Support the following placeholders:
- [root]: Replace with root in Astro.
- [cacheDir]: Replace with cacheDir in Astro.

Default

[cacheDir]astro-image-processor/

Inherited from

Partial.imageCacheDirPattern

imageOutDirPattern?

optional imageOutDirPattern: string

Defined in: types.ts:114

Image output directory (pattern)

Support the following placeholders:
- [root]: Replace with root in Astro.
- [outDir]: Replace with outDir in Astro.
If disableCopy is true, use this value as path prefix. (Placeholder is disabled)
- e.g. Set this value to https://cdn.example.com/assets/ to generate src/srcset like src="https://cdn.example.com/assets/[hash].webp", and rsync --update --delete to synchronize imageCacheDir to CDN.

Default

[outDir]

Inherited from

Partial.imageOutDirPattern

preserveDirectories?

optional preserveDirectories: boolean

Defined in: types.ts:126

Preserve directory structure for image files

Place images by root relative paths with srcDir as the document root
Image filenames are resolved according to fileNamePattern
e.g.
- Place the source file in /src/assets/images/foo/bar.png and set the src property in the component to the same value
- Image output to /dist/assets/images/foo/[resolved fileNamePattern]
- The src and srcset of the <img> element etc. will contain /assets/images/foo/[resolved fileNamePattern]

Default

false
@experimental

Inherited from

Partial.preserveDirectories

retentionCount?

optional retentionCount: null | number

Defined in: types.ts:197

Cache retention count

Delete the cache if not used consecutively in the last n builds.
If set to null, disables cache deletion by this policy.
If both period and count are enabled, they are processed under AND conditions.

Default

Inherited from

Partial.retentionCount

retentionPeriod?

optional retentionPeriod: null | number

Defined in: types.ts:189

Cache retention period (ms)

If not used within the set period, the cache will be subject to deletion
If set to null, disables cache deletion by this policy
If both period and count are enabled, they are processed under AND conditions

Default

8640000 (100 days)

Inherited from

Partial.retentionPeriod

scopedStyleStrategy?

optional scopedStyleStrategy: "class" | "attribute" | "where"

Defined in: types.ts:164

Specify the strategy used for scoping styles

See

Astro Docs scopedStyleStrategy

Default

Inherit Astro settings

Inherited from

Partial.scopedStyleStrategy

timeoutDuration?

optional timeoutDuration: number

Defined in: types.ts:181

Download timeout duration (milliseconds)

Timeout duration for downloading remote files @default: 5000 (5 seconds)

Inherited from

Partial.timeoutDuration

useSrcForHash?

optional useSrcForHash: boolean

Defined in: types.ts:158

Use the string from the component’s src property to generate a hash for identifying local image files

Fast since it doesn’t require reading the image file during hash generation
- However, duplicate files cannot be detected
Note that files will be recognized as different if the file name or directory changes

Default

false

Inherited from

Partial.useSrcForHash