Astro

Install and configure Oxidized Image in an Astro project

Installation

Install the plugin and its peer dependencies using your preferred package manager:

npm install -D @oxidized-image/astro @napi-rs/image

Important

@napi-rs/image is a required peer dependency and must be installed alongside @oxidized-image/astro.

Setup

Add the integration to your astro.config.ts:

astro.config.ts
import { defineConfig } from 'astro/config';
import oxidizedImage from '@oxidized-image/astro';

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

This replaces Astro's default Sharp-based image service with the Oxidized Image service, which uses a Rust-based engine via @napi-rs/image for faster encoding.

Configuration

You can customize compression options per format by passing a config object:

astro.config.ts
import { defineConfig } from 'astro/config';
import oxidizedImage from '@oxidized-image/astro';

export default defineConfig({
	integrations: [
		oxidizedImage({
			jpeg: {
				quality: 80,
			},
			png: {
				compressionType: 'best',
			},
			webp: {
				quality: 80,
			},
			avif: {
				quality: 100,
				alphaQuality: 100,
				speed: 4,
			},
		}),
	],
});

Options

OptionTypeDefaultDescription
jpeg.qualitynumber80JPEG quality (1–100)
png.compressionTypeCompressionTypeBestPNG compression level
png.filterTypeFilterTypeAdaptivePNG filter type
webp.qualitynumber80WebP quality (1–100)
avif.qualitynumber100AVIF quality (1–100)
avif.alphaQualitynumber100AVIF alpha channel quality (1–100)
avif.speednumber4AVIF encoding speed (1–10, lower is slower but smaller)
avif.threadsnumber0Number of threads (0 = auto)

On this page