Astro ImageTools is a collection of tools for optimizing images, background images, and generating responsive images for the Astro JS framework.
Below is a short list of features that Astro ImageTools offers. For more information, please see component-specific or API-specific documentation.
- ✅ Regular Image Optimization (
<img>and<picture>) - ✅ Background Image Optimization
- ✅ Responsive Images
- ✅ Simple and intuitive Art Direction API
- ✅ Lazy Loading
- ✅ Programmatic APIs
- ✅ Asynchronous Decoding
- ✅ Unique Breakpoints Calculation
- ✅ Preloading for urgent images
- ✅ SVG Tracing and Posterization
- ✅ 100% Scoped CSS
- ✅ Four kind of Layouts:
constrained,fixed,fullWidth&fill - ✅ Three kind of Placeholder Images:
blurred,dominantColor&tracedSVG - ✅ Long list of supported Image Formats
- ✅ Long List of supported Configuration Options
- ✅ Supports Remote Images and Data URIs too
- ✅ Support for
sharpless Environments - ✅ Both Memory-based and FS-based Caching for better Performance
- ✅ Respects to Semantics of HTML as much as possible
To get started with Astro ImageTools, first check out the Installation documentation for instructions on how to install the astro-imagetools package.
If you are looking for the available components and APIs, please check out the Components and APIs documentation.
If you want to view live examples of the components, APIs, layouts, and placeholder images, check out the Astro ImageTools Demo website.
If you want to report any issues or have found a missing feature, please report it on GitHub!
Good luck out there, Astronaut. 🧑🚀