コンテンツにスキップ
Astro Image Processor

Astro Image Processor

Astro Image Processorは画像の最適化とアートディレクションを行う静的ビルド専用のAstroインテグレーションです。

GitHub
npm

仕様・機能・特徴

  • 静的ビルド専用
  • ローカルファイル・リモートファイル・Data URLの読み込みに対応
    • リモートファイルは Cache-Control ないし Expires ヘッダーに従ってブラウザと同じ仕様でキャッシュされる
  • 一般的なユースケースをサポートする標準コンポーネントを同梱
    • <img> 要素を出力する <Image> コンポーネント
      • slotの有無により要素を単独で設置する前景モードとコンテナ要素に内包する背景モードを自動切替
      • srcset 属性によるアートディレクションに対応
    • <picture> 要素を出力する <Picture> コンポーネント
      • slotの有無により要素を単独で設置する前景モードとコンテナ要素に内包する背景モードを自動切替
      • <source> 要素を使用したフルスペックのアートディレクションに対応
      • ::after 擬似要素を使用したプレースホルダーアニメーションに対応
        • JavaScript無効化環境でもアニメーションを省略して正常に表示される
    • コンテナ要素に background-image を設定する <Background> コンポーネント
      • image-set() を利用したアートディレクションに対応（ <Picture> コンポーネントとほぼ同等）
  • 標準コンポーネントはAstro固有のものを含むほぼ全てのプロパティを生成する要素に継承する
    • スタイルのスコープに使用される data-astro-cid-[hash] 属性ないし .astro-[hash] クラスの継承に対応
  • 特殊なユースケースにはAPIを利用したカスタムコンポーネントで対応可能
  • 画像の編集にはsharpを使用
    • sharpインスタンスを直接使用するため、sharpの機能を全て使用できる
    • 例えば1枚の高解像度画像から異なる画角の画像を切り出す、といった処理が可能
  • 独立したキャッシュシステムを搭載
    • 開発サーバーと静的ビルドでキャッシュを共用する
    • キャッシュ削除ポリシーとして「有効期限」と「直近n回のビルドで使用されたかどうか」を使用可能（単独またはAND条件）
    • キャッシュをCDN等に同期してそのまま公開ファイルとして使用する設定も可能
    • キャッシュのメタデータを格納するデータベースは変更可能（参照: Data Adapter）
  • 既定の設定では画像は /dist/_astro/[hash].[ext] に出力される
  • ファイル・文字列のハッシュ生成に使用するハッシュアルゴリズムは変更可能（参照: Hasher）
  • 最新のHTML Living Standardに準拠したHTMLを出力
    • <style> 要素と <link> 要素は <head> 要素内に出力される
  • TypeScriptフレンドリー
  • Bun対応

プロダクション利用における留意事項

プロダクション用途では本インテグレーションとsharpのバージョンを固定することを強く推奨する。

これらの実装が変更された場合、画像の識別に使用されているハッシュが変更される可能性があり、ハッシュが変更されると全てのキャッシュのリビルドが必要になる。またHTMLの内容も変更される。