## Gumlet Image Integration for Astro.js Easily optimize and deliver images in your Astro app using Gumlet’s CDN and JS SDK. This guide explains setup, usage, and advanced options in a reusable component format. *** ### Installation & Setup 1. **Create a Gumlet Astro Component** Create `src/components/GumletImage.astro`: ```javascript --- // GumletImage.astro const { src, alt = "", style = "", ...rest } = Astro.props; --- {alt}

``` 2. **Load Gumlet JS and Configure in Global Layout** Add to your main layout (e.g., `src/layouts/BaseLayout.astro`): ```html ``` > **Replace** `"example.com"` and `"mysubdomain.gumlet.io"` with your actual domain and Gumlet subdomain. *** ### Usage Import and use the Gumlet image component in your Astro pages: ```javascript --- import GumletImage from '../components/GumletImage.astro'; --- ``` * Use `data-src` instead of `src` for automatic Gumlet processing. * Works with lazy loading and responsive images. *** ### Image Transformations Pass additional Gumlet parameters inside `src` URL: ```javascript ``` See [Gumlet API Docs](https://docs.gumlet.com/docs/image-transform-apis) for available options. *** ### Advanced * Use any HTML `img` attribute as a prop. * SSR support: Output is standard HTML `` tags. * For Astro static builds, images remain optimized via Gumlet CDN. *** ### Example ```javascript ``` *** ### Troubleshooting * Double-check your Gumlet source/domain config. * Always use `data-src` (not `src`). * Gumlet JS must load before images are rendered.