Migrating from astro-compress

UPDATE
astro-compress has been republished!

astro-compress has been deprecated & deleted by the author. Here’s a quick overview of what you can do to migrate to newer solutions for optimisation.

astro:assets

Image optimisation can now be achieved natively using astro:assets. Images are placed anywhere in the src/ directory (e.g. src/assets/), and can be imported and used in your .astro components.

Enable Assets (pre-3.0)

astro:assets currently sits behind an experimental flag. To enable it, modify your Astro config to enable the flag.

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
   assets: true
  }
});

Importing images

Copy your existing images to src/assets/, or another convenient directory. Then, you can import them and use them in your markup.

---
import rocket from '../assets/images/rocket.png'
---

<!-- img tag -->
<img src={rocket.src} width={rocket.width} height={rocket.height} alt="A rocketship in space." />

<!-- Image component -->
<Image src={rocket} alt="A rocketship in space." />

Check out the full assets guide for more info & configuration.

compressHTML

Astro now supports minifying HTML automatically, using the compressHTML option in astro.config.mjs.

import { defineConfig } from 'astro/config';

export default defineConfig({
  compressHTML: true
});

Jampack

An alternative “one-click” solution is Jampack. Similar to astro-compress, but framework agnostic, Jampack performs compression on your dist/ output.

npx @divriots/jampack ./dist

Contribute upstream

If you’re using an Astro theme that ships with astro-compress by default, consider sending the author a quick PR to help future users. Even if it’s as simple as removing the integration, this will fix their template, and it can continue to serve the community.

Astro