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",
    }),
  ],
});

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),
  ],
});