Configuration

Edit astro.config.ts.

astro.config.ts

import { defineConfig } from 'astro/config';
import { astroImageProcessor } from 'astro-image-processor';

export default defineConfig({
  integrations: [
    astroImageProcessor({
      scopedStyleStrategy: 'class',
      devConcurrency: 3,
    }),
  ],
});

Using a configuration file

A configuration file can be created and loaded with astro.config.ts. (Automatic loading of the configuration file is not supported.)

imageProcessor.config.ts

import { defineConfig } from 'astro-image-processor/config';

export default defineConfig({
  scopedStyleStrategy: 'class',
  componentProps: {
    objectFit: 'cover',
  },
  formatOptions: {
    avif: {
      quality: 60,
    },
  },
});

astro.config.ts

import { defineConfig } from 'astro/config';
import { astroImageProcessor } from 'astro-image-processor';
import imageProcessorConfig from './imageProcessorConfig.js';

export default defineConfig({
  integrations: [astroImageProcessor(imageProcessorConfig)],
});