はじめに

astro-dist-compressは、ビルド出力(dist/)に対して画像の圧縮・フォーマット変換を行うAstroインテグレーションです。astro-compressと異なり、ディレクトリや画像の状態(フォーマット・透過有無・サイズ)ごとの変換ルールをTypeScriptで直接定義でき、フォールバック画像の生成とHTMLの書き換えまで自動で行えます。

インストール

npm

npm install astro-dist-compress

pnpm

pnpm add astro-dist-compress

yarn

yarn add astro-dist-compress

インテグレーションを追加

// astro.config.ts
import { defineConfig } from "astro/config";
import distCompress from "astro-dist-compress";

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

これだけで、以下のデフォルトルールが適用されます。

• 透過ありPNG → WebP
• 透過なしPNG → AVIF
• JPEG → AVIF
• 上記すべてにWebPフォールバックを自動生成(すでにWebPを出力するルールには追加しません)
• ビルド後のHTML内で、変換対象を参照する<img>を<picture>に自動書き換え
• 元ファイルはデフォルトで保持

ビルド時のみ動作する設計

このインテグレーションはastro:build:doneフックを使っており、これはAstroがastro build実行時にのみ呼び出すフックです(astro devでは呼ばれません)。開発/ビルドを切り分ける分岐コードを書く必要は一切なく、astro devを実行してもこの処理経路自体に触れません。

astro build

[astro-dist-compress] compressing 12/14 image(s)...
[astro-dist-compress] done: 4.8 MB -> 1.6 MB (-66.7%)
[astro-dist-compress] rewrote 9 <img> tag(s) into <picture> across 5 html file(s).

次に読むページ

• ルール: ディレクトリ・画像状態ごとの設定 — 独自の変換ルールを書く
• フォールバック画像 — フォールバック自動生成の仕組み
• HTML書き換え — <picture>書き換え後の出力例
• オプションリファレンス — 全設定項目