Getting Started

Install the package.

pnpm add astro-image-processor

Bun add astro-image-processor

yarn add astro-image-processor

npm install astro-image-processor

Add to the Astro settings.

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

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

Place global styles.

---
import GlobalStyles from 'astro-image-processor/components/GlobalStyles.astro';
---

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Astro Image Processor</title>
  </head>
  <body>
    <h1>Astro Image Processor</h1>
    <slot />
  </body>
</html>

<GlobalStyles />

Place component to the page.

---
import Picture from 'astro-image-processor/components/Picture.astro';
import Layout from '../layout/Layout.astro';
---

<Layout>
  <Picture src="" alt="Sample image" />
</Layout>

Run build.

pnpm build

bun run build

yarn build

npm build