Integrating 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

In your Astro project, run npm install @picperf/astro.

Usage

This component supports images located in both your public and src directories.

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

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

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, reformatted, and cached version to visitors.