Compress screenshot

Compress

Author Avatar Theme by Playform
Updated: 23 May 2025
562 Stars

Compress

Overview:

AstroCompress is an Astro integration that brings compression utilities to your Astro project. It allows for the compression of CSS, HTML, JavaScript, images, and SVG files in the Astro outDir folder. It is important to note that AstroCompress will only compress the statically generated build and pre-rendered routes, not requests. To achieve the best optimization, AstroCompress should be used as the last integration in the integration list.

Features:

  • Compression of CSS, HTML, SVG, JavaScript, and image files in the Astro outDir folder.
  • Support for compressing image files types such as avci, avcs, avif, avifs, gif, heic, heics, heif, heifs, jfif, jif, jpeg, jpg, apng, png, raw, tiff, and webp via sharp.
  • Support for SVG compression via svgo.
  • Customization options to override default compression options from configurations of csso, html-minifier-terser, sharp, svgo, terser, and more.
  • Ability to add multiple paths for compression by specifying an array of paths.
  • Input-Output mapping to provide a map of paths for different input and output directories.
  • File filtering options to exclude specific files from compression.
  • Logging control to set the logging level and enable/disable debug messages.

Installation:

There are two ways to add AstroCompress to your project.

Option 1: Using astro add command

  1. Run the following command from your project directory:

    • Using NPM: npm install astrocompress
    • Using Yarn: yarn add astrocompress
    • Using PNPM: pnpm add astrocompress
  2. Follow the prompts to install the necessary dependencies and update your astro.config.* file to apply the integration.

Option 2: Manual installation

  1. Install the AstroCompress integration by running npm install astrocompress or yarn add astrocompress or pnpm add astrocompress.

  2. In your astro.config.* file, apply the integration using the integrations property:

    import {astrocompress} from 'astrocompress';
    
    export default {
      // ...
      integrations: [astrocompress()],
      // ...
    };
    

Summary:

AstroCompress is a powerful integration for Astro projects that brings compression utilities to optimize CSS, HTML, JavaScript, images, and SVG files. It provides various customization options, support for multiple paths and file filtering, as well as logging control. By using AstroCompress wisely, you can significantly improve the performance and loading speed of your Astro project.