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.
Installation
Section titled “Installation”In your Astro project, run npm install @picperf/astro
.
This component supports images located in both your public
and src
directories.
Images in public
Directory
Section titled “Images in public Directory”For images living in your public
directory, import the component and use like any other <img>
element.
---import PicPerfImage from "@picperf/astro";---
<PicPerfImage src="/assets/my-image.png" alt="my image" loading="lazy" class="w-full"/>
Images in src
Directory
Section titled “Images in src Directory”For images processed by Astro on build, import them at the top of your page, and pass via the same src
property:
---import PicPerfImage from "@picperf/astro";import srcImg from "./img.png";---
<PicPerfImage src={srcImg} alt="my image" loading="lazy" class="w-full"/>
Resulting Output
Section titled “Resulting Output”In 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.