Skip to content
Astro Image Processor

ImgProcUserOptions

Image Processor User Options

Extends

Properties

componentProps?

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

Default component properties (user settings)

Defined in

src/types.ts:32

concurrency?

optional concurrency: number

Concurrency

Default

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

Inherited from

Partial.concurrency

Defined in

src/types.ts:175

dataAdapter?

optional dataAdapter: ImgProcDataAdapter

Data adapter for cache database

Default

"astro-image-processor/extras/JsonFileDataAdapter"

Inherited from

Partial.dataAdapter

Defined in

src/types.ts:210

disableCopy?

optional disableCopy: boolean

Disable copying from the cache to the output directory

  • Refer to the description of imageOutDirPattern

Default

false

Inherited from

Partial.disableCopy

Defined in

src/types.ts:150

downloadDirPattern?

optional downloadDirPattern: string

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

Defined in

src/types.ts:96

fileNamePattern?

optional fileNamePattern: string

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

Defined in

src/types.ts:144

formatOptions?

optional formatOptions: ImgProcFormatOptions

Default format options (user settings)

Defined in

src/types.ts:57

globalClassNames?

optional globalClassNames: object

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

Defined in

src/types.ts:170

hasher?

optional hasher: ImgProcHasher

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

Defined in

src/types.ts:205

imageAssetsDirPattern?

optional imageAssetsDirPattern: string

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

Defined in

src/types.ts:104

imageCacheDirPattern?

optional imageCacheDirPattern: string

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

Defined in

src/types.ts:87

imageOutDirPattern?

optional imageOutDirPattern: string

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

Defined in

src/types.ts:114

preserveDirectories?

optional preserveDirectories: boolean

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

Defined in

src/types.ts:126

retentionCount?

optional retentionCount: null | number

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

10

Inherited from

Partial.retentionCount

Defined in

src/types.ts:197

retentionPeriod?

optional retentionPeriod: null | number

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

Defined in

src/types.ts:189

scopedStyleStrategy?

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

Specify the strategy used for scoping styles

See

Astro Docs scopedStyleStrategy

Default

Inherit Astro settings

Inherited from

Partial.scopedStyleStrategy

Defined in

src/types.ts:164

timeoutDuration?

optional timeoutDuration: number

Download timeout duration (milliseconds)

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

Inherited from

Partial.timeoutDuration

Defined in

src/types.ts:181

useSrcForHash?

optional useSrcForHash: boolean

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

Defined in

src/types.ts:158