How it Works

Build Cycle Limitation

Note that, because this plugin runs after the build completes, you will not be able to import the generated images into your components or perform any further operations with them in the same build cycle.

This is relevant if you want to output images to src/ and import them in pages to take advantage of Astro’s image optimization.

You can, however, use them in the next build, provided they are not overwritten. If you do this, make sure to account for the images not existing the first time you perform a build (i.e. use a placeholder image or catch errors from import statements).

Here’s a high-level overview of how the integration works:

1. After the Astro configuration has resolved (astro:config:done), we validate the integration config and store it for later use
2. Then, once the Astro build completes (astro:build:done), we consume the resolved config and:
   1. launch a local static file server (sirv) to serve the build output (if required)
   2. use Puppeteer to:
      1. launch a headless browser
      2. navigate to the pages you configured
      3. take screenshots of each one and save them to the filesystem as images