Astro Image Processor

English | 日本語

Astro integration for image optimization and art direction for static builds.

Currently under early development. It will be developed internally for a while.

All specifications are subject to change without notice, including those involving breaking changes.

Overview

• Outputs <img> and <picture> elements as foreground or background
• Sets background-image for container elements using image-set()
• Supports static builds only
  • SSR is not supported and there are no plans to support it
• Depends on sharp
  • Accepts a sharp instance directly as a property to process images
• Focuses on accelerating processing and reducing duplication
• Includes an independent persistent cache
• Links: GitHub / npm / Documentation

Documentation

Detailed information can be found in the official documentation.

• List of features and specifications: Introduction
• Sample Output
• Quick start guide: Getting Started

Considerations for Production Use

For production use, it is strongly recommended to fix the versions of this integration and sharp.

If these implementations change, the hashes used for image identification may also change. If the hashes change, all caches will need to be rebuilt, and the content of the HTML will be affected as well.

Contributing

If you are using GitHub Copilot to generate suggested code, you must set the Suggestions matching public code option to Block. If you are using a similar service with a similar option, you must do the same.