Skip to content
Astro Image Processor

Getting Started

Install the package.

sh pnpm add astro-image-processor

Add to the Astro settings.

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


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

Place global styles.

src/layout/Layout.astro
---
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.

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


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

Run build.

sh pnpm build