Intregrating with Astro
The Astro web framework is known for producing high-performance websites and applications out-of-the-box, and it comes with a native image component that optimizes your images on build.
If you’d like to remove image processing from your build process altogether, as well as take advantage of aggressive caching and other optimizations offered by PicPerf, this integration is available.
In your Astro project, run
npm install @picperf/astro.
This component supports images located in both your
For images living in your
public directory, import the component and use like any other
For images processed by Astro on build, import them at the top of your page, and pass via the same
development mode, no transformation will occur. However, when the site is built for
production, the resulting HTML will route the images through PicPerf.io, serving an optimized, reformated, and cached version to visitors.