diff --git a/.github/workflows/nodejs.yml b/.github/workflows/ci.yml
similarity index 94%
rename from .github/workflows/nodejs.yml
rename to .github/workflows/ci.yml
index 17fe8be..bab007b 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/ci.yml
@@ -1,7 +1,10 @@
-name: Node CI
+name: CI
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -33,7 +36,7 @@ jobs:
         cache: 'pnpm'
 
     - name: Install dependencies
-      run: pnpm install
+      run: pnpm install --frozen-lockfile
 
     - name: Build
       run: pnpm build
diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml
deleted file mode 100644
index f6ec097..0000000
--- a/.github/workflows/npmpublish.yml
+++ /dev/null
@@ -1,94 +0,0 @@
-name: Publish
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Pack the package
-        run: |
-          cd imagekit-astro
-          pnpm pack
-
-      - name: Setup test-app with packed package
-        run: |
-          cd test-app
-          pnpm remove @imagekit/astro || true
-          pnpm add ../imagekit-astro/imagekit-astro-*.tgz
-
-      - name: Install Playwright
-        run: |
-          cd test-app
-          npx playwright install --with-deps
-
-      - name: Run E2E tests
-        run: |
-          cd test-app
-          pnpm test:e2e
-        env:
-          CI: true
-
-  publish:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-          cache: 'pnpm'
-
-      - name: Install and Build
-        run: |
-          pnpm install
-          pnpm build
-
-      - name: NPM Publish
-        run: |
-          cd imagekit-astro
-          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-          # print the NPM user name for validation
-          npm whoami
-          VERSION=$(node -p "require('./package.json').version")
-          # Only publish stable versions to the latest tag
-          if [[ "$VERSION" =~ ^[^-]+$ ]]; then
-            NPM_TAG="latest"
-          else
-            NPM_TAG="beta"
-          fi
-          echo "Publishing $VERSION with $NPM_TAG tag."
-          npm publish --tag $NPM_TAG --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-          CI: true
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..7314db0
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,52 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+          cache: 'pnpm'
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Build SDK
+        run: pnpm --filter @imagekit/astro build
+
+      - name: Stage README and LICENSE into package
+        run: |
+          cp README.md imagekit-astro/README.md
+          cp LICENSE imagekit-astro/LICENSE
+
+      - name: NPM Publish
+        working-directory: imagekit-astro
+        run: |
+          npm whoami
+          VERSION=$(node -p "require('./package.json').version")
+          # Stable versions go to "latest", pre-release versions go to "beta"
+          if [[ "$VERSION" =~ ^[^-]+$ ]]; then
+            NPM_TAG="latest"
+          else
+            NPM_TAG="beta"
+          fi
+          echo "Publishing $VERSION with $NPM_TAG tag."
+          npm publish --tag $NPM_TAG --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
+          CI: true
diff --git a/README.md b/README.md
index 1975bfa..8c08b2f 100644
--- a/README.md
+++ b/README.md
@@ -1,499 +1,123 @@
-# @imagekit/astro
+[<img width="250" alt="ImageKit.io" src="https://raw.githubusercontent.com/imagekit-developer/imagekit-javascript/master/assets/imagekit-light-logo.svg"/>](https://imagekit.io)
 
-Astro SDK for [ImageKit.io](https://imagekit.io) — optimized image & video delivery with real-time transformations, responsive images, and automatic format optimization.
+# ImageKit.io Astro SDK
 
 [![npm version](https://img.shields.io/npm/v/@imagekit/astro)](https://www.npmjs.com/package/@imagekit/astro)
-[![license](https://img.shields.io/npm/l/@imagekit/astro)](./LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow&style=social)](https://twitter.com/ImagekitIo)
 
-## Quick Start
+## Introduction
 
-### 1. Install
+ImageKit Astro SDK plugs ImageKit.io into Astro's built-in image pipeline. It allows you to:
 
-```bash
-npm install @imagekit/astro
-# or
-pnpm add @imagekit/astro
-# or
-yarn add @imagekit/astro
-```
-
-### 2. Configure
-
-Add your ImageKit URL endpoint to your `.env` file:
-
-```env
-# Preferred when endpoint may be used in client-side code
-PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id
-
-# Server-only fallback
-IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id
-```
+- Render images with Astro's `<Image />` and `<Picture />` components, served from ImageKit with automatic optimization, responsive `srcset`, and lazy loading.
+- Apply real-time transformations (resize, crop, focus, quality, format) using URL parameters.
+- Apply AI-powered transformations such as background removal, generative fill, and smart cropping via the `transformation` prop.
+- Render optimized `<Video />` tags backed by ImageKit.
+- Generate OpenGraph / Twitter Card meta tags pointing to ImageKit URLs with the `<OgImage>` component (or the `getOgImageUrl()` helper for custom layouts).
+- Generate server-side upload authentication parameters with `getUploadAuthParams()`.
 
-> Get your URL endpoint from the [ImageKit dashboard](https://imagekit.io/dashboard/url-endpoints).
+## How it works
 
-Add the ImageKit integration to your Astro config:
+The SDK ships as an Astro **integration** that registers a custom **image service**. Once added to `astro.config.mjs`, it takes over Astro's image pipeline for the whole site — `<Image />`, `<Picture />`, `getImage()`, and even markdown `![]()` images all flow through it.
 
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import imagekit from '@imagekit/astro/integration';
+The service is **host-aware**. For each image, it inspects the `src` and routes the request to one of two backends:
 
-export default defineConfig({
-  integrations: [imagekit()],
-});
-```
+1. **ImageKit fast-path** — when `src` is an ImageKit URL (your `urlEndpoint` host, any `additionalEndpoints` host, or a bare path like `"folder/photo.jpg"`), the service builds an ImageKit URL with the requested transformations and points the browser at `https://ik.imagekit.io/...` directly. No server processing, no `/_image` round-trip — just a CDN-cached URL with `?tr=...` parameters.
 
-By default, the integration automatically configures:
+2. **Sharp fallback** — when `src` is a local Astro asset (`import` of an image, or markdown `![](../foo.jpg)`) or an absolute URL on a non-ImageKit host (e.g. an allow-listed third-party domain), the service delegates to Astro's bundled sharp service. The image is processed at build time (or on-demand by Astro's `/_image` endpoint in SSR) exactly as if you had no integration installed.
 
-- `image.service` with `@imagekit/astro/image-service`
-- `image.domains` allowlisting for ImageKit hosts
-- `image.remotePatterns` with secure (`https`) ImageKit patterns
+This means you can drop the integration into an existing Astro project without breaking any of its existing local-asset usage. Local assets keep working via sharp; ImageKit URLs get the full ImageKit treatment.
 
-You can also pass options when needed:
-
-```js
-export default defineConfig({
-  integrations: [
-    imagekit({
-      urlEndpoint: import.meta.env.PUBLIC_IMAGEKIT_URL_ENDPOINT,
-      transformationPosition: 'query',
-      domains: ['assets.example.com'],
-      remotePatterns: [{ protocol: 'https', hostname: 'assets.example.com', pathname: '/**' }],
-    }),
-  ],
-});
-```
+## Installation
 
-### Standalone image service
-
-If you want to control Astro's image config yourself, you can use the ImageKit image service directly. This is useful when you already manage `image.domains`, `image.remotePatterns`, or have a custom setup.
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
-  image: {
-    service: {
-      entrypoint: '@imagekit/astro/image-service',
-      config: {
-        urlEndpoint: import.meta.env.PUBLIC_IMAGEKIT_URL_ENDPOINT,
-        transformationPosition: 'query',
-      },
-    },
-    domains: ['ik.imagekit.io'],
-    remotePatterns: [{ protocol: 'https', hostname: 'ik.imagekit.io', pathname: '/**' }],
-  },
-});
+```bash
+npm install @imagekit/astro
 ```
 
-Notes:
-
-- If you omit `urlEndpoint`, the service falls back to `PUBLIC_IMAGEKIT_URL_ENDPOINT` or `IMAGEKIT_URL_ENDPOINT`.
-- You are responsible for keeping `domains` and `remotePatterns` in sync with your ImageKit URL endpoint.
-
-### 3. Use
-
-```astro
----
-import { Image } from '@imagekit/astro';
----
+If you call `upload()` (or other helpers) from `@imagekit/javascript` directly in your code, also add it to your project so strict package managers (e.g. pnpm) can resolve it:
 
-<Image
-  src="/default-image.jpg"
-  alt="A beautiful image"
-  width={800}
-  height={600}
-  transformation={[{ quality: 80 }]}
-/>
+```bash
+npm install @imagekit/javascript
 ```
 
----
-
-## Components
+## TypeScript support
 
-### `<Image />`
-Uses Astro's built-in `<Image />` component with ImageKit transformations. This provides Astro's native image optimization features while leveraging ImageKit's URL-based transformations.
-
-```astro
----
-import { Image } from '@imagekit/astro';
----
+The SDK is written in TypeScript and ships with full type definitions. The integration uses Astro's [`injectTypes()`](https://docs.astro.build/en/reference/integrations-reference/#injecttypes-option) helper to register ImageKit-specific props (`urlEndpoint`, `transformation`, `queryParameters`, `transformationPosition`) on the `Astro.CustomImageProps` namespace, so `<Image />`, `<Picture />`, and `getImage()` get full autocomplete and type-checking for these props.
 
-<!-- Basic usage -->
-<Image
-  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
-  src="/hero.jpg"
-  alt="Hero image"
-  width={1200}
-  height={630}
-/>
-
-<!-- With transformations -->
-<Image
-  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
-  src="/hero.jpg"
-  alt="Cropped hero"
-  transformation={[{ width: 600, height: 400, focus: "auto" }]}
-  width={600}
-  height={400}
-/>
-
-<!-- With Astro-specific props -->
-<Image
-  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
-  src="/hero.jpg"
-  alt="Optimized hero"
-  width={800}
-  height={600}
-  format="webp"
-  quality={80}
-  loading="eager"
-/>
-```
+Run `astro sync` (or start the dev server) once after installing so Astro picks up the injected types. For editor support in `.astro` files, install the [Astro VS Code extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode); for type-checking from the CLI, use [`@astrojs/check`](https://www.npmjs.com/package/@astrojs/check).
 
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | *required* | Relative path or absolute ImageKit URL |
-| `alt` | `string` | *required* | Alt text for accessibility |
-| `urlEndpoint` | `string` | env var | Overrides `PUBLIC_IMAGEKIT_URL_ENDPOINT` / `IMAGEKIT_URL_ENDPOINT` |
-| `transformation` | `Transformation[]` | `[]` | Array of ImageKit transformations |
-| `queryParameters` | `Record<string, string \| number>` | — | Additional URL query parameters |
-| `transformationPosition` | `'path' \| 'query'` | `'query'` | Where to place transformations in the URL |
-| `responsive` | `boolean` | `true` | Generate responsive `srcSet` and `sizes` |
-| `sizes` | `string` | — | HTML `sizes` attribute for responsive images |
-| `deviceBreakpoints` | `number[]` | `[640,750,828,1080,1200,1920,2048,3840]` | Custom device-width breakpoints |
-| `imageBreakpoints` | `number[]` | `[16,32,48,64,96,128,256,384]` | Custom image-specific breakpoints |
-| `width` | `number \| string` | — | Image width |
-| `height` | `number \| string` | — | Image height |
-| `format` | `string` | — | Image format (webp, avif, jpg, png, etc.) |
-| `quality` | `number` | — | Image quality (1-100) |
-| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy |
-| `class` | `string` | — | CSS class(es) to add |
-
-All standard Astro `<Image />` props are also supported.
+## Loading images from your ImageKit Media Library
 
----
+You can use [Astro Content Collections](https://docs.astro.build/en/guides/content-collections/) together with the [`@imagekit/nodejs`](https://www.npmjs.com/package/@imagekit/nodejs) SDK to power gallery/listing pages directly from your ImageKit Media Library, without hand-maintaining a list of URLs.
 
-### `<Video />`
+Install the Node SDK as a dev dependency (it's only used at build time):
 
-Renders a `<video>` element with an ImageKit-optimized source URL.
-
-```astro
----
-import { Video } from '@imagekit/astro';
----
-
-<Video
-  src="/sample-video.mp4"
-  width={640}
-  height={360}
-  controls
-  transformation={[{ width: 640, height: 360 }]}
-/>
+```bash
+npm install -D @imagekit/nodejs
 ```
 
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | *required* | Relative path or absolute ImageKit URL |
-| `urlEndpoint` | `string` | env var | Overrides `PUBLIC_IMAGEKIT_URL_ENDPOINT` / `IMAGEKIT_URL_ENDPOINT` |
-| `transformation` | `Transformation[]` | `[]` | Array of ImageKit transformations |
-| `queryParameters` | `Record<string, string | number>` | — | Additional URL query parameters |
-| `transformationPosition` | `'path' | 'query'` | `'query'` | Where to place transformations in the URL |
-| `class` | `string` | — | CSS class(es) to add |
-
-All standard HTML `<video>` attributes (`controls`, `autoplay`, `loop`, `muted`, `poster`, etc.) are supported.
+Define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects directly, so pass `type: 'file'` to exclude folders and `fileType: 'image'` to limit results to images. Shape each entry as `{ id, ...data }` — Astro's content layer treats the top-level `id` as the entry key and validates everything else against your `schema`:
 
----
-
-### `getOgImageTags()`
-
-Builds OpenGraph and Twitter Card meta-tag data with ImageKit-optimized URLs.
-
-Use this helper in frontmatter, then render the returned tags inside your `<head>`.
-
-#### How To Use
-
-1. Import the helper from `@imagekit/astro/helpers`.
-2. Call it in frontmatter with your OG/Twitter options.
-3. Map over the returned tags inside `<head>`.
+```ts
+// src/content.config.ts
+import { defineCollection, z } from 'astro:content';
+import ImageKit from '@imagekit/nodejs';
 
-```astro
----
-import { getOgImageTags } from '@imagekit/astro/helpers';
-
-const ogTags = getOgImageTags({
-  src: '/og-banner.jpg',
-  title: 'Check out this page!',
-  description: 'Preview description for social cards',
-  alt: 'My page description',
-  twitterCard: 'summary_large_image',
-  transformation: [{ width: 1200, height: 630 }],
+const client = new ImageKit({
+  privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
 });
----
-
-<head>
-  {ogTags.map((tag) => <meta {...tag} />)}
-</head>
-```
-
-#### Helper Options
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | *required* | Relative path or absolute ImageKit URL |
-| `title` | `string` | — | Shared title used by both OG and Twitter |
-| `ogTitle` | `string` | — | OpenGraph-only title override |
-| `twitterTitle` | `string` | — | Twitter-only title override (legacy-compatible) |
-| `description` | `string` | — | Shared description used by both OG and Twitter |
-| `ogDescription` | `string` | — | OpenGraph-only description override |
-| `twitterDescription` | `string` | — | Twitter-only description override |
-| `twitterCard` | `string` | `summary_large_image` | Twitter card type (`summary`, `summary_large_image`, `app`, `player`) |
-| `alt` | `string` | — | Alt text for `og:image:alt` |
-| `urlEndpoint` | `string` | env var | Overrides `PUBLIC_IMAGEKIT_URL_ENDPOINT` / `IMAGEKIT_URL_ENDPOINT` |
-| `transformation` | `Transformation[]` | `[]` | Array of ImageKit transformations |
-| `width` | `number | string` | `1200` | OG image width |
-| `height` | `number | string` | `630` | OG image height |
-| `format` | `string` | — | Image format override for Twitter image (default: `webp`) |
-
-#### Generated Meta Tags
-
-```html
-<meta property="og:title" content="..." />
-<meta property="og:description" content="..." />
-<meta property="og:image" content="..." />
-<meta property="og:image:secure_url" content="..." />
-<meta property="og:image:width" content="1200" />
-<meta property="og:image:height" content="630" />
-<meta property="og:image:alt" content="..." />
-<meta property="twitter:title" content="..." />
-<meta property="twitter:description" content="..." />
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:image" content="..." />
-```
-
----
-
-
-## Transformations
-
-This SDK supports all [ImageKit transformations](https://imagekit.io/docs/transformations). Transformations are passed as an array of objects:
-
-```typescript
-transformation={[
-  { width: 400, height: 300 },           // Resize
-  { quality: 80 },                       // Compression
-  { format: 'webp' },                    // Format conversion
-  { focus: 'auto' },                     // Smart crop
-  { blur: 10 },                          // Blur effect
-  { grayscale: true },                   // Grayscale
-  { rotation: 90 },                      // Rotation
-  { radius: 'max' },                     // Rounded corners
-  { overlay: { type: 'text', text: 'Hello', transformation: [{ fontSize: 50 }] } },  // Text overlay
-]}
-```
-
-### Chained Transformations
-
-Multiple objects in the array create [chained transformations](https://imagekit.io/docs/transformations#chained-transformations):
 
-```astro
-<Image
-  src="/photo.jpg"
-  alt="Chained transformations"
-  transformation={[
-    { width: 400, height: 300 },  // First: resize
-    { rotation: 45 },             // Then: rotate
-  ]}
-  width={400}
-  height={300}
-/>
-```
-
-### Transformation Position
-
-By default, transformations are added as query parameters (`?tr=w-400,h-300`). Set `transformationPosition="path"` to use path-based transformations (`/tr:w-400,h-300/`):
-
-```astro
-<Image
-  src="/photo.jpg"
-  alt="Path-based transforms"
-  transformationPosition="path"
-  transformation={[{ width: 400 }]}
-  width={400}
-  height={300}
-/>
-```
-
----
-
-## Configuration
-
-### Environment Variable
-
-Set one of these in `.env` (or `.env.local`) to provide a default `urlEndpoint` for all components and helpers:
-
-```env
-# Checked first (required only when endpoint is needed client-side)
-PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id
-
-# Server-only fallback
-IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id
-```
-
-### Per-Component Override
-
-Pass `urlEndpoint` directly to any component to override the environment variable:
-
-```astro
-<Image
-  urlEndpoint="https://ik.imagekit.io/your_imagekit_id_2"
-  src="/image.jpg"
-  alt="Different account"
-  width={400}
-  height={300}
-/>
-```
-
----
-
-## Uploading Files
-
-The SDK provides a `getUploadAuthParams` server-side helper that generates the authentication parameters (signature, token, expire) needed for client-side file uploads to ImageKit.
-
-> **Important:** `getUploadAuthParams` must only be called on the server. Never expose your **private key** to the client.
-
-### Setup
-
-Add your ImageKit keys to `.env`:
-
-```env
-IMAGEKIT_PRIVATE_KEY=your_private_key
-IMAGEKIT_PUBLIC_KEY=your_public_key
-```
-
-### Step 1: Create an Astro API Endpoint
+const gallery = defineCollection({
+  loader: async () => {
+    const assets = await client.assets.list({
+      type: 'file',       // exclude folders
+      fileType: 'image',  // only image files
+      skip: 0,
+      limit: 50,
+    });
 
-Create a server-side endpoint that returns auth parameters. Astro API endpoints must export named HTTP method handlers. Make sure to add an adapter to your astro project and render the upload endpoint on demand. Refer astro docs for [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) for more details.
+    return assets
+      .filter((asset) => asset.fileId && asset.url)
+      .map((asset) => ({
+        id: asset.fileId!,
+        url: asset.url!,
+        width: asset.width ?? 0,
+        height: asset.height ?? 0,
+        name: asset.name ?? '',
+        tags: asset.tags ?? [],
+      }));
+  },
+  schema: z.object({
+    url: z.string().url(),
+    width: z.number(),
+    height: z.number(),
+    name: z.string(),
+    tags: z.array(z.string()),
+  }),
+});
 
-```ts
-// src/pages/api/upload-auth.ts
-import type { APIRoute } from 'astro';
-import { getUploadAuthParams } from '@imagekit/astro/server';
-
-export const prerender = false;
-
-export const GET: APIRoute = async () => {
-  const authParams = getUploadAuthParams({
-    privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
-    publicKey: import.meta.env.IMAGEKIT_PUBLIC_KEY,
-  });
-
-  return new Response(JSON.stringify(authParams), {
-    status: 200,
-    headers: { 'Content-Type': 'application/json' },
-  });
-};
+export const collections = { gallery };
 ```
 
-### Step 2: Upload from the Client
+After adding the collection, run `astro sync` (or start the dev server) so Astro generates the collection types used by `getCollection()`.
 
-Use the `upload` function (re-exported from `@imagekit/javascript`) to upload files. Fetch auth parameters from your endpoint before each upload.
+Render with `<Image>` from `astro:assets` — the integration's image service generates the IK CDN URL with the correct transformations:
 
 ```astro
 ---
-// src/pages/upload.astro
----
-
-<html>
-<body>
-  <input type="file" id="file-input" />
-  <button id="upload-btn">Upload</button>
-  <pre id="result"></pre>
-
-  <script>
-    import { upload } from '@imagekit/astro';
-
-    const fileInput = document.getElementById('file-input') as HTMLInputElement;
-    const uploadBtn = document.getElementById('upload-btn') as HTMLButtonElement;
-    const result = document.getElementById('result') as HTMLPreElement;
-
-    uploadBtn.addEventListener('click', async () => {
-      const file = fileInput.files?.[0];
-      if (!file) return;
-
-      // Fetch auth params from your server endpoint
-      const res = await fetch('/api/upload-auth');
-      const authParams = await res.json();
-
-      const response = await upload({
-        file,
-        fileName: file.name,
-        publicKey: import.meta.env.IMAGEKIT_PUBLIC_KEY,
-        ...authParams,
-      });
-
-      result.textContent = JSON.stringify(response, null, 2);
-    });
-  </script>
-</body>
-</html>
-```
-
-### `getUploadAuthParams` Parameters
-
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `privateKey` | `string` | Yes | Your ImageKit private key |
-| `publicKey` | `string` | Yes | Your ImageKit public key |
-| `token` | `string` | No | Custom token (auto-generated UUID if omitted) |
-| `expire` | `number` | No | Expiry timestamp in seconds (defaults to 30 min from now) |
-
-### `getUploadAuthParams` Response
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `token` | `string` | Unique upload token |
-| `signature` | `string` | HMAC-SHA1 signature for authentication |
-| `expire` | `number` | Expiry timestamp (seconds since epoch) |
-| `publicKey` | `string` | publicKey for passing in upload API request |
-
-For the full list of `upload()` parameters, see the [@imagekit/javascript documentation](https://imagekit.io/docs/integration/javascript).
-
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
 
+const photos = await getCollection('gallery');
 ---
-
-## Contributing
-
-### Setup
-
-```bash
-git clone https://github.com/imagekit-developer/imagekit-astro.git
-cd imagekit-astro
-pnpm install
+{photos.map(({ data }) => (
+  <Image src={data.url} width={data.width} height={data.height} alt={data.name} />
+))}
 ```
 
-### Development
-
-```bash
-cd test-app
-pnpm dev          # Watch mode for the package
-```
-
-### Testing
-
-```bash
-cd test-app
-pnpm test:e2e          # Run Playwright E2E tests
-pnpm test:e2e-update   # Update E2E snapshots
-```
-
----
+> Keep your `privateKey` in a server-only env var (e.g. `IMAGEKIT_PRIVATE_KEY` in `.env`, never prefixed with `PUBLIC_`). Collection loaders run at build time (or in SSR endpoints), never in the browser.
 
-## License
+## Documentation
 
-[MIT](./LICENSE)
+Refer to the ImageKit [official documentation](https://imagekit.io/docs/integration/astro) for setup instructions, configuration options, and the full API reference.
diff --git a/imagekit-astro/.gitignore b/imagekit-astro/.gitignore
new file mode 100644
index 0000000..951cc11
--- /dev/null
+++ b/imagekit-astro/.gitignore
@@ -0,0 +1,6 @@
+# Build output
+dist/
+
+# Staged at publish time from monorepo root
+README.md
+LICENSE
diff --git a/imagekit-astro/astro.d.ts b/imagekit-astro/astro.d.ts
index 1443133..c508840 100644
--- a/imagekit-astro/astro.d.ts
+++ b/imagekit-astro/astro.d.ts
@@ -4,3 +4,10 @@ declare module '*.astro' {
   const component: (props: any) => any;
   export default component;
 }
+
+declare module 'virtual:@imagekit/astro/config' {
+  export const urlEndpoint: string;
+  export const transformationPosition: 'path' | 'query';
+  const config: { urlEndpoint: string; transformationPosition: 'path' | 'query' };
+  export default config;
+}
diff --git a/imagekit-astro/helpers/package.json b/imagekit-astro/helpers/package.json
deleted file mode 100644
index ba383d2..0000000
--- a/imagekit-astro/helpers/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "type": "module",
-  "main": "../dist/helpers/index.js",
-  "types": "../dist/helpers/index.d.ts"
-}
diff --git a/imagekit-astro/index.ts b/imagekit-astro/index.ts
index fd6cab7..36e3c50 100644
--- a/imagekit-astro/index.ts
+++ b/imagekit-astro/index.ts
@@ -1,32 +1,9 @@
 // Components
-export { default as Image } from './src/components/Image.astro';
 export { default as Video } from './src/components/Video.astro';
+export { default as OgImage } from './src/components/OgImage.astro';
 
 // Helpers
-export { getOgImageTags } from './src/helpers';
-export type { OgMetaTag } from './src/helpers';
-
-// Re-export functions from @imagekit/javascript
-export {
-  buildSrc,
-  buildTransformationString,
-  getResponsiveImageAttributes,
-  ImageKitAbortError,
-  ImageKitInvalidRequestError,
-  ImageKitServerError,
-  ImageKitUploadNetworkError,
-  upload,
-} from '@imagekit/javascript';
+export { getOgImageUrl } from './src/helpers';
 
 // Types - Astro SDK types
-export type {ImageProps, OgImageTagOptions, VideoProps } from './src/types/index';
-
-// Types - Re-export from @imagekit/javascript
-export type {
-  GetImageAttributesOptions,
-  ResponsiveImageAttributes,
-  SrcOptions,
-  Transformation,
-  UploadOptions,
-  UploadResponse,
-} from '@imagekit/javascript';
+export type { OgImageProps, OgImageUrlOptions, VideoProps } from './src/types/index';
diff --git a/imagekit-astro/package.json b/imagekit-astro/package.json
index 2393937..633cdf8 100644
--- a/imagekit-astro/package.json
+++ b/imagekit-astro/package.json
@@ -45,9 +45,7 @@
   ],
   "scripts": {
     "dev": "tsup --watch",
-    "build": "tsup",
-    "prepublishOnly": "cp ../README.md . && cp ../LICENSE . && pnpm build",
-    "postpublish": "rm ./README.md && rm ./LICENSE"
+    "build": "tsup"
   },
   "dependencies": {
     "@imagekit/javascript": "^5.1.0"
@@ -56,6 +54,7 @@
     "astro": ">=3.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.19.39",
     "astro": "^5.11.0",
     "tsup": "^8.4.0"
   }
diff --git a/imagekit-astro/src/components/Image.astro b/imagekit-astro/src/components/Image.astro
deleted file mode 100644
index 94f1743..0000000
--- a/imagekit-astro/src/components/Image.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import { Image as AstroImage, type RemoteImageProps } from 'astro:assets';
-import type { ImageProps } from '../types';
-
-// Combine Astro's RemoteImageProps with ImageKit props
-type Props = RemoteImageProps & ImageProps;
-
-const {
-  class: className,
-  ...props
-}: Props = Astro.props;
-
-// Build the class name
-let imageClassName = 'astro-imagekit-image';
-if (className) {
-  imageClassName = `${imageClassName} ${className}`;
-}
----
-
-<AstroImage
-  class={imageClassName}
-  {...props}
-/>
diff --git a/imagekit-astro/src/components/OgImage.astro b/imagekit-astro/src/components/OgImage.astro
new file mode 100644
index 0000000..9159718
--- /dev/null
+++ b/imagekit-astro/src/components/OgImage.astro
@@ -0,0 +1,59 @@
+---
+import { getOgImageUrl } from '../helpers';
+import type { OgImageProps } from '../types/index';
+
+interface Props extends OgImageProps {}
+
+const {
+  src,
+  alt,
+  title,
+  ogTitle,
+  twitterTitle,
+  description,
+  ogDescription,
+  twitterDescription,
+  twitterCard = 'summary_large_image',
+  type = 'website',
+  width = 1200,
+  height = 630,
+  urlEndpoint,
+  transformation = [],
+  queryParameters,
+  transformationPosition,
+} = Astro.props;
+
+const resolvedOgTitle = ogTitle ?? title;
+const resolvedTwitterTitle = twitterTitle ?? title;
+const resolvedOgDescription = ogDescription ?? description;
+const resolvedTwitterDescription = twitterDescription ?? description;
+
+if (!resolvedOgTitle && !resolvedTwitterTitle) {
+  throw new Error(
+    '[<OgImage>] A title is required. Provide one of: title, ogTitle, or twitterTitle.',
+  );
+}
+
+const imageUrl = getOgImageUrl({
+  src,
+  urlEndpoint,
+  transformation,
+  queryParameters,
+  transformationPosition,
+  width,
+  height,
+});
+---
+{resolvedOgTitle && <meta property="og:title" content={resolvedOgTitle} />}
+{resolvedOgDescription && <meta property="og:description" content={resolvedOgDescription} />}
+<meta property="og:type" content={type} />
+<meta property="og:image" content={imageUrl} />
+<meta property="og:image:secure_url" content={imageUrl} />
+<meta property="og:image:width" content={String(width)} />
+<meta property="og:image:height" content={String(height)} />
+{alt && <meta property="og:image:alt" content={alt} />}
+{resolvedTwitterTitle && <meta name="twitter:title" content={resolvedTwitterTitle} />}
+{resolvedTwitterDescription && <meta name="twitter:description" content={resolvedTwitterDescription} />}
+<meta name="twitter:card" content={twitterCard} />
+<meta name="twitter:image" content={imageUrl} />
+{alt && <meta name="twitter:image:alt" content={alt} />}
diff --git a/imagekit-astro/src/components/Video.astro b/imagekit-astro/src/components/Video.astro
index cf6c5d2..9c03ab4 100644
--- a/imagekit-astro/src/components/Video.astro
+++ b/imagekit-astro/src/components/Video.astro
@@ -15,14 +15,17 @@ const {
   ...restProps
 }: Props = Astro.props;
 
-// Resolve ImageKit configuration
+// Resolve ImageKit configuration.
+// Priority: prop > integration config (astro.config.mjs) > env vars.
 const config = getImageKitConfig({ urlEndpoint, transformationPosition });
 
-// Build the video URL
+// Build the video URL.
+// Note: width/height props are HTML attributes only; they are NOT applied as
+// ImageKit transformations. To resize the video, pass them via `transformation`.
 const videoSrc = buildSrc({
   src,
   urlEndpoint: config.urlEndpoint,
-  transformation: [...transformation],
+  transformation,
   queryParameters,
   transformationPosition: config.transformationPosition,
 });
@@ -39,3 +42,4 @@ if (className) {
   class={videoClassName}
   {...restProps}
 />
+
diff --git a/imagekit-astro/src/components/index.ts b/imagekit-astro/src/components/index.ts
index be73094..4ed151b 100644
--- a/imagekit-astro/src/components/index.ts
+++ b/imagekit-astro/src/components/index.ts
@@ -1,2 +1,2 @@
 export { default as Video } from './Video.astro';
-export { default as Image } from './Image.astro';
+export { default as OgImage } from './OgImage.astro';
diff --git a/imagekit-astro/src/env.d.ts b/imagekit-astro/src/env.d.ts
deleted file mode 100644
index f964fe0..0000000
--- a/imagekit-astro/src/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="astro/client" />
diff --git a/imagekit-astro/src/helpers/index.ts b/imagekit-astro/src/helpers/index.ts
index 8639e50..46b01e0 100644
--- a/imagekit-astro/src/helpers/index.ts
+++ b/imagekit-astro/src/helpers/index.ts
@@ -1,89 +1,37 @@
 import { buildSrc } from '@imagekit/javascript';
 import { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from '../constants/sizes';
 import { getImageKitConfig } from '../lib/imagekit';
-import type { OgImageTagOptions } from '../types';
-
-export interface OgMetaTag {
-  property: string;
-  content: string;
-}
+import type { OgImageUrlOptions } from '../types';
 
 /**
- * Build OG/Twitter meta tags for a given image.
+ * Build the final ImageKit CDN URL for an Open Graph / social image.
  *
- * Render these tags inside your page's <head>.
+ * Returns just the URL string. Use this when you want to plug the URL into
+ * your own metadata system, or render `<meta>` tags by hand. For the
+ * common case, prefer the `<OgImage>` component, which renders the full
+ * set of OG/Twitter tags for you.
+ *
+ * ImageKit serves the optimal image format automatically based on the
+ * requesting client (no `format` option needed).
  */
-export function getOgImageTags(props: OgImageTagOptions): OgMetaTag[] {
+export function getOgImageUrl(props: OgImageUrlOptions): string {
   const {
     src,
-    alt,
-    title,
-    ogTitle,
-    twitterTitle,
-    description,
-    ogDescription,
-    twitterDescription,
-    twitterCard = 'summary_large_image',
     urlEndpoint,
     transformation = [],
     queryParameters,
     transformationPosition,
-    format,
     width = OG_IMAGE_WIDTH,
     height = OG_IMAGE_HEIGHT,
   } = props;
 
-  const resolvedOgTitle = ogTitle ?? title ?? twitterTitle;
-  const resolvedTwitterTitle = twitterTitle ?? title ?? ogTitle;
-
-  const resolvedOgDescription = ogDescription ?? description ?? twitterDescription;
-  const resolvedTwitterDescription = twitterDescription ?? description ?? ogDescription;
-
-  if (!resolvedOgTitle && !resolvedTwitterTitle) {
-    throw new Error(
-      '[getOgImageTags] A title is required. Provide one of: title, ogTitle, or twitterTitle.',
-    );
-  }
-
   const config = getImageKitConfig({ urlEndpoint, transformationPosition });
 
-  const ogImageUrl = buildSrc({
-    src,
-    urlEndpoint: config.urlEndpoint,
-    transformation: [
-      ...transformation,
-      { width, height },
-    ],
-    queryParameters,
-    transformationPosition: config.transformationPosition,
-  });
-
-  const twitterImageUrl = buildSrc({
+  return buildSrc({
     src,
     urlEndpoint: config.urlEndpoint,
-    transformation: [
-      ...transformation,
-      { width, height, format: format || 'webp' },
-    ],
+    transformation: [...transformation, { width, height }],
     queryParameters,
     transformationPosition: config.transformationPosition,
   });
-
-  const tags: Array<OgMetaTag | undefined> = [
-    resolvedOgTitle ? { property: 'og:title', content: resolvedOgTitle } : undefined,
-    resolvedOgDescription ? { property: 'og:description', content: resolvedOgDescription } : undefined,
-    { property: 'og:image', content: ogImageUrl },
-    { property: 'og:image:secure_url', content: ogImageUrl },
-    { property: 'og:image:width', content: String(width) },
-    { property: 'og:image:height', content: String(height) },
-    alt ? { property: 'og:image:alt', content: alt } : undefined,
-    resolvedTwitterTitle ? { property: 'twitter:title', content: resolvedTwitterTitle } : undefined,
-    resolvedTwitterDescription
-      ? { property: 'twitter:description', content: resolvedTwitterDescription }
-      : undefined,
-    { property: 'twitter:card', content: twitterCard },
-    { property: 'twitter:image', content: twitterImageUrl },
-  ];
-
-  return tags.filter((tag): tag is OgMetaTag => Boolean(tag));
 }
diff --git a/imagekit-astro/src/integration.ts b/imagekit-astro/src/integration.ts
index e284c07..8c9f80c 100644
--- a/imagekit-astro/src/integration.ts
+++ b/imagekit-astro/src/integration.ts
@@ -4,29 +4,61 @@ const IMAGEKIT_SERVICE_ENTRYPOINT = '@imagekit/astro/image-service';
 const ASTRO_DEFAULT_SERVICE_ENTRYPOINT = 'astro/assets/services/sharp';
 const DEFAULT_IMAGEKIT_HOSTNAME = 'ik.imagekit.io';
 const DEFAULT_PATHNAME = '/**';
+const VIRTUAL_CONFIG_ID = 'virtual:@imagekit/astro/config';
+const RESOLVED_VIRTUAL_CONFIG_ID = '\0' + VIRTUAL_CONFIG_ID;
 
-export interface ImageKitIntegrationOptions {
-  /**
-  * The ImageKit URL endpoint.
-  * If omitted, PUBLIC_IMAGEKIT_URL_ENDPOINT is checked first,
-  * then IMAGEKIT_URL_ENDPOINT.
-   */
+function imagekitConfigVitePlugin(resolved: {
   urlEndpoint?: string;
+  transformationPosition?: 'path' | 'query';
+}) {
+  return {
+    name: '@imagekit/astro:virtual-config',
+    resolveId(id: string) {
+      if (id === VIRTUAL_CONFIG_ID) {
+        return RESOLVED_VIRTUAL_CONFIG_ID;
+      }
+      return null;
+    },
+    load(id: string) {
+      if (id !== RESOLVED_VIRTUAL_CONFIG_ID) {
+        return null;
+      }
+      const urlEndpoint = JSON.stringify(resolved.urlEndpoint ?? '');
+      const transformationPosition = JSON.stringify(
+        resolved.transformationPosition ?? 'query',
+      );
+      return `export const urlEndpoint = ${urlEndpoint};
+export const transformationPosition = ${transformationPosition};
+export default { urlEndpoint, transformationPosition };
+`;
+    },
+  };
+}
 
+export interface ImageKitIntegrationOptions {
   /**
-   * Position of the transformation string in the URL.
+   * The ImageKit URL endpoint. Used as the default when an `<Image>` is given
+   * a relative `src` and as an IK-eligible host for absolute URLs.
+   * If omitted, `IMAGEKIT_URL_ENDPOINT` is used.
    */
-  transformationPosition?: 'path' | 'query';
+  urlEndpoint?: string;
 
   /**
-   * Additional remote hostnames to allow in Astro image config.
+   * Additional ImageKit URL endpoints (other accounts or custom domains).
+   * Their hosts are auto-added to `image.domains` and recognized as IK-eligible
+   * by the image service, so absolute URLs on those hosts get IK transformations
+   * applied (without being rewritten to the primary `urlEndpoint`).
+   *
+   * For non-ImageKit hosts you want Astro to optimize via the default sharp
+   * service, add them to `image.domains` / `image.remotePatterns` in your
+   * `astro.config.mjs` directly.
    */
-  domains?: string[];
+  additionalEndpoints?: string[];
 
   /**
-   * Additional Astro remote patterns to allow.
+   * Position of the transformation string in the URL.
    */
-  remotePatterns?: Partial<RemotePattern>[];
+  transformationPosition?: 'path' | 'query';
 }
 
 interface ParsedEndpoint {
@@ -167,7 +199,6 @@ export default function imagekit(
         const resolvedUrlEndpoint =
           options.urlEndpoint ??
           asString(existingServiceConfig.urlEndpoint) ??
-          import.meta.env?.PUBLIC_IMAGEKIT_URL_ENDPOINT ??
           import.meta.env?.IMAGEKIT_URL_ENDPOINT;
 
         const resolvedTransformationPosition =
@@ -181,22 +212,45 @@ export default function imagekit(
           ? parseEndpoint(resolvedUrlEndpoint)
           : undefined;
 
-        const mergedDomains = uniqStrings([
-          ...normalizeDomainList(imageConfigRecord.domains),
-          ...normalizeDomainList(options.domains),
+        if (resolvedUrlEndpoint && !endpoint) {
+          logger.warn(
+            `Could not parse urlEndpoint "${resolvedUrlEndpoint}" as a URL. Make sure it includes the protocol (e.g. "https://ik.imagekit.io/your_id"). The endpoint host will not be added to image.domains/remotePatterns.`,
+          );
+        }
+
+        const additionalEndpoints = (options.additionalEndpoints ?? [])
+          .map((url) => {
+            const parsed = parseEndpoint(url);
+            if (!parsed) {
+              logger.warn(
+                `Could not parse additionalEndpoints entry "${url}" as a URL. Skipping.`,
+              );
+            }
+            return parsed;
+          })
+          .filter((e): e is ParsedEndpoint => Boolean(e));
+
+        const ikHosts = uniqStrings([
           DEFAULT_IMAGEKIT_HOSTNAME,
           ...(endpoint?.hostname ? [endpoint.hostname] : []),
+          ...additionalEndpoints.map((e) => e.hostname),
+        ]);
+
+        const mergedDomains = uniqStrings([
+          ...normalizeDomainList(imageConfigRecord.domains),
+          ...ikHosts,
         ]);
 
         const mergedRemotePatterns = uniqPatterns([
           ...normalizePatternList(imageConfigRecord.remotePatterns),
-          ...normalizePatternList(options.remotePatterns),
           ...getDefaultRemotePatterns(endpoint),
+          ...additionalEndpoints.flatMap((e) => getDefaultRemotePatterns(e)),
         ]);
 
-        const nextServiceConfig: Record<string, unknown> = {
-          ...(typeof existingServiceConfig === 'object' ? existingServiceConfig : {}),
-        };
+        // Only carry forward keys we recognize. Any leftover keys from a
+        // previous image service config (e.g. sharp's `limitInputPixels`)
+        // would not make sense for this service.
+        const nextServiceConfig: Record<string, unknown> = {};
 
         if (resolvedUrlEndpoint) {
           nextServiceConfig.urlEndpoint = resolvedUrlEndpoint;
@@ -206,6 +260,8 @@ export default function imagekit(
           nextServiceConfig.transformationPosition = resolvedTransformationPosition;
         }
 
+        nextServiceConfig.imagekitHosts = ikHosts;
+
         if (
           existingEntrypoint &&
           existingEntrypoint !== IMAGEKIT_SERVICE_ENTRYPOINT &&
@@ -218,7 +274,7 @@ export default function imagekit(
 
         if (!resolvedUrlEndpoint) {
           logger.warn(
-            'No ImageKit urlEndpoint found. Set PUBLIC_IMAGEKIT_URL_ENDPOINT or IMAGEKIT_URL_ENDPOINT, or pass urlEndpoint to imagekit().',
+            'No ImageKit urlEndpoint found. Set IMAGEKIT_URL_ENDPOINT, or pass urlEndpoint to imagekit().',
           );
         }
 
@@ -231,6 +287,61 @@ export default function imagekit(
               config: nextServiceConfig,
             },
           },
+          vite: {
+            plugins: [
+              imagekitConfigVitePlugin({
+                urlEndpoint: resolvedUrlEndpoint,
+                transformationPosition: resolvedTransformationPosition,
+              }),
+            ],
+          },
+        });
+      },
+
+      // Augment Astro's <Image>/<Picture>/getImage() prop types with
+      // ImageKit-specific props so users get autocomplete and type safety.
+      // injectTypes() requires Astro >= 4.4; older versions skip this gracefully.
+      // https://docs.astro.build/en/reference/integrations-reference/#injecttypes-option
+      'astro:config:done': ({ injectTypes }) => {
+        if (typeof injectTypes !== 'function') {
+          return;
+        }
+        injectTypes({
+          filename: 'imagekit-image-props.d.ts',
+          content: `import type { Transformation } from '@imagekit/javascript';
+
+declare module 'virtual:@imagekit/astro/config' {
+  export const urlEndpoint: string;
+  export const transformationPosition: 'path' | 'query';
+  const config: { urlEndpoint: string; transformationPosition: 'path' | 'query' };
+  export default config;
+}
+
+declare global {
+  namespace Astro {
+    interface CustomImageProps {
+      /** Override the ImageKit URL endpoint for this image. */
+      urlEndpoint?: string;
+      /**
+       * Array of ImageKit transformations applied after Astro's built-in
+       * width/height/fit/position/quality mappings. Later items take precedence.
+       * @see https://imagekit.io/docs/image-transformation
+       */
+      transformation?: Transformation[];
+      /** Extra query parameters appended to the generated URL. */
+      queryParameters?: Record<string, string | number>;
+      /**
+       * Position of the transformation string in the URL.
+       * - \`'query'\` (default): appended as \`?tr=...\`
+       * - \`'path'\`: inserted in the URL path as \`tr:...\`
+       */
+      transformationPosition?: 'path' | 'query';
+    }
+  }
+}
+
+export {};
+`,
         });
       },
     },
diff --git a/imagekit-astro/src/lib/imagekit.ts b/imagekit-astro/src/lib/imagekit.ts
index 5cb6e4d..990ad12 100644
--- a/imagekit-astro/src/lib/imagekit.ts
+++ b/imagekit-astro/src/lib/imagekit.ts
@@ -1,16 +1,21 @@
 
+import {
+  urlEndpoint as integrationUrlEndpoint,
+  transformationPosition as integrationTransformationPosition,
+} from 'virtual:@imagekit/astro/config';
 
 /**
  * ImageKit configuration options.
- * Can be passed as props to override environment variable defaults.
+ * Can be passed as props to override values resolved from the integration
+ * config (`astro.config.mjs`) or environment variables.
  */
 export interface ImageKitConfig {
-  /** 
-   * The URL endpoint for your ImageKit account. 
+  /**
+   * The URL endpoint for your ImageKit account.
    * Get it from https://imagekit.io/dashboard/url-endpoints
    */
   urlEndpoint: string;
-  
+
   /**
    * Position of the transformation string in the URL.
    * - `'query'` (default): appended as `?tr=...`
@@ -20,26 +25,31 @@ export interface ImageKitConfig {
 }
 
 /**
- * Resolves ImageKit configuration from props and/or environment variables.
- * 
- * Priority: prop overrides > environment variables
- * 
- * @throws {Error} If no urlEndpoint is available from either source.
+ * Resolves ImageKit configuration.
+ *
+ * Priority:
+ *   1. Per-call overrides (props)
+ *   2. Integration config from `astro.config.mjs` (via virtual module)
+ *   3. `IMAGEKIT_URL_ENDPOINT` env var
+ *
+ * @throws {Error} If no urlEndpoint is available from any source.
  */
 export function getImageKitConfig(overrides?: Partial<ImageKitConfig>): ImageKitConfig {
   const urlEndpoint =
-    overrides?.urlEndpoint ??
-    import.meta.env.PUBLIC_IMAGEKIT_URL_ENDPOINT ??
+    overrides?.urlEndpoint ||
+    integrationUrlEndpoint ||
     import.meta.env.IMAGEKIT_URL_ENDPOINT;
 
   if (!urlEndpoint) {
     throw new Error(
-      'An ImageKit URL endpoint is required. Set PUBLIC_IMAGEKIT_URL_ENDPOINT or IMAGEKIT_URL_ENDPOINT in your environment, or pass urlEndpoint as a prop.'
+      'An ImageKit URL endpoint is required. Pass urlEndpoint to the imagekit() integration in astro.config.mjs, set IMAGEKIT_URL_ENDPOINT, or pass urlEndpoint as a prop.'
     );
   }
 
   return {
     urlEndpoint,
-    transformationPosition: overrides?.transformationPosition ?? 'query',
+    transformationPosition:
+      overrides?.transformationPosition ?? integrationTransformationPosition ?? 'query',
   };
 }
+
diff --git a/imagekit-astro/src/services/imagekit-service.ts b/imagekit-astro/src/services/imagekit-service.ts
index 1621d78..fb62a9f 100644
--- a/imagekit-astro/src/services/imagekit-service.ts
+++ b/imagekit-astro/src/services/imagekit-service.ts
@@ -1,21 +1,31 @@
-import type { ExternalImageService, ImageTransform, AstroConfig } from 'astro';
-import { buildSrc, getResponsiveImageAttributes } from '@imagekit/javascript';
+import type { LocalImageService, ImageTransform, AstroConfig } from 'astro';
+import { buildSrc } from '@imagekit/javascript';
 import type { Transformation } from '@imagekit/javascript';
+import sharpService from 'astro/assets/services/sharp';
+
 /**
- * Dynamically imports `inferRemoteSize` from `astro:assets`.
- * Available since Astro 4.12. Returns `undefined` on older versions.
+ * Mirrors Astro's internal `UnresolvedSrcSetValue` (not exported from the
+ * public `astro` entry). Astro's pipeline fills in `url` later by calling
+ * `getURL` on the returned `transform`.
  */
-async function tryInferRemoteSize(url: string): Promise<{ width: number; height: number } | undefined> {
-  try {
-    const mod = await import('astro:assets');
-    if (typeof mod.inferRemoteSize === 'function') {
-      return await mod.inferRemoteSize(url);
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-}
+type UnresolvedSrcSetValue = {
+  transform: ImageTransform;
+  descriptor?: string;
+  attributes?: Record<string, any>;
+};
+
+/**
+ * Astro `ImageTransform` augmented with the ImageKit-specific props
+ * declared on `Astro.CustomImageProps` via the integration's `injectTypes`.
+ */
+type IKImageTransform = ImageTransform & {
+  urlEndpoint?: string;
+  transformation?: Transformation[];
+  queryParameters?: Record<string, string | number>;
+  transformationPosition?: 'path' | 'query';
+  densities?: Array<number | `${number}x`>;
+  widths?: number[];
+};
 
 export interface ImageKitServiceConfig {
   /**
@@ -30,287 +40,288 @@ export interface ImageKitServiceConfig {
    * - `'path'`: inserted in the URL path as `tr:...`
    */
   transformationPosition?: 'path' | 'query';
+
+  /**
+   * Hostnames recognized as ImageKit endpoints. Absolute URLs whose host
+   * matches one of these are treated as IK URLs (transformations applied
+   * directly). All other srcs are delegated to Astro's default sharp service.
+   *
+   * Populated automatically by the integration from `urlEndpoint` and
+   * `additionalEndpoints`.
+   */
+  imagekitHosts?: string[];
 }
 
 /**
- * IK-specific prop names that flow through ImageTransform's index signature.
- * These must be stripped from HTML attributes.
+ * Astro quality presets mapped to ImageKit quality (0-100).
+ *
+ * Aligned with Astro's sharp service defaults
+ * (https://docs.astro.build/en/reference/image-service-reference/).
  */
-const IK_PROP_NAMES = [
-  'urlEndpoint',
-  'transformation',
-  'queryParameters',
-  'transformationPosition',
-  'responsive',
-  'deviceBreakpoints',
-  'imageBreakpoints',
-  // Internal props set by the service
-  '_ik_srcset',
-  '_ik_sizes',
-] as const;
-
-const qualityPresets = {
-  low: 30,
+const QUALITY_PRESETS: Record<string, number> = {
+  low: 25,
   mid: 50,
-  high: 80,
+  high: 75,
   max: 100,
-}
+};
 
 /**
  * Resolves the ImageKit config from the service config and per-image overrides.
+ *
+ * Priority: per-image prop > integration service config > env vars.
+ *
+ * @throws {Error} If no urlEndpoint can be resolved.
  */
 function resolveConfig(
-  options: ImageTransform,
+  options: IKImageTransform,
   imageConfig: AstroConfig['image'],
 ): { urlEndpoint: string; transformationPosition: 'path' | 'query' } {
-  const config = (imageConfig.service.config ?? {}) as ImageKitServiceConfig;
+  const config = (imageConfig.service.config ?? {}) as Partial<ImageKitServiceConfig>;
   const urlEndpoint =
-    (options as any).urlEndpoint ??
-    config.urlEndpoint ??
-    import.meta.env?.PUBLIC_IMAGEKIT_URL_ENDPOINT ??
-    import.meta.env?.IMAGEKIT_URL_ENDPOINT ??
-    '';
-  const transformationPosition =
-    (options as any).transformationPosition ?? config.transformationPosition ?? 'query';
-  return { urlEndpoint, transformationPosition };
+    options.urlEndpoint ||
+    config.urlEndpoint ||
+    import.meta.env?.IMAGEKIT_URL_ENDPOINT;
+
+  if (!urlEndpoint) {
+    throw new Error(
+      '[@imagekit/astro] An ImageKit URL endpoint is required. Pass urlEndpoint to the imagekit() integration in astro.config.mjs, set IMAGEKIT_URL_ENDPOINT, or pass urlEndpoint as a prop on <Image>.',
+    );
+  }
+
+  return {
+    urlEndpoint,
+    transformationPosition:
+      options.transformationPosition ?? config.transformationPosition ?? 'query',
+  };
 }
 
 /**
- * Builds the IK transformation array from user-supplied transformations
- * plus Astro's format/quality props.
+ * Resolves quality (preset string or number) to an ImageKit quality value.
  */
-function buildIKTransformations(options: ImageTransform): Transformation[] {
-  const userTransformation: Transformation[] = Array.from(
-    (options as any).transformation ?? [],
-  );
+function resolveQuality(quality: ImageTransform['quality']): number | undefined {
+  if (quality === undefined || quality === null) return undefined;
+  if (typeof quality === 'number') return quality;
+  const num = Number.parseInt(String(quality), 10);
+  if (!Number.isNaN(num)) return num;
+  return QUALITY_PRESETS[String(quality)];
+}
 
-  if (options.format && typeof options.format === 'string') {
-    userTransformation.push({ format: options.format as Transformation['format'] });
-  }
+/**
+ * Builds the IK transformation chain from Astro `ImageTransform` options.
+ *
+ * Ordering matches imagekit-next:
+ *   [ ...userTransformation, { width, quality, crop: 'at_max' } ]
+ *
+ * The trailing chain step always uses `crop: at_max` so that:
+ *   - srcset variants never upscale beyond the source image
+ *   - base src behaves consistently with its variants
+ *
+ * `height` is intentionally omitted from the final step — `at_max` preserves
+ * the source's aspect ratio, so passing height is redundant and can produce
+ * unexpected results if the requested aspect ratio doesn't match the source.
+ *
+ * Astro's `fit` and `position` props are intentionally ignored — `at_max`
+ * preserves aspect ratio and there's no crop/focus to apply on top of it.
+ * Users who need cropping or focus should pass them via `transformation`.
+ */
+function buildIKTransformations(options: IKImageTransform): Transformation[] {
+  const result: Transformation[] = [];
 
-  const qualityInt = parseInt(String(options.quality), 10);
-  const quality = (options.quality as keyof typeof qualityPresets);
-  const finalQuality = !Number.isNaN(qualityInt) ? qualityInt : qualityPresets[quality];
-  
-  if (finalQuality !== undefined && !Number.isNaN(finalQuality)) {
-    userTransformation.push({ quality: finalQuality as Transformation['quality'] });
+  // 1. User-supplied transformations come first.
+  if (Array.isArray(options.transformation) && options.transformation.length > 0) {
+    result.push(...options.transformation);
   }
 
-  return userTransformation;
+  // 2. Final chain step: width / quality / at_max crop.
+  const finalStep: Transformation = { crop: 'at_max' };
+  if (options.width) finalStep.width = Math.round(options.width);
+
+  const quality = resolveQuality(options.quality);
+  if (quality !== undefined) finalStep.quality = quality;
+
+  result.push(finalStep);
+
+  return result;
 }
 
 /**
- * Determines whether ImageKit should handle responsive image generation
- * (as opposed to Astro's native layout/densities/widths handling).
+ * Determines whether a `src` should be handled by the ImageKit service.
  *
- * IK responsive is used when:
- * - `responsive` prop is true (default)
- * - No Astro `densities` are specified
- * - `width` is defined (including width inferred during validateOptions)
+ * Eligible:
+ *   - Bare paths or filenames (e.g. `'foo.jpg'`, `'folder/bar.png'`).
+ *   - Root-relative paths that don't look like Vite-emitted local assets.
+ *   - Absolute URLs whose host matches a known IK host (canonical, custom
+ *     domain, or any `additionalEndpoints` host).
+ *
+ * Not eligible (→ delegated to sharp):
+ *   - Vite/Astro local asset paths: `/_astro/...`, `/@fs/...`, `/@id/...`.
+ *   - Absolute URLs on hosts not in the IK host set.
+ *   - `data:` / `blob:` URLs.
  */
-function shouldUseIKResponsive(options: ImageTransform): boolean {
-  const responsive = (options as any).responsive ?? true;
-  const hasAstroDensities = !!(options as any).densities;
-  const hasSrcset = !!(options as any).srcset;
-  return (
-    responsive &&
-    !hasAstroDensities && // Densities does not play well with IK responsive
-    !hasSrcset && // If the user provided their own srcset, don't override with IK responsive
-    options.width !== undefined
-  );
+function isImageKitSrc(src: string, ikHosts: string[]): boolean {
+  if (!src) return false;
+  if (src.startsWith('data:') || src.startsWith('blob:')) return false;
+  if (
+    src.startsWith('/_astro/') ||
+    src.startsWith('/@fs/') ||
+    src.startsWith('/@id/')
+  ) {
+    return false;
+  }
+  if (/^https?:\/\//i.test(src)) {
+    try {
+      const u = new URL(src);
+      return ikHosts.includes(u.hostname.toLowerCase());
+    } catch {
+      return false;
+    }
+  }
+  // Bare paths: assume IK (will be resolved against urlEndpoint).
+  return true;
 }
 
-const service: ExternalImageService = {
-  async validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']) {
-    if (!options.width) {
-      const config = resolveConfig(options, imageConfig);
-      const baseSrc = buildSrc({
-        src: typeof options.src === 'string' ? options.src : options.src.src,
-        urlEndpoint: config.urlEndpoint,
-        transformation: [{ raw: 'orig-true'}],
-        queryParameters: (options as any).queryParameters,
-        transformationPosition: config.transformationPosition,
-      });
-      const inferredSize = await tryInferRemoteSize(baseSrc);
-      
-      if (inferredSize) {
-        const densities: (number | `${number}x`)[] = (options as any).densities ?? [1];
-        const largestDensity = Math.max(...densities.map((d) => (typeof d === 'number' ? d : Number.parseFloat(d))));
-        options.width = Math.round(inferredSize.width / largestDensity);
-        options.height = Math.round(inferredSize.height / largestDensity);
-      } else {
-        console.warn(
-          `Failed to infer image size for ${baseSrc}. ` +
-          `Automatic dimension inference requires Astro 4.12+. ` +
-          `Please provide explicit width and height.`,
-        );
-      }
+function getIKHosts(imageConfig: AstroConfig['image']): string[] {
+  const config = (imageConfig.service.config ?? {}) as Partial<ImageKitServiceConfig>;
+  const hosts = Array.isArray(config.imagekitHosts) ? config.imagekitHosts : [];
+  // Always include the canonical host as a safety net.
+  return Array.from(new Set([...hosts, 'ik.imagekit.io'].map((h) => h.toLowerCase())));
+}
+
+const service: LocalImageService = {
+  validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']) {
+    const src = typeof options.src === 'string' ? options.src : options.src.src;
+    // For non-IK srcs, defer to sharp's validation (handles format clamping,
+    // local-asset dimension inference, etc.).
+    if (!isImageKitSrc(src, getIKHosts(imageConfig))) {
+      return sharpService.validateOptions!(options, imageConfig);
     }
-    // Round width/height like the base service
+    // For IK srcs, just round dimensions — IK handles the rest server-side.
     if (options.width) options.width = Math.round(options.width);
     if (options.height) options.height = Math.round(options.height);
-
     return options;
   },
 
   getURL(options: ImageTransform, imageConfig: AstroConfig['image']) {
-    const { urlEndpoint, transformationPosition } = resolveConfig(options, imageConfig);
-    const src = typeof options.src === 'string' ? options.src : options.src.src;
-    const transformation = buildIKTransformations(options);
-    const queryParameters = (options as any).queryParameters;
-    const widths = options.widths;
-
-    // If IK responsive mode is active, use getResponsiveImageAttributes for the src URL.
-    // The srcSet/sizes will be stored on options for getHTMLAttributes to pick up.
-    if (shouldUseIKResponsive(options)) {
-      const imageBreakpoints: number[] | undefined = (options as any).imageBreakpoints;
-      const widthBreakpoints = Array.isArray(widths) && widths.length > 0 
-                                ? Array.from(new Set(widths.concat(imageBreakpoints ?? [])))
-                                : imageBreakpoints;
-
-      const attrs = getResponsiveImageAttributes({
-        src,
-        urlEndpoint,
-        transformation: [...transformation],
-        queryParameters,
-        transformationPosition,
-        width: options.width,
-        sizes: (options as any).sizes,
-        deviceBreakpoints: (options as any).deviceBreakpoints,
-        imageBreakpoints: widthBreakpoints,
-      });
-
-      // Store responsive attrs on options for getHTMLAttributes to read
-      (options as any)._ik_srcset = attrs.srcSet;
-      (options as any)._ik_sizes = attrs.sizes;
-
-      return attrs.src;
-    }
+    const opts = options as IKImageTransform;
+    const src = typeof opts.src === 'string' ? opts.src : opts.src.src;
 
-    // Non-responsive or Astro-handled responsive: build a single IK URL
-    // Include width/height in the transformation so the IK URL reflects the requested dimensions
-    const sizeTransformation: Transformation = {};
-    if (options.width && options.densities) {
-      sizeTransformation.width = options.width;
-      sizeTransformation.crop = 'at_max';
+    if (!isImageKitSrc(src, getIKHosts(imageConfig))) {
+      return sharpService.getURL!(options, imageConfig);
     }
 
+    const { urlEndpoint, transformationPosition } = resolveConfig(opts, imageConfig);
+
     return buildSrc({
       src,
       urlEndpoint,
-      transformation: [sizeTransformation, ...transformation],
-      queryParameters,
+      transformation: buildIKTransformations(opts),
+      queryParameters: opts.queryParameters,
       transformationPosition,
     });
   },
 
-  getSrcSet(options: ImageTransform, _imageConfig: AstroConfig['image']) {
-    // If IK responsive mode handled srcSet, return empty - srcSet is set via getHTMLAttributes
-    if (shouldUseIKResponsive(options)) {
-      return [];
-    }
-
-    // For Astro layout/widths/densities: generate IK URLs for each width variant
-    const { densities } = options;
-    const targetWidth = options.width;
-    const targetHeight = options.height;
-
-    if (!targetWidth || !targetHeight) {
-      return [];
-    }
+  getHTMLAttributes(options: ImageTransform, imageConfig: AstroConfig['image']) {
+    const opts = options as IKImageTransform;
+    const srcStr = typeof opts.src === 'string' ? opts.src : opts.src.src;
 
-    const aspectRatio = targetWidth / targetHeight;
-    const sortNumeric = (a: number, b: number) => a - b;
-
-    let allWidths: Array<{ width: number; descriptor: string }> = [];
-
-    if (densities) {
-      const densityValues = (densities as (number | string)[]).map((d) =>
-        typeof d === 'number' ? d : Number.parseFloat(d),
-      );
-      const densityWidths = densityValues
-        .sort(sortNumeric)
-        .map((d) => Math.round(targetWidth * d));
-      allWidths = densityWidths.map((w, i) => ({
-        width: w,
-        descriptor: `${densityValues[i]}x`,
-      }));
+    if (!isImageKitSrc(srcStr, getIKHosts(imageConfig))) {
+      return sharpService.getHTMLAttributes!(options, imageConfig);
     }
 
-    return allWidths.map(({ width, descriptor }) => {
-      const height = Math.round(width / aspectRatio);
-      return {
-        transform: {
-          ...options,
-          width,
-          height,
-        },
-        descriptor,
-        attributes: {},
-      };
-    });
-  },
-
-  getHTMLAttributes(options: ImageTransform) {
-    // Destructure standard image service props that shouldn't appear as HTML attributes
+    // Strip props we consume or that would otherwise leak as invalid HTML attrs:
+    // - src is replaced with our generated URL
+    // - quality/background are baked into the URL
+    // - fit/position are intentionally ignored by the service
+    // - format is intentionally ignored (use `transformation: [{ format: ... }]` to force one)
+    // - inferSize is intentionally ignored (external services don't fetch remote images for dimensions)
+    // - densities/widths/layout are Astro-internal (would render as invalid HTML attrs)
+    // - urlEndpoint/transformation/queryParameters/transformationPosition are IK config
+    // Everything else (width, height, sizes, alt, class, style, loading, etc.) passes through.
     const {
       src,
-      width,
-      height,
       format,
       quality,
       densities,
       widths,
-      formats,
-      priority,
-      sizes,
       fit,
       position,
       layout,
-      ...attributes
-    } = options as any;
-
-    // Remove IK-specific props from HTML attributes
-    for (const prop of IK_PROP_NAMES) {
-      delete attributes[prop];
-    }
+      background,
+      inferSize,
+      urlEndpoint,
+      transformation,
+      queryParameters,
+      transformationPosition,
+      ...nonIKAttributes
+    } = options as IKImageTransform & {
+      format?: unknown;
+      fit?: unknown;
+      position?: unknown;
+      layout?: unknown;
+      background?: unknown;
+      inferSize?: unknown;
+    };
 
-    const result: Record<string, any> = {
-      ...attributes,
-      width,
-      height,
-      loading: attributes.loading ?? 'lazy',
-      decoding: attributes.decoding ?? 'async',
+    return {
+      ...nonIKAttributes,
+      loading: nonIKAttributes.loading ?? 'lazy',
+      decoding: nonIKAttributes.decoding ?? 'async',
     };
+  },
 
-    // If IK responsive mode generated srcSet/sizes, include them
-    if ((options as any)._ik_srcset) {
-      result.srcset = (options as any)._ik_srcset;
-    }
-    if ((options as any)._ik_sizes) {
-      result.sizes = (options as any)._ik_sizes;
-    }
+  /**
+   * Build one srcset entry per requested width. Astro fills in the `url`
+   * for each entry by calling `getURL(transform)` (see
+   * `astro/dist/assets/internal.js`). `layout` is already converted to
+   * `widths` upstream by Astro's `getImage`, so only `widths`/`densities`
+   * need handling here.
+   */
+  getSrcSet(options: ImageTransform, imageConfig: AstroConfig['image']): UnresolvedSrcSetValue[] {
+    const opts = options as IKImageTransform;
+    const src = typeof opts.src === 'string' ? opts.src : opts.src.src;
 
-    // If Astro set sizes (from layout computation), pass it through
-    if (sizes && !result.sizes) {
-      result.sizes = sizes;
+    if (!isImageKitSrc(src, getIKHosts(imageConfig))) {
+      return sharpService.getSrcSet!(options, imageConfig) as UnresolvedSrcSetValue[];
     }
 
-    if (fit) {
-      result.style = `${result.style ?? ''} object-fit: ${fit};`.trim();
-    }
-    if (position) {
-      result.style = `${result.style ?? ''} object-position: ${position};`.trim();
-    }
-    if (layout) {
-      if (layout === 'constrained') {
-        result.style = `${result.style ?? ''} max-width: 100%;`.trim();
-      } else if (layout === 'full-width') {
-        result.style = `${result.style ?? ''} width: 100%;`.trim();
+    const { width, height, densities, widths } = opts;
+
+    const targets: Array<{ w: number; descriptor: string }> = [];
+
+    if (widths?.length) {
+      for (const w of widths) targets.push({ w, descriptor: `${Math.round(w)}w` });
+    } else if (densities?.length && width) {
+      for (const d of densities) {
+        const factor = typeof d === 'number' ? d : Number.parseFloat(String(d));
+        targets.push({ w: width * factor, descriptor: `${factor}x` });
       }
     }
-    return result;
+
+    const aspectRatio = width && height ? width / height : undefined;
+
+    return targets.map(({ w, descriptor }) => ({
+      transform: {
+        ...opts,
+        width: Math.round(w),
+        height: aspectRatio ? Math.round(w / aspectRatio) : height,
+      },
+      descriptor,
+      attributes: {},
+    }));
   },
+
+  // --- Local-service hooks (delegated to sharp) ---
+  //
+  // We register as a `LocalImageService` so Astro's `/_image` endpoint
+  // accepts requests for non-IK srcs (local assets, foreign hosts in
+  // `image.domains`/`remotePatterns`). These hooks only fire when our
+  // `getURL` returned a `/_image?...` URL — which only happens for
+  // sharp-delegated srcs. IK URLs go straight to `ik.imagekit.io` and
+  // never hit `/_image`, so this is purely additive.
+  parseURL: sharpService.parseURL,
+  transform: sharpService.transform,
+  propertiesToHash: sharpService.propertiesToHash,
 };
 
 export default service;
+
diff --git a/imagekit-astro/src/types/index.ts b/imagekit-astro/src/types/index.ts
index cb0bfae..5dcb771 100644
--- a/imagekit-astro/src/types/index.ts
+++ b/imagekit-astro/src/types/index.ts
@@ -1,15 +1,22 @@
 import type { Transformation } from '@imagekit/javascript';
+import type { HTMLAttributes } from 'astro/types';
 
 /**
  * Props for the Video component.
- * Extends standard HTML video attributes with ImageKit-specific options.
+ *
+ * Extends standard HTML `<video>` attributes with ImageKit-specific options.
+ * `src` is required and overridden to be a string (relative IK path or
+ * absolute URL). All other HTML video attributes (controls, autoplay, loop,
+ * muted, poster, preload, etc.) are typed via Astro's `HTMLAttributes`.
  */
-export interface VideoProps {
+export interface VideoProps extends Omit<HTMLAttributes<'video'>, 'src'> {
   /** Relative path or absolute URL of the video in your ImageKit account */
   src: string;
 
   /**
-   * ImageKit URL endpoint. Overrides PUBLIC_IMAGEKIT_URL_ENDPOINT env var.
+   * ImageKit URL endpoint. Overrides the value from
+   * `imagekit({ urlEndpoint })` in `astro.config.mjs` and
+    * `IMAGEKIT_URL_ENDPOINT` env var.
    */
   urlEndpoint?: string;
 
@@ -21,23 +28,23 @@ export interface VideoProps {
 
   /** Position of transformation string in URL: 'path' or 'query' (default) */
   transformationPosition?: 'path' | 'query';
-
-  /** CSS class name(s) */
-  class?: string;
-
-  /** Allow any additional HTML video attributes */
-  [key: string]: unknown;
 }
 
 /**
  * Options for generating OpenGraph and Twitter Card meta tags.
+ *
+ * The output format is delegated to ImageKit's automatic format selection
+ * (it serves WebP/AVIF based on the requesting client's `Accept` header), so
+ * there is no explicit `format` option here.
  */
-export interface OgImageTagOptions {
+export interface OgImageUrlOptions {
   /** Relative path or absolute URL of the image */
   src: string;
 
   /**
-   * ImageKit URL endpoint. Overrides PUBLIC_IMAGEKIT_URL_ENDPOINT/IMAGEKIT_URL_ENDPOINT env vars.
+   * ImageKit URL endpoint. Overrides the value from
+   * `imagekit({ urlEndpoint })` in `astro.config.mjs` and
+    * `IMAGEKIT_URL_ENDPOINT` env var.
    */
   urlEndpoint?: string;
 
@@ -50,61 +57,44 @@ export interface OgImageTagOptions {
   /** Position of transformation string in URL */
   transformationPosition?: 'path' | 'query';
 
-  /** Alt text for og:image:alt meta tag */
+  /** OG image width. Default: 1200 */
+  width?: number;
+
+  /** OG image height. Default: 630 */
+  height?: number;
+}
+
+/**
+ * Props for the `<OgImage>` component. Extends `OgImageUrlOptions` with the
+ * fields needed to render the full set of OG/Twitter `<meta>` tags.
+ */
+export interface OgImageProps extends OgImageUrlOptions {
+  /** Alt text. Emitted as both `og:image:alt` and `twitter:image:alt`. */
   alt?: string;
 
+  /** OpenGraph object type. Default: `'website'` */
+  type?: 'website' | 'article' | 'book' | 'profile' | (string & {});
+
   /** Shared title used for OG and Twitter when specific titles are not set */
   title?: string;
 
-  /** OpenGraph title. Falls back to `title`, then `twitterTitle` for backward compatibility */
+  /** OpenGraph title. Falls back to `title`. */
   ogTitle?: string;
 
-  /** Twitter title. Falls back to `title`, then `ogTitle` */
+  /** Twitter title. Falls back to `title`. */
   twitterTitle?: string;
 
   /** Shared description used for OG and Twitter when specific descriptions are not set */
   description?: string;
 
-  /** OpenGraph description. Falls back to `description`, then `twitterDescription` for backward compatibility */
+  /** OpenGraph description. Falls back to `description`. */
   ogDescription?: string;
 
-  /** Twitter description. Falls back to `description`, then `ogDescription` */
+  /** Twitter description. Falls back to `description`. */
   twitterDescription?: string;
 
-  /** Twitter card type. Default: summary_large_image */
+  /** Twitter card type. Default: `'summary_large_image'` */
   twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
-
-  /** OG image width. Default: 1200 */
-  width?: number;
-
-  /** OG image height. Default: 630 */
-  height?: number;
-
-  /** Image format override */
-  format?: Transformation['format'];
 }
 
-/**
- * Props for the Image component.
- * Combines Astro's RemoteImageProps with ImageKit-specific options.
- */
-export interface ImageProps {
-  /** ImageKit URL endpoint */
-  urlEndpoint?: string;
-  /** Array of ImageKit transformations */
-  transformation?: Transformation[];
-  /** Additional query parameters */
-  queryParameters?: Record<string, string | number>;
-  /** Position of transformation string in URL */
-  transformationPosition?: 'path' | 'query';
-  /** Enable responsive srcSet generation */
-  responsive?: boolean;
-  /** HTML sizes attribute for responsive images */
-  sizes?: string;
-  /** Custom device-width breakpoints */
-  deviceBreakpoints?: number[];
-  /** Custom image-specific breakpoints */
-  imageBreakpoints?: number[];
-  /** Format for the image */
-  format?: Transformation['format'];
-}
+
diff --git a/imagekit-astro/tsup.config.ts b/imagekit-astro/tsup.config.ts
index fd85a36..38b990a 100644
--- a/imagekit-astro/tsup.config.ts
+++ b/imagekit-astro/tsup.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
     'astro',
     'astro:assets',
     '@imagekit/javascript',
+    'virtual:@imagekit/astro/config',
     /\.astro$/,
   ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ff50dc..f04b8cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
         specifier: ^5.1.0
         version: 5.3.0
     devDependencies:
+      '@types/node':
+        specifier: ^20.19.39
+        version: 20.19.39
       astro:
         specifier: ^5.11.0
         version: 5.18.1(@types/node@20.19.39)(rollup@4.60.1)(typescript@5.9.3)(yaml@2.8.3)
@@ -33,6 +36,9 @@ importers:
       '@imagekit/astro':
         specifier: workspace:*
         version: link:../imagekit-astro
+      '@imagekit/javascript':
+        specifier: ^5.1.0
+        version: 5.3.0
       astro:
         specifier: ^5.18.1
         version: 5.18.1(@types/node@20.19.39)(rollup@4.60.1)(typescript@5.9.3)(yaml@2.8.3)
diff --git a/scripts/test-all-versions.sh b/scripts/test-all-versions.sh
index 32ae934..703ee59 100755
--- a/scripts/test-all-versions.sh
+++ b/scripts/test-all-versions.sh
@@ -107,6 +107,11 @@ for VERSION in "${VERSIONS[@]}"; do
   (
     cd "$TEST_APP_DIR"
     pnpm remove --silent @imagekit/astro 2>/dev/null || true
+    # Clear pnpm's cached extracted copies of the local tarball — pnpm keys
+    # by tarball path, not content, so an updated rebuild of the same
+    # filename would otherwise be silently reused.
+    rm -rf "$REPO_ROOT/node_modules/.pnpm/@imagekit+astro"*
+    rm -rf "$TEST_APP_DIR/node_modules/@imagekit/astro"
     pnpm add --silent "$TARBALL"
     pnpm remove --silent "@astrojs/node" 2>/dev/null || true
     pnpm add --silent "astro@$VERSION"
diff --git a/test-app/.env.example b/test-app/.env.example
new file mode 100644
index 0000000..c4dd1bf
--- /dev/null
+++ b/test-app/.env.example
@@ -0,0 +1,5 @@
+# Server-only (used by /api/upload-auth)
+IMAGEKIT_PRIVATE_KEY=your_private_key_here
+
+# Exposed to the browser (must be PUBLIC_-prefixed in Astro)
+PUBLIC_IMAGEKIT_PUBLIC_KEY=your_public_key_here
diff --git a/test-app/astro.config.mjs b/test-app/astro.config.mjs
index 6addc61..af05aca 100644
--- a/test-app/astro.config.mjs
+++ b/test-app/astro.config.mjs
@@ -4,8 +4,17 @@ import imagekit from '@imagekit/astro/integration';
 
 export default defineConfig({
   output: 'server',
-  integrations: [imagekit()],
+  integrations: [
+    imagekit({
+      urlEndpoint: 'https://ik.imagekit.io/demo/',
+      additionalEndpoints: ['https://ik.imgkit.net'],
+    }),
+  ],
   adapter: node({
     mode: 'standalone',
   }),
+  image: {
+    layout: 'constrained',
+    domains: ['placehold.co']
+  }
 });
diff --git a/test-app/e2e/__snapshot__/astro-3/images.spec.ts/Image-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-3/images.spec.ts/Image-page-renders-correctly-1.txt
index 640e085..bf0bb4f 100644
--- a/test-app/e2e/__snapshot__/astro-3/images.spec.ts/Image-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-3/images.spec.ts/Image-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations.</p> <!-- Basic image with urlEndpoint prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">1. Basic Image with urlEndpoint prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with urlEndpoint prop" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">2. Image with leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with leading slash" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">3. Image with transformation</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max" class="astro-imagekit-image" alt="With transformation" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">4. Image with queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max" class="astro-imagekit-image" alt="Image with queryParameters" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">5. Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Responsive image with sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 600px) 100vw, 50vw"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">6. Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Responsive image with fixed sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px"> </div> <!-- Non-responsive image --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">7. Non-responsive image (responsive=false)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg" class="astro-imagekit-image" alt="Non-responsive image" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">8. Image with custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image custom-class" alt="Image with custom class" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">9. Image with loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with loading eager" loading="eager" data-astro-cid-3762csus="" width="300" height="300" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">10. Image with transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="Image with path transformation" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">11. Image with transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="Image with path transformation + custom transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- Custom device breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">12. Image with custom deviceBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with custom device breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Custom image breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">13. Image with custom imageBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" class="astro-imagekit-image" alt="Image with custom image breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">14. Image with data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with data attributes" data-testid="test-image" data-custom="value" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">15. Image with multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max" class="astro-imagekit-image" alt="Image with multiple chained transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max 2x"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">16. Image with format="avif"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" class="astro-imagekit-image" alt="Image with AVIF format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">17. Image with quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max" class="astro-imagekit-image" alt="Image with high quality preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max 2x"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">18. Image with quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" class="astro-imagekit-image" alt="Image with numeric quality" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">19. Image with decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with sync decoding" decoding="sync" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">20. Image with fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with high fetch priority" fetchpriority="high" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">21. Image with densities=[1.5, 2]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Image with density srcset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">22. Image with widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Image with specific widths srcset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">23. Image with layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with constrained layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="max-width: 100%;"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">24. Image with layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with full-width layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="width: 100%;"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">25. Image with layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with fixed layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with fit prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">26. Image with fit="contain"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with contain fit" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="object-fit: contain; max-width: 100%;"> </div> <!-- Image with position prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">27. Image with position="top left"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with top left position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="object-position: top left; max-width: 100%;"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">28. Image with priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with priority flag" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">29. Image with inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">30. Image with id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with id" id="my-image-id" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- PROPERTY CONFLICT TESTS --> <h2 data-astro-cid-3762csus="">Property Conflict Tests (Invalid Combinations)</h2> <p data-astro-cid-3762csus="">Per Astro docs: These property combinations should not be used together. Testing graceful handling.</p> <!-- densities + layout conflict --> <div class="example" data-test-id="conflict-densities-layout" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">31. CONFLICT: densities + layout (densities should be ignored)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Conflict: densities + layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" style="max-width: 100%;"> </div> <!-- densities + widths conflict --> <div class="example" data-test-id="conflict-densities-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">32. CONFLICT: densities + widths (only one should be used)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Conflict: densities + widths" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- widths without sizes --> <div class="example" data-test-id="conflict-widths-no-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">33. CONFLICT: widths without sizes (sizes required)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Conflict: widths without sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- layout=fixed + widths --> <div class="example" data-test-id="conflict-fixed-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">34. CONFLICT: layout=fixed + widths (fixed layout shouldn't vary widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Conflict: layout=fixed + widths" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- layout=none + responsive prop --> <div class="example" data-test-id="conflict-none-layout-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">35. CONFLICT: layout=none + responsive=true (none disables responsiveness)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Conflict: layout=none + responsive" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- VALID PROPERTY COMBINATIONS --> <h2 data-astro-cid-3762csus="">Valid Property Combinations</h2> <p data-astro-cid-3762csus="">These property combinations work correctly together.</p> <!-- widths + sizes valid --> <div class="example" data-test-id="valid-widths-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">36. VALID: widths + sizes (responsive with explicit widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Valid: widths + sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- densities alone valid --> <div class="example" data-test-id="valid-densities-alone" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">37. VALID: densities alone (density-based srcset)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Valid: densities alone" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- layout=constrained + format + quality valid --> <div class="example" data-test-id="valid-layout-format-quality" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">38. VALID: layout=constrained + format + quality</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max" class="astro-imagekit-image" alt="Valid: layout + format + quality" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max 2x" style="max-width: 100%;"> </div> <!-- layout=full-width with responsive --> <div class="example" data-test-id="valid-fullwidth-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">39. VALID: layout=full-width with responsive props</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Valid: layout full-width" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="width: 100%;"> </div> <!-- responsive + ImageKit breakpoints --> <div class="example" data-test-id="valid-responsive-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">40. VALID: responsive=true + ImageKit breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" class="astro-imagekit-image" alt="Valid: responsive + breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x"> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-3762csus="">Edge Case Tests</h2> <p data-astro-cid-3762csus="">Testing extreme values and boundary conditions.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="edge-minimal-dimensions" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">41. Minimal dimensions (1px × 1px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max" class="astro-imagekit-image" alt="minimal 1x1" data-astro-cid-3762csus="" width="1" height="1" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x"> </div> <!-- Extreme aspect ratio 1:1000 --> <div class="example" data-test-id="edge-extreme-ratio-tall" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">42. Extreme aspect ratio (1:1000)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max" class="astro-imagekit-image" alt="1:1000 aspect ratio" data-astro-cid-3762csus="" width="10" height="10000" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 2x"> </div> <!-- Extreme aspect ratio 1000:1 --> <div class="example" data-test-id="edge-extreme-ratio-wide" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">43. Extreme aspect ratio (1000:1)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="1000:1 aspect ratio" data-astro-cid-3762csus="" width="10000" height="10" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">44. Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max" class="astro-imagekit-image" alt="quality 0" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max 2x"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">45. Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" class="astro-imagekit-image" alt="quality 100" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">46. Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max" class="astro-imagekit-image" alt="webp format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max 2x"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">47. Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" class="astro-imagekit-image" alt="avif format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">48. Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max" class="astro-imagekit-image" alt="svg format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max 2x"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">49. Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max" class="astro-imagekit-image" alt="complex transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max 2x"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">50. transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="transformation path position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">51. transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max" class="astro-imagekit-image" alt="transformation query position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max 2x"> </div> <!-- Large width boundary test --> <div class="example" data-test-id="edge-large-width" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">52. Large width (5000px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="5000px width" data-astro-cid-3762csus="" width="5000" height="5000" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">53. Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max" class="astro-imagekit-image" alt="quality low preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max 2x"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">54. Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" class="astro-imagekit-image" alt="quality mid preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">55. Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" class="astro-imagekit-image" alt="quality max preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x"> </div> <!-- Responsive with custom device breakpoints edge case --> <div class="example" data-test-id="edge-device-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">56. Responsive with extreme device breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max" class="astro-imagekit-image" alt="device breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max 2x"> </div> <!-- Responsive with custom image breakpoints edge case --> <div class="example" data-test-id="edge-image-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">57. Responsive with extreme image breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="image breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 1x"> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations. The <code data-astro-cid-3762csus="">urlEndpoint</code> is configured globally in <code data-astro-cid-3762csus="">astro.config.mjs</code>; cases below only pass it explicitly when overriding it.</p> <!-- Basic image (urlEndpoint comes from astro.config.mjs) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Basic image (urlEndpoint from integration config)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10" alt="Basic image" width="10" height="10" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- urlEndpoint prop override --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">urlEndpoint prop override</h3> <img src="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300" alt="Image with urlEndpoint override" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with leading slash" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Absolute URL src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Absolute URL src (urlEndpoint ignored, transformations still applied)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Absolute URL src" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Transformation prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300" alt="With transformation" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">queryParameters prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300" alt="Image with queryParameters" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Responsive image with sizes" sizes="(max-width: 600px) 100vw, 50vw" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Responsive image with fixed sizes" sizes="300px" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with custom class" class="custom-class" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with loading eager" loading="eager" width="300" height="300" data-astro-cid-3762csus="" decoding="async"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg" alt="Image with path transformation" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg" alt="Image with path transformation + custom transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with data attributes" data-testid="test-image" data-custom="value" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300" alt="Image with multiple chained transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">format="avif" ignored</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with AVIF format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75" alt="Image with high quality preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" alt="Image with numeric quality" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with sync decoding" decoding="sync" width="300" height="300" data-astro-cid-3762csus="" loading="lazy"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with high fetch priority" fetchpriority="high" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">densities=[1.5, 2] (requires layout="none" to override config default)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-450 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 2x" alt="Image with density srcset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-240 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-540 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-720 720w" alt="Image with specific widths srcset" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with constrained layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with full-width layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with fixed layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="none" (turns off responsive srcset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="none" (responsive off)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with responsive off" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with priority flag" priority="true" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with id" id="my-image-id" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0" alt="quality 0" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" alt="quality 100" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="webp format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="avif format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="svg format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300" alt="complex transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg" alt="transformation path position" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300" alt="transformation query position" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25" alt="quality low preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" alt="quality mid preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" alt="quality max preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- SHARP DELEGATION: non-IK srcs are routed through Astro's bundled sharp service. --> <h2 data-astro-cid-3762csus="">Sharp delegation (non-ImageKit srcs)</h2> <p data-astro-cid-3762csus="">The following cases use srcs that are not ImageKit URLs. The integration delegates them to Astro's default sharp service, so they're served via Astro's <code data-astro-cid-3762csus="">/_image</code> endpoint instead of being rewritten to <code data-astro-cid-3762csus="">ik.imagekit.io</code>.</p> <!-- Local imported asset (Vite-emitted /_astro/ path) --> <div class="example" data-test-id="sharp-local-import" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Local imported asset (sharp)</h3> <img src="/_image?href=%2F_astro%2Fhero.d25e9c19.jpg&amp;w=300&amp;f=webp" alt="Local hero image processed by sharp" data-astro-cid-3762csus="" width="300" height="200" loading="lazy" decoding="async"> </div> <!-- Allow-listed external URL (in image.domains) --> <div class="example" data-test-id="sharp-external-allowed" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Allow-listed external URL (sharp)</h3> <img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp" alt="External URL on an allow-listed host, processed by sharp" data-astro-cid-3762csus="" width="600" height="400" loading="lazy" decoding="async"> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-3/md.spec.ts/Markdown-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-3/md.spec.ts/Markdown-page-renders-correctly-1.txt
new file mode 100644
index 0000000..2db57f0
--- /dev/null
+++ b/test-app/e2e/__snapshot__/astro-3/md.spec.ts/Markdown-page-renders-correctly-1.txt
@@ -0,0 +1,12 @@
+<div class="container">
+<h2 id="imagekit-url-primary-endpoint-host">ImageKit URL (primary endpoint host)</h2>
+<p><img src="https://ik.imagekit.io/demo/default-image.jpg" alt="Imagekit URL"></p>
+<h2 id="custom-ik-domain-additionalendpoints-host">Custom IK domain (additionalEndpoints host)</h2>
+<p><img src="https://ik.imgkit.net/demo/default-image.jpg" alt="Another custom IK URL"></p>
+<h2 id="local-imported-asset-delegated-to-sharp">Local imported asset (delegated to sharp)</h2>
+<p><img alt="Local hero asset" src="/_image?href=%2F_astro%2Fhero.d25e9c19.jpg&amp;f=webp" width="640" height="427" loading="lazy" decoding="async"></p>
+<h2 id="allow-listed-external-url-delegated-to-sharp">Allow-listed external URL (delegated to sharp)</h2>
+<p><img src="https://placehold.co/600x400" alt="Allowed external URL"></p>
+<h2 id="non-allow-listed-external-url-rendered-as-is-by-astro">Non-allow-listed external URL (rendered as-is by Astro)</h2>
+<p><img src="https://not-allowed-external-as-is.com/creatives/4a3a37e5-f135-4fdd-877f-488570c9d4bb/default.jpg?tr=cm-pad_resize,w-900" alt="Not allowed external URL"></p>
+</div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-3/videos.spec.ts/Videos-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-3/videos.spec.ts/Videos-page-renders-correctly-1.txt
index 6175ab0..9edc7d4 100644
--- a/test-app/e2e/__snapshot__/astro-3/videos.spec.ts/Videos-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-3/videos.spec.ts/Videos-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with all props --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with all HTML attributes</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="true" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" data-astro-cid-73ne5lbz=""></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="true" loop="" data-astro-cid-73ne5lbz=""></video> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-73ne5lbz="">Edge Case Tests</h2> <p data-astro-cid-73ne5lbz="">Testing extreme values and boundary conditions for video component.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="video-edge-minimal" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Minimal dimensions (1px × 1px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="minimal video 1x1" width="1" height="1" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Large dimensions --> <div class="example" data-test-id="video-edge-large" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Large dimensions (4000px × 2000px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="large video" width="4000" height="2000" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Extreme aspect ratio tall --> <div class="example" data-test-id="video-edge-ratio-tall" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (1:500)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="tall aspect ratio" width="10" height="5000" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Extreme aspect ratio wide --> <div class="example" data-test-id="video-edge-ratio-wide" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (500:1)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="wide aspect ratio" width="5000" height="10" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="video-edge-complex-transformations" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Multiple complex transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:rt-90:q-50:ar-16-9" class="astro-imagekit-video" title="complex transformations" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="true" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz=""></video> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="true" loop="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path" with transformations</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="true" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz=""></video> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-4/images.spec.ts/Image-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-4/images.spec.ts/Image-page-renders-correctly-1.txt
index 640e085..48dc162 100644
--- a/test-app/e2e/__snapshot__/astro-4/images.spec.ts/Image-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-4/images.spec.ts/Image-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations.</p> <!-- Basic image with urlEndpoint prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">1. Basic Image with urlEndpoint prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with urlEndpoint prop" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">2. Image with leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with leading slash" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">3. Image with transformation</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max" class="astro-imagekit-image" alt="With transformation" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">4. Image with queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max" class="astro-imagekit-image" alt="Image with queryParameters" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">5. Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Responsive image with sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 600px) 100vw, 50vw"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">6. Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Responsive image with fixed sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px"> </div> <!-- Non-responsive image --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">7. Non-responsive image (responsive=false)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg" class="astro-imagekit-image" alt="Non-responsive image" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">8. Image with custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image custom-class" alt="Image with custom class" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">9. Image with loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with loading eager" loading="eager" data-astro-cid-3762csus="" width="300" height="300" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">10. Image with transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="Image with path transformation" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">11. Image with transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="Image with path transformation + custom transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- Custom device breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">12. Image with custom deviceBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with custom device breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Custom image breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">13. Image with custom imageBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" class="astro-imagekit-image" alt="Image with custom image breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">14. Image with data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with data attributes" data-testid="test-image" data-custom="value" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">15. Image with multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max" class="astro-imagekit-image" alt="Image with multiple chained transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max 2x"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">16. Image with format="avif"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" class="astro-imagekit-image" alt="Image with AVIF format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">17. Image with quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max" class="astro-imagekit-image" alt="Image with high quality preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max 2x"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">18. Image with quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" class="astro-imagekit-image" alt="Image with numeric quality" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">19. Image with decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with sync decoding" decoding="sync" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">20. Image with fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with high fetch priority" fetchpriority="high" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">21. Image with densities=[1.5, 2]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Image with density srcset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">22. Image with widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Image with specific widths srcset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">23. Image with layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with constrained layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="max-width: 100%;"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">24. Image with layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with full-width layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="width: 100%;"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">25. Image with layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with fixed layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with fit prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">26. Image with fit="contain"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with contain fit" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="object-fit: contain; max-width: 100%;"> </div> <!-- Image with position prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">27. Image with position="top left"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with top left position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="object-position: top left; max-width: 100%;"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">28. Image with priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with priority flag" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">29. Image with inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">30. Image with id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Image with id" id="my-image-id" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- PROPERTY CONFLICT TESTS --> <h2 data-astro-cid-3762csus="">Property Conflict Tests (Invalid Combinations)</h2> <p data-astro-cid-3762csus="">Per Astro docs: These property combinations should not be used together. Testing graceful handling.</p> <!-- densities + layout conflict --> <div class="example" data-test-id="conflict-densities-layout" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">31. CONFLICT: densities + layout (densities should be ignored)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Conflict: densities + layout" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" style="max-width: 100%;"> </div> <!-- densities + widths conflict --> <div class="example" data-test-id="conflict-densities-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">32. CONFLICT: densities + widths (only one should be used)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Conflict: densities + widths" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- widths without sizes --> <div class="example" data-test-id="conflict-widths-no-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">33. CONFLICT: widths without sizes (sizes required)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Conflict: widths without sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- layout=fixed + widths --> <div class="example" data-test-id="conflict-fixed-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">34. CONFLICT: layout=fixed + widths (fixed layout shouldn't vary widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Conflict: layout=fixed + widths" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- layout=none + responsive prop --> <div class="example" data-test-id="conflict-none-layout-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">35. CONFLICT: layout=none + responsive=true (none disables responsiveness)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Conflict: layout=none + responsive" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x"> </div> <!-- VALID PROPERTY COMBINATIONS --> <h2 data-astro-cid-3762csus="">Valid Property Combinations</h2> <p data-astro-cid-3762csus="">These property combinations work correctly together.</p> <!-- widths + sizes valid --> <div class="example" data-test-id="valid-widths-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">36. VALID: widths + sizes (responsive with explicit widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="Valid: widths + sizes" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"> </div> <!-- densities alone valid --> <div class="example" data-test-id="valid-densities-alone" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">37. VALID: densities alone (density-based srcset)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image" alt="Valid: densities alone" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async"> </div> <!-- layout=constrained + format + quality valid --> <div class="example" data-test-id="valid-layout-format-quality" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">38. VALID: layout=constrained + format + quality</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max" class="astro-imagekit-image" alt="Valid: layout + format + quality" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max 2x" style="max-width: 100%;"> </div> <!-- layout=full-width with responsive --> <div class="example" data-test-id="valid-fullwidth-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">39. VALID: layout=full-width with responsive props</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="Valid: layout full-width" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" style="width: 100%;"> </div> <!-- responsive + ImageKit breakpoints --> <div class="example" data-test-id="valid-responsive-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">40. VALID: responsive=true + ImageKit breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" class="astro-imagekit-image" alt="Valid: responsive + breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x"> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-3762csus="">Edge Case Tests</h2> <p data-astro-cid-3762csus="">Testing extreme values and boundary conditions.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="edge-minimal-dimensions" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">41. Minimal dimensions (1px × 1px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max" class="astro-imagekit-image" alt="minimal 1x1" data-astro-cid-3762csus="" width="1" height="1" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x"> </div> <!-- Extreme aspect ratio 1:1000 --> <div class="example" data-test-id="edge-extreme-ratio-tall" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">42. Extreme aspect ratio (1:1000)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max" class="astro-imagekit-image" alt="1:1000 aspect ratio" data-astro-cid-3762csus="" width="10" height="10000" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 2x"> </div> <!-- Extreme aspect ratio 1000:1 --> <div class="example" data-test-id="edge-extreme-ratio-wide" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">43. Extreme aspect ratio (1000:1)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="1000:1 aspect ratio" data-astro-cid-3762csus="" width="10000" height="10" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">44. Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max" class="astro-imagekit-image" alt="quality 0" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max 2x"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">45. Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" class="astro-imagekit-image" alt="quality 100" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">46. Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max" class="astro-imagekit-image" alt="webp format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max 2x"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">47. Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" class="astro-imagekit-image" alt="avif format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">48. Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max" class="astro-imagekit-image" alt="svg format" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max 2x"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">49. Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max" class="astro-imagekit-image" alt="complex transformations" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max 2x"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">50. transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg" class="astro-imagekit-image" alt="transformation path position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg 2x"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">51. transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max" class="astro-imagekit-image" alt="transformation query position" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max 2x"> </div> <!-- Large width boundary test --> <div class="example" data-test-id="edge-large-width" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">52. Large width (5000px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" class="astro-imagekit-image" alt="5000px width" data-astro-cid-3762csus="" width="5000" height="5000" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">53. Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max" class="astro-imagekit-image" alt="quality low preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max 2x"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">54. Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" class="astro-imagekit-image" alt="quality mid preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">55. Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" class="astro-imagekit-image" alt="quality max preset" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x"> </div> <!-- Responsive with custom device breakpoints edge case --> <div class="example" data-test-id="edge-device-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">56. Responsive with extreme device breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max" class="astro-imagekit-image" alt="device breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max 2x"> </div> <!-- Responsive with custom image breakpoints edge case --> <div class="example" data-test-id="edge-image-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">57. Responsive with extreme image breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" class="astro-imagekit-image" alt="image breakpoints" data-astro-cid-3762csus="" width="300" height="300" loading="lazy" decoding="async" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 1x"> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations. The <code data-astro-cid-3762csus="">urlEndpoint</code> is configured globally in <code data-astro-cid-3762csus="">astro.config.mjs</code>; cases below only pass it explicitly when overriding it.</p> <!-- Basic image (urlEndpoint comes from astro.config.mjs) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Basic image (urlEndpoint from integration config)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10" alt="Basic image" width="10" height="10" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- urlEndpoint prop override --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">urlEndpoint prop override</h3> <img src="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300" alt="Image with urlEndpoint override" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with leading slash" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Absolute URL src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Absolute URL src (urlEndpoint ignored, transformations still applied)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Absolute URL src" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Transformation prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300" alt="With transformation" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">queryParameters prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300" alt="Image with queryParameters" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Responsive image with sizes" sizes="(max-width: 600px) 100vw, 50vw" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Responsive image with fixed sizes" sizes="300px" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with custom class" class="custom-class" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with loading eager" loading="eager" width="300" height="300" data-astro-cid-3762csus="" decoding="async"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg" alt="Image with path transformation" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg" alt="Image with path transformation + custom transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with data attributes" data-testid="test-image" data-custom="value" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300" alt="Image with multiple chained transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">format="avif" ignored</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with AVIF format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75" alt="Image with high quality preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" alt="Image with numeric quality" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with sync decoding" decoding="sync" width="300" height="300" data-astro-cid-3762csus="" loading="lazy"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with high fetch priority" fetchpriority="high" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">densities=[1.5, 2] (requires layout="none" to override config default)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-450 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 2x" alt="Image with density srcset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-240 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-540 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-720 720w" alt="Image with specific widths srcset" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with constrained layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with full-width layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with fixed layout" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with layout="none" (turns off responsive srcset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="none" (responsive off)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with responsive off" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with priority flag" priority="true" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with id" id="my-image-id" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0" alt="quality 0" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" alt="quality 100" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="webp format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="avif format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="svg format" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300" alt="complex transformations" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg" alt="transformation path position" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300" alt="transformation query position" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25" alt="quality low preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" alt="quality mid preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" alt="quality max preset" width="300" height="300" data-astro-cid-3762csus="" loading="lazy" decoding="async"> </div> <!-- SHARP DELEGATION: non-IK srcs are routed through Astro's bundled sharp service. --> <h2 data-astro-cid-3762csus="">Sharp delegation (non-ImageKit srcs)</h2> <p data-astro-cid-3762csus="">The following cases use srcs that are not ImageKit URLs. The integration delegates them to Astro's default sharp service, so they're served via Astro's <code data-astro-cid-3762csus="">/_image</code> endpoint instead of being rewritten to <code data-astro-cid-3762csus="">ik.imagekit.io</code>.</p> <!-- Local imported asset (Vite-emitted /_astro/ path) --> <div class="example" data-test-id="sharp-local-import" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Local imported asset (sharp)</h3> <img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=300&amp;f=webp" alt="Local hero image processed by sharp" data-astro-cid-3762csus="" width="300" height="200" loading="lazy" decoding="async"> </div> <!-- Allow-listed external URL (in image.domains) --> <div class="example" data-test-id="sharp-external-allowed" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Allow-listed external URL (sharp)</h3> <img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp" alt="External URL on an allow-listed host, processed by sharp" data-astro-cid-3762csus="" width="600" height="400" loading="lazy" decoding="async"> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-4/md.spec.ts/Markdown-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-4/md.spec.ts/Markdown-page-renders-correctly-1.txt
new file mode 100644
index 0000000..1e9362f
--- /dev/null
+++ b/test-app/e2e/__snapshot__/astro-4/md.spec.ts/Markdown-page-renders-correctly-1.txt
@@ -0,0 +1,12 @@
+<div class="container">
+<h2 id="imagekit-url-primary-endpoint-host">ImageKit URL (primary endpoint host)</h2>
+<p><img src="https://ik.imagekit.io/demo/default-image.jpg" alt="Imagekit URL"></p>
+<h2 id="custom-ik-domain-additionalendpoints-host">Custom IK domain (additionalEndpoints host)</h2>
+<p><img src="https://ik.imgkit.net/demo/default-image.jpg" alt="Another custom IK URL"></p>
+<h2 id="local-imported-asset-delegated-to-sharp">Local imported asset (delegated to sharp)</h2>
+<p><img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;f=webp" alt="Local hero asset" width="640" height="427" loading="lazy" decoding="async"></p>
+<h2 id="allow-listed-external-url-delegated-to-sharp">Allow-listed external URL (delegated to sharp)</h2>
+<p><img src="https://placehold.co/600x400" alt="Allowed external URL"></p>
+<h2 id="non-allow-listed-external-url-rendered-as-is-by-astro">Non-allow-listed external URL (rendered as-is by Astro)</h2>
+<p><img src="https://not-allowed-external-as-is.com/creatives/4a3a37e5-f135-4fdd-877f-488570c9d4bb/default.jpg?tr=cm-pad_resize,w-900" alt="Not allowed external URL"></p>
+</div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-4/videos.spec.ts/Videos-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-4/videos.spec.ts/Videos-page-renders-correctly-1.txt
index 6175ab0..9edc7d4 100644
--- a/test-app/e2e/__snapshot__/astro-4/videos.spec.ts/Videos-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-4/videos.spec.ts/Videos-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with all props --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with all HTML attributes</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="true" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" data-astro-cid-73ne5lbz=""></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="true" loop="" data-astro-cid-73ne5lbz=""></video> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-73ne5lbz="">Edge Case Tests</h2> <p data-astro-cid-73ne5lbz="">Testing extreme values and boundary conditions for video component.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="video-edge-minimal" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Minimal dimensions (1px × 1px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="minimal video 1x1" width="1" height="1" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Large dimensions --> <div class="example" data-test-id="video-edge-large" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Large dimensions (4000px × 2000px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="large video" width="4000" height="2000" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Extreme aspect ratio tall --> <div class="example" data-test-id="video-edge-ratio-tall" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (1:500)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="tall aspect ratio" width="10" height="5000" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Extreme aspect ratio wide --> <div class="example" data-test-id="video-edge-ratio-wide" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (500:1)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="wide aspect ratio" width="5000" height="10" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="video-edge-complex-transformations" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Multiple complex transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:rt-90:q-50:ar-16-9" class="astro-imagekit-video" title="complex transformations" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="true" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz=""></video> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="true" loop="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path" with transformations</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz=""></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="true" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz=""></video> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-5/images.spec.ts/Image-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-5/images.spec.ts/Image-page-renders-correctly-1.txt
index b863ad6..715cbd1 100644
--- a/test-app/e2e/__snapshot__/astro-5/images.spec.ts/Image-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-5/images.spec.ts/Image-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations.</p> <!-- Basic image with urlEndpoint prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">1. Basic Image with urlEndpoint prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with urlEndpoint prop" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">2. Image with leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with leading slash" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">3. Image with transformation</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max" alt="With transformation" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">4. Image with queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max" alt="Image with queryParameters" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">5. Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Responsive image with sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 600px) 100vw, 50vw" class="astro-imagekit-image"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">6. Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Responsive image with fixed sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px" class="astro-imagekit-image"> </div> <!-- Non-responsive image --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">7. Non-responsive image (responsive=false)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg" alt="Non-responsive image" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" class="astro-imagekit-image"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">8. Image with custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with custom class" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image custom-class"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">9. Image with loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with loading eager" loading="eager" data-astro-cid-3762csus="true" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">10. Image with transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg" alt="Image with path transformation" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">11. Image with transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg" alt="Image with path transformation + custom transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- Custom device breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">12. Image with custom deviceBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with custom device breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Custom image breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">13. Image with custom imageBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" alt="Image with custom image breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">14. Image with data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with data attributes" data-testid="test-image" data-custom="value" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">15. Image with multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max" alt="Image with multiple chained transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">16. Image with format="avif"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" alt="Image with AVIF format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">17. Image with quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max" alt="Image with high quality preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">18. Image with quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" alt="Image with numeric quality" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">19. Image with decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with sync decoding" decoding="sync" data-astro-cid-3762csus="true" loading="lazy" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">20. Image with fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with high fetch priority" fetchpriority="high" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">21. Image with densities=[1.5, 2]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Image with density srcset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" class="astro-imagekit-image"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">22. Image with widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with specific widths srcset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">23. Image with layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with constrained layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center; max-width: 100%;" data-astro-image="constrained" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" class="astro-imagekit-image"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">24. Image with layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max" alt="Image with full-width layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center; width: 100%;" data-astro-image="full-width" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-960,c-at_max 960w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1280,c-at_max 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1668,c-at_max 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2560,c-at_max 2560w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3200,c-at_max 3200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-4480,c-at_max 4480w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5120,c-at_max 5120w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max 6016w" sizes="100vw" class="astro-imagekit-image"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">25. Image with layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with fixed layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center;" data-astro-image="fixed" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 600w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px" class="astro-imagekit-image"> </div> <!-- Image with fit prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">26. Image with fit="contain"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with contain fit" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: contain; --pos: center; object-fit: contain; object-position: center; max-width: 100%;" data-astro-image="constrained" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" class="astro-imagekit-image"> </div> <!-- Image with position prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">27. Image with position="top left"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with top left position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: top left; object-fit: cover; object-position: top left; max-width: 100%;" data-astro-image="constrained" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" class="astro-imagekit-image"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">28. Image with priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with priority flag" data-astro-cid-3762csus="true" loading="eager" decoding="sync" fetchpriority="high" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">29. Image with inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">30. Image with id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with id" id="my-image-id" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- PROPERTY CONFLICT TESTS --> <h2 data-astro-cid-3762csus="">Property Conflict Tests (Invalid Combinations)</h2> <p data-astro-cid-3762csus="">Per Astro docs: These property combinations should not be used together. Testing graceful handling.</p> <!-- densities + layout conflict --> <div class="example" data-test-id="conflict-densities-layout" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">31. CONFLICT: densities + layout (densities should be ignored)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Conflict: densities + layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center; max-width: 100%;" data-astro-image="constrained" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" class="astro-imagekit-image"> </div> <!-- densities + widths conflict --> <div class="example" data-test-id="conflict-densities-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">32. CONFLICT: densities + widths (only one should be used)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Conflict: densities + widths" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- widths without sizes --> <div class="example" data-test-id="conflict-widths-no-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">33. CONFLICT: widths without sizes (sizes required)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Conflict: widths without sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- layout=fixed + widths --> <div class="example" data-test-id="conflict-fixed-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">34. CONFLICT: layout=fixed + widths (fixed layout shouldn't vary widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Conflict: layout=fixed + widths" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center;" data-astro-image="fixed" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- layout=none + responsive prop --> <div class="example" data-test-id="conflict-none-layout-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">35. CONFLICT: layout=none + responsive=true (none disables responsiveness)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Conflict: layout=none + responsive" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- VALID PROPERTY COMBINATIONS --> <h2 data-astro-cid-3762csus="">Valid Property Combinations</h2> <p data-astro-cid-3762csus="">These property combinations work correctly together.</p> <!-- widths + sizes valid --> <div class="example" data-test-id="valid-widths-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">36. VALID: widths + sizes (responsive with explicit widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Valid: widths + sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- densities alone valid --> <div class="example" data-test-id="valid-densities-alone" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">37. VALID: densities alone (density-based srcset)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Valid: densities alone" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" class="astro-imagekit-image"> </div> <!-- layout=constrained + format + quality valid --> <div class="example" data-test-id="valid-layout-format-quality" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">38. VALID: layout=constrained + format + quality</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-3840,c-at_max" alt="Valid: layout + format + quality" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center; max-width: 100%;" data-astro-image="constrained" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" class="astro-imagekit-image"> </div> <!-- layout=full-width with responsive --> <div class="example" data-test-id="valid-fullwidth-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">39. VALID: layout=full-width with responsive props</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max" alt="Valid: layout full-width" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center; object-fit: cover; object-position: center; width: 100%;" data-astro-image="full-width" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-960,c-at_max 960w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1280,c-at_max 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1668,c-at_max 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2560,c-at_max 2560w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3200,c-at_max 3200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-4480,c-at_max 4480w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5120,c-at_max 5120w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max 6016w" sizes="100vw" class="astro-imagekit-image"> </div> <!-- responsive + ImageKit breakpoints --> <div class="example" data-test-id="valid-responsive-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">40. VALID: responsive=true + ImageKit breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" alt="Valid: responsive + breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-3762csus="">Edge Case Tests</h2> <p data-astro-cid-3762csus="">Testing extreme values and boundary conditions.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="edge-minimal-dimensions" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">41. Minimal dimensions (1px × 1px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max" alt="minimal 1x1" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="1" height="1" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Extreme aspect ratio 1:1000 --> <div class="example" data-test-id="edge-extreme-ratio-tall" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">42. Extreme aspect ratio (1:1000)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max" alt="1:1000 aspect ratio" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="10" height="10000" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Extreme aspect ratio 1000:1 --> <div class="example" data-test-id="edge-extreme-ratio-wide" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">43. Extreme aspect ratio (1000:1)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="1000:1 aspect ratio" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="10000" height="10" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">44. Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max" alt="quality 0" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">45. Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" alt="quality 100" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">46. Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max" alt="webp format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">47. Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" alt="avif format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">48. Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max" alt="svg format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">49. Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max" alt="complex transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">50. transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg" alt="transformation path position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">51. transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max" alt="transformation query position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Large width boundary test --> <div class="example" data-test-id="edge-large-width" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">52. Large width (5000px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="5000px width" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="5000" height="5000" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">53. Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max" alt="quality low preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">54. Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" alt="quality mid preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">55. Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" alt="quality max preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive with custom device breakpoints edge case --> <div class="example" data-test-id="edge-device-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">56. Responsive with extreme device breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max" alt="device breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive with custom image breakpoints edge case --> <div class="example" data-test-id="edge-image-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">57. Responsive with extreme image breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="image breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 1x" class="astro-imagekit-image"> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations. The <code data-astro-cid-3762csus="">urlEndpoint</code> is configured globally in <code data-astro-cid-3762csus="">astro.config.mjs</code>; cases below only pass it explicitly when overriding it.</p> <!-- Basic image (urlEndpoint comes from astro.config.mjs) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Basic image (urlEndpoint from integration config)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10 10w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-20 20w" alt="Basic image" width="10" height="10" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 10px) 10px, 100vw" style="--fit: contain; --pos: top left;" data-astro-image="constrained"> </div> <!-- urlEndpoint prop override --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">urlEndpoint prop override</h3> <img src="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with urlEndpoint override" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with leading slash" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Absolute URL src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Absolute URL src (urlEndpoint ignored, transformations still applied)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Absolute URL src" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Transformation prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-600 600w" alt="With transformation" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">queryParameters prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-600 600w" alt="Image with queryParameters" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Responsive image with sizes" sizes="(max-width: 600px) 100vw, 50vw" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Responsive image with fixed sizes" sizes="300px" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with custom class" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained" class="custom-class"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with loading eager" loading="eager" width="300" height="300" data-astro-cid-3762csus="true" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:c-at_max,w-600/default-image.jpg 600w" alt="Image with path transformation" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-600/default-image.jpg 600w" alt="Image with path transformation + custom transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with data attributes" data-testid="test-image" data-custom="value" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-600 600w" alt="Image with multiple chained transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">format="avif" ignored</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with AVIF format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-75 600w" alt="Image with high quality preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-50 600w" alt="Image with numeric quality" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with sync decoding" decoding="sync" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with high fetch priority" fetchpriority="high" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">densities=[1.5, 2] (requires layout="none" to override config default)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-450 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 2x" alt="Image with density srcset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-240 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-540 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-720 720w" alt="Image with specific widths srcset" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with constrained layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1080 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1280 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1668 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-2048 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-2560 2560w" alt="Image with full-width layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="100vw" style="--fit: cover; --pos: center;" data-astro-image="full-width"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with fixed layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="300px" style="--fit: cover; --pos: center;" data-astro-image="fixed"> </div> <!-- Image with layout="none" (turns off responsive srcset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="none" (responsive off)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with responsive off" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with priority flag" width="300" height="300" data-astro-cid-3762csus="true" loading="eager" decoding="sync" fetchpriority="high" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with inline style" style="--fit: cover; --pos: center; border: 3px solid red; border-radius: 10px;" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with id" id="my-image-id" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-0 600w" alt="quality 0" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-100 600w" alt="quality 100" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="webp format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="avif format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="svg format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-600 600w" alt="complex transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-600/default-image.jpg 600w" alt="transformation path position" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-600 600w" alt="transformation query position" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-25 600w" alt="quality low preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-50 600w" alt="quality mid preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-100 600w" alt="quality max preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained"> </div> <!-- SHARP DELEGATION: non-IK srcs are routed through Astro's bundled sharp service. --> <h2 data-astro-cid-3762csus="">Sharp delegation (non-ImageKit srcs)</h2> <p data-astro-cid-3762csus="">The following cases use srcs that are not ImageKit URLs. The integration delegates them to Astro's default sharp service, so they're served via Astro's <code data-astro-cid-3762csus="">/_image</code> endpoint instead of being rewritten to <code data-astro-cid-3762csus="">ik.imagekit.io</code>.</p> <!-- Local imported asset (Vite-emitted /_astro/ path) --> <div class="example" data-test-id="sharp-local-import" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Local imported asset (sharp)</h3> <img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=300&amp;h=200&amp;f=webp&amp;fit=cover&amp;position=center" srcset="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=300&amp;h=200&amp;f=webp&amp;fit=cover&amp;position=center 300w, /_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center 600w" alt="Local hero image processed by sharp" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 300px) 300px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained" width="300" height="200"> </div> <!-- Allow-listed external URL (in image.domains) --> <div class="example" data-test-id="sharp-external-allowed" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Allow-listed external URL (sharp)</h3> <img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center" srcset="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center 600w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=640&amp;h=427&amp;f=webp&amp;fit=cover&amp;position=center 640w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=750&amp;h=500&amp;f=webp&amp;fit=cover&amp;position=center 750w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=828&amp;h=552&amp;f=webp&amp;fit=cover&amp;position=center 828w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=1080&amp;h=720&amp;f=webp&amp;fit=cover&amp;position=center 1080w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=1200&amp;h=800&amp;f=webp&amp;fit=cover&amp;position=center 1200w" alt="External URL on an allow-listed host, processed by sharp" infersize="false" data-astro-cid-3762csus="true" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 600px) 600px, 100vw" style="--fit: cover; --pos: center;" data-astro-image="constrained" width="600" height="400"> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-5/md.spec.ts/Markdown-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-5/md.spec.ts/Markdown-page-renders-correctly-1.txt
new file mode 100644
index 0000000..af3fea4
--- /dev/null
+++ b/test-app/e2e/__snapshot__/astro-5/md.spec.ts/Markdown-page-renders-correctly-1.txt
@@ -0,0 +1,12 @@
+<div class="container">
+<h2 id="imagekit-url-primary-endpoint-host">ImageKit URL (primary endpoint host)</h2>
+<p><img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1000" alt="Imagekit URL" width="1000" height="1000" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 1000px) 1000px, 100vw" style="" data-astro-image="constrained" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1000 1000w"></p>
+<h2 id="custom-ik-domain-additionalendpoints-host">Custom IK domain (additionalEndpoints host)</h2>
+<p><img src="https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-1000" alt="Another custom IK URL" width="1000" height="1000" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 1000px) 1000px, 100vw" style="" data-astro-image="constrained" srcset="https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-1000 1000w"></p>
+<h2 id="local-imported-asset-delegated-to-sharp">Local imported asset (delegated to sharp)</h2>
+<p><img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=640&amp;h=427&amp;f=webp" alt="Local hero asset" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 640px) 640px, 100vw" style="" data-astro-image="constrained" width="640" height="427" srcset="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=640&amp;h=427&amp;f=webp 640w"></p>
+<h2 id="allow-listed-external-url-delegated-to-sharp">Allow-listed external URL (delegated to sharp)</h2>
+<p><img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp" alt="Allowed external URL" loading="lazy" decoding="async" fetchpriority="auto" sizes="(min-width: 600px) 600px, 100vw" style="" data-astro-image="constrained" width="600" height="400" srcset="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp 600w"></p>
+<h2 id="non-allow-listed-external-url-rendered-as-is-by-astro">Non-allow-listed external URL (rendered as-is by Astro)</h2>
+<p><img src="https://not-allowed-external-as-is.com/creatives/4a3a37e5-f135-4fdd-877f-488570c9d4bb/default.jpg?tr=cm-pad_resize,w-900" alt="Not allowed external URL"></p>
+</div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-5/videos.spec.ts/Videos-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-5/videos.spec.ts/Videos-page-renders-correctly-1.txt
index 65b0d6a..0379f50 100644
--- a/test-app/e2e/__snapshot__/astro-5/videos.spec.ts/Videos-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-5/videos.spec.ts/Videos-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with all props --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with all HTML attributes</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" data-astro-cid-73ne5lbz="true"></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="" loop="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-73ne5lbz="">Edge Case Tests</h2> <p data-astro-cid-73ne5lbz="">Testing extreme values and boundary conditions for video component.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="video-edge-minimal" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Minimal dimensions (1px × 1px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="minimal video 1x1" width="1" height="1" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Large dimensions --> <div class="example" data-test-id="video-edge-large" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Large dimensions (4000px × 2000px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="large video" width="4000" height="2000" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Extreme aspect ratio tall --> <div class="example" data-test-id="video-edge-ratio-tall" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (1:500)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="tall aspect ratio" width="10" height="5000" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Extreme aspect ratio wide --> <div class="example" data-test-id="video-edge-ratio-wide" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (500:1)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="wide aspect ratio" width="5000" height="10" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="video-edge-complex-transformations" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Multiple complex transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:rt-90:q-50:ar-16-9" class="astro-imagekit-video" title="complex transformations" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz="true"></video> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="" loop="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path" with transformations</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz="true"></video> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-6/images.spec.ts/Image-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-6/images.spec.ts/Image-page-renders-correctly-1.txt
index fba8c6f..d0064fc 100644
--- a/test-app/e2e/__snapshot__/astro-6/images.spec.ts/Image-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-6/images.spec.ts/Image-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations.</p> <!-- Basic image with urlEndpoint prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">1. Basic Image with urlEndpoint prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with urlEndpoint prop" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">2. Image with leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with leading slash" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">3. Image with transformation</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max" alt="With transformation" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">4. Image with queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max" alt="Image with queryParameters" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">5. Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Responsive image with sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 600px) 100vw, 50vw" class="astro-imagekit-image"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">6. Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Responsive image with fixed sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px" class="astro-imagekit-image"> </div> <!-- Non-responsive image --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">7. Non-responsive image (responsive=false)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg" alt="Non-responsive image" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" class="astro-imagekit-image"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">8. Image with custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with custom class" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image custom-class"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">9. Image with loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with loading eager" loading="eager" data-astro-cid-3762csus="true" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">10. Image with transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg" alt="Image with path transformation" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">11. Image with transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg" alt="Image with path transformation + custom transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- Custom device breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">12. Image with custom deviceBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with custom device breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Custom image breakpoints --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">13. Image with custom imageBreakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" alt="Image with custom image breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">14. Image with data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with data attributes" data-testid="test-image" data-custom="value" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">15. Image with multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max" alt="Image with multiple chained transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">16. Image with format="avif"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" alt="Image with AVIF format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">17. Image with quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max" alt="Image with high quality preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-80:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">18. Image with quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" alt="Image with numeric quality" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">19. Image with decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with sync decoding" decoding="sync" data-astro-cid-3762csus="true" loading="lazy" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">20. Image with fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with high fetch priority" fetchpriority="high" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">21. Image with densities=[1.5, 2]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Image with density srcset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" class="astro-imagekit-image"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">22. Image with widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with specific widths srcset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">23. Image with layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with constrained layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" style="object-fit: cover; object-position: center; max-width: 100%;" class="astro-imagekit-image"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">24. Image with layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max" alt="Image with full-width layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="full-width" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-960,c-at_max 960w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1280,c-at_max 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1668,c-at_max 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2560,c-at_max 2560w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3200,c-at_max 3200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-4480,c-at_max 4480w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5120,c-at_max 5120w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max 6016w" sizes="100vw" style="object-fit: cover; object-position: center; width: 100%;" class="astro-imagekit-image"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">25. Image with layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with fixed layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="fixed" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 600w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="300px" style="object-fit: cover; object-position: center;" class="astro-imagekit-image"> </div> <!-- Image with fit prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">26. Image with fit="contain"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with contain fit" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="contain" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" style="object-fit: contain; object-position: center; max-width: 100%;" class="astro-imagekit-image"> </div> <!-- Image with position prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">27. Image with position="top left"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Image with top left position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="top-left" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" style="object-fit: cover; object-position: top left; max-width: 100%;" class="astro-imagekit-image"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">28. Image with priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with priority flag" data-astro-cid-3762csus="true" loading="eager" decoding="sync" fetchpriority="high" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">29. Image with inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">30. Image with id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Image with id" id="my-image-id" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- PROPERTY CONFLICT TESTS --> <h2 data-astro-cid-3762csus="">Property Conflict Tests (Invalid Combinations)</h2> <p data-astro-cid-3762csus="">Per Astro docs: These property combinations should not be used together. Testing graceful handling.</p> <!-- densities + layout conflict --> <div class="example" data-test-id="conflict-densities-layout" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">31. CONFLICT: densities + layout (densities should be ignored)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Conflict: densities + layout" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" style="object-fit: cover; object-position: center; max-width: 100%;" class="astro-imagekit-image"> </div> <!-- densities + widths conflict --> <div class="example" data-test-id="conflict-densities-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">32. CONFLICT: densities + widths (only one should be used)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Conflict: densities + widths" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- widths without sizes --> <div class="example" data-test-id="conflict-widths-no-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">33. CONFLICT: widths without sizes (sizes required)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Conflict: widths without sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- layout=fixed + widths --> <div class="example" data-test-id="conflict-fixed-widths" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">34. CONFLICT: layout=fixed + widths (fixed layout shouldn't vary widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Conflict: layout=fixed + widths" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="fixed" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" style="object-fit: cover; object-position: center;" class="astro-imagekit-image"> </div> <!-- layout=none + responsive prop --> <div class="example" data-test-id="conflict-none-layout-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">35. CONFLICT: layout=none + responsive=true (none disables responsiveness)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="Conflict: layout=none + responsive" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- VALID PROPERTY COMBINATIONS --> <h2 data-astro-cid-3762csus="">Valid Property Combinations</h2> <p data-astro-cid-3762csus="">These property combinations work correctly together.</p> <!-- widths + sizes valid --> <div class="example" data-test-id="valid-widths-sizes" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">36. VALID: widths + sizes (responsive with explicit widths)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="Valid: widths + sizes" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-240,c-at_max 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-540,c-at_max 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-720,c-at_max 720w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" class="astro-imagekit-image"> </div> <!-- densities alone valid --> <div class="example" data-test-id="valid-densities-alone" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">37. VALID: densities alone (density-based srcset)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,c-at_max" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-450,c-at_max 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" alt="Valid: densities alone" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" class="astro-imagekit-image"> </div> <!-- layout=constrained + format + quality valid --> <div class="example" data-test-id="valid-layout-format-quality" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">38. VALID: layout=constrained + format + quality</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-3840,c-at_max" alt="Valid: layout + format + quality" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:q-80:w-3840,c-at_max 3840w" sizes="(min-width: 300px) 300px, 100vw" style="object-fit: cover; object-position: center; max-width: 100%;" class="astro-imagekit-image"> </div> <!-- layout=full-width with responsive --> <div class="example" data-test-id="valid-fullwidth-responsive" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">39. VALID: layout=full-width with responsive props</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max" alt="Valid: layout full-width" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="full-width" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-960,c-at_max 960w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1280,c-at_max 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1668,c-at_max 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2560,c-at_max 2560w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3200,c-at_max 3200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-4480,c-at_max 4480w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5120,c-at_max 5120w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-6016,c-at_max 6016w" sizes="100vw" style="object-fit: cover; object-position: center; width: 100%;" class="astro-imagekit-image"> </div> <!-- responsive + ImageKit breakpoints --> <div class="example" data-test-id="valid-responsive-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">40. VALID: responsive=true + ImageKit breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max" alt="Valid: responsive + breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-320,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-600,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-3762csus="">Edge Case Tests</h2> <p data-astro-cid-3762csus="">Testing extreme values and boundary conditions.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="edge-minimal-dimensions" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">41. Minimal dimensions (1px × 1px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max" alt="minimal 1x1" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="1" height="1" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Extreme aspect ratio 1:1000 --> <div class="example" data-test-id="edge-extreme-ratio-tall" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">42. Extreme aspect ratio (1:1000)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max" alt="1:1000 aspect ratio" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="10" height="10000" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Extreme aspect ratio 1000:1 --> <div class="example" data-test-id="edge-extreme-ratio-wide" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">43. Extreme aspect ratio (1000:1)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="1000:1 aspect ratio" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="10000" height="10" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">44. Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max" alt="quality 0" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-0:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">45. Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" alt="quality 100" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">46. Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max" alt="webp format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-webp:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">47. Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max" alt="avif format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-avif:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">48. Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max" alt="svg format" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=f-svg:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">49. Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max" alt="complex transformations" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">50. transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg" alt="transformation path position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:w-640,c-at_max/default-image.jpg 2x" class="astro-imagekit-image"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">51. transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max" alt="transformation query position" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Large width boundary test --> <div class="example" data-test-id="edge-large-width" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">52. Large width (5000px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max" alt="5000px width" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="5000" height="5000" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 1x" class="astro-imagekit-image"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">53. Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max" alt="quality low preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-30:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">54. Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max" alt="quality mid preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-50:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">55. Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max" alt="quality max preset" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=q-100:w-640,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive with custom device breakpoints edge case --> <div class="example" data-test-id="edge-device-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">56. Responsive with extreme device breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max" alt="device breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-5000,c-at_max 2x" class="astro-imagekit-image"> </div> <!-- Responsive with custom image breakpoints edge case --> <div class="example" data-test-id="edge-image-breakpoints" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">57. Responsive with extreme image breakpoints</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" alt="image breakpoints" data-astro-cid-3762csus="true" loading="lazy" decoding="async" width="300" height="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 1x" class="astro-imagekit-image"> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-3762csus=""> <h1 data-astro-cid-3762csus="">Image Component Tests</h1> <p data-astro-cid-3762csus="">Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations. The <code data-astro-cid-3762csus="">urlEndpoint</code> is configured globally in <code data-astro-cid-3762csus="">astro.config.mjs</code>; cases below only pass it explicitly when overriding it.</p> <!-- Basic image (urlEndpoint comes from astro.config.mjs) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Basic image (urlEndpoint from integration config)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-10 10w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-20 20w" alt="Basic image" width="10" height="10" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 10px) 10px, 100vw" data-astro-image="constrained" data-astro-image-fit="contain" data-astro-image-pos="top-left"> </div> <!-- urlEndpoint prop override --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">urlEndpoint prop override</h3> <img src="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo2/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with urlEndpoint override" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with leading slash in src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Leading slash in src</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with leading slash" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Absolute URL src --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Absolute URL src (urlEndpoint ignored, transformations still applied)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Absolute URL src" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with transformation --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Transformation prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:c-at_max,w-600 600w" alt="With transformation" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with queryParameters --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">queryParameters prop</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:c-at_max,w-600 600w" alt="Image with queryParameters" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Responsive image with sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with sizes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Responsive image with sizes" sizes="(max-width: 600px) 100vw, 50vw" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Responsive image with fixed sizes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Responsive image with fixed sizes (300px)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Responsive image with fixed sizes" sizes="300px" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with custom class --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Custom class</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with custom class" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" class="custom-class"> </div> <!-- Lazy loading eager --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">loading="eager"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with loading eager" loading="eager" width="300" height="300" data-astro-cid-3762csus="true" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Transformation position path --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path"</h3> <img src="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:c-at_max,w-600/default-image.jpg 600w" alt="Image with path transformation" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Transformation position path with custom transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + custom transformations</h3> <img src="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:h-100,w-100:c-at_max,w-600/default-image.jpg 600w" alt="Image with path transformation + custom transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with data attributes --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Data attributes</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with data attributes" data-testid="test-image" data-custom="value" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with multiple transformations --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple chained transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-90:bl-5:c-at_max,w-600 600w" alt="Image with multiple chained transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- ASTRO IMAGE COMPONENT SPECIFIC PROPS --> <h2 data-astro-cid-3762csus="">Astro Image Component Props</h2> <p data-astro-cid-3762csus="">The following tests verify that Astro's built-in Image component props work correctly with Image.</p> <!-- Image with format prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">format="avif" ignored</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with AVIF format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with quality prop (preset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-75 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-75 600w" alt="Image with high quality preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with quality prop (number) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">quality=50</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-50 600w" alt="Image with numeric quality" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with decoding prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">decoding="sync"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with sync decoding" decoding="sync" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with fetchpriority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">fetchpriority="high"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with high fetch priority" fetchpriority="high" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with densities prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">densities=[1.5, 2] (requires layout="none" to override config default)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-450 1.5x, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 2x" alt="Image with density srcset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async"> </div> <!-- Image with widths prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">widths=[240, 540, 720]</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-240 240w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-540 540w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-720 720w" alt="Image with specific widths srcset" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with layout="constrained" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="constrained"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with constrained layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with layout="full-width" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="full-width"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1080 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1280 1280w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1668 1668w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-2048 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-2560 2560w" alt="Image with full-width layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="100vw" data-astro-image="full-width" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with layout="fixed" --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="fixed"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with fixed layout" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="300px" data-astro-image="fixed" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with layout="none" (turns off responsive srcset) --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">layout="none" (responsive off)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" alt="Image with responsive off" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async"> </div> <!-- Image with priority prop --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">priority (eager loading shorthand)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with priority flag" width="300" height="300" data-astro-cid-3762csus="true" loading="eager" decoding="sync" fetchpriority="high" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with style attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Inline style</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with inline style" style="border: 3px solid red; border-radius: 10px;" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Image with id attribute --> <div class="example" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">id attribute</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="Image with id" id="my-image-id" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Quality boundary: 0 --> <div class="example" data-test-id="edge-quality-0" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 0 (minimum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-0 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-0 600w" alt="quality 0" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Quality boundary: 100 --> <div class="example" data-test-id="edge-quality-100" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality = 100 (maximum)</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-100 600w" alt="quality 100" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Format: webp --> <div class="example" data-test-id="edge-format-webp" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = webp</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="webp format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Format: avif --> <div class="example" data-test-id="edge-format-avif" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = avif</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="avif format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Format: svg --> <div class="example" data-test-id="edge-format-svg" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Format = svg</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600 600w" alt="svg format" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="edge-complex-transformations" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Multiple complex transformations</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,h-200:rt-45:bl-10:q-50:overlayText-WATERMARK:c-at_max,w-600 600w" alt="complex transformations" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- transformationPosition path with transformations --> <div class="example" data-test-id="edge-transform-position-path" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="path" + transformations</h3> <img src="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg" srcset="https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-300/default-image.jpg 300w, https://ik.imagekit.io/demo/tr:w-200,h-200:q-75:c-at_max,w-600/default-image.jpg 600w" alt="transformation path position" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- transformationPosition query with complex query params --> <div class="example" data-test-id="edge-transform-position-query" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">transformationPosition="query" + queryParameters</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-300 300w, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;custom=param&amp;tr=w-200,h-200:c-at_max,w-600 600w" alt="transformation query position" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Quality as string preset --> <div class="example" data-test-id="edge-quality-preset-low" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "low"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-25 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-25 600w" alt="quality low preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Quality as string preset mid --> <div class="example" data-test-id="edge-quality-preset-mid" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "mid"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-50 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-50 600w" alt="quality mid preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- Quality as string preset max --> <div class="example" data-test-id="edge-quality-preset-max" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Quality preset = "max"</h3> <img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-300,q-100 300w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-600,q-100 600w" alt="quality max preset" width="300" height="300" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center"> </div> <!-- SHARP DELEGATION: non-IK srcs are routed through Astro's bundled sharp service. --> <h2 data-astro-cid-3762csus="">Sharp delegation (non-ImageKit srcs)</h2> <p data-astro-cid-3762csus="">The following cases use srcs that are not ImageKit URLs. The integration delegates them to Astro's default sharp service, so they're served via Astro's <code data-astro-cid-3762csus="">/_image</code> endpoint instead of being rewritten to <code data-astro-cid-3762csus="">ik.imagekit.io</code>.</p> <!-- Local imported asset (Vite-emitted /_astro/ path) --> <div class="example" data-test-id="sharp-local-import" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Local imported asset (sharp)</h3> <img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=300&amp;h=200&amp;f=webp&amp;fit=cover&amp;position=center" srcset="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=300&amp;h=200&amp;f=webp&amp;fit=cover&amp;position=center 300w, /_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center 600w" alt="Local hero image processed by sharp" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 300px) 300px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="300" height="200"> </div> <!-- Allow-listed external URL (in image.domains) --> <div class="example" data-test-id="sharp-external-allowed" data-astro-cid-3762csus=""> <h3 data-astro-cid-3762csus="">Allow-listed external URL (sharp)</h3> <img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center" srcset="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp&amp;fit=cover&amp;position=center 600w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=640&amp;h=427&amp;f=webp&amp;fit=cover&amp;position=center 640w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=750&amp;h=500&amp;f=webp&amp;fit=cover&amp;position=center 750w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=828&amp;h=552&amp;f=webp&amp;fit=cover&amp;position=center 828w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=1080&amp;h=720&amp;f=webp&amp;fit=cover&amp;position=center 1080w, /_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=1200&amp;h=800&amp;f=webp&amp;fit=cover&amp;position=center 1200w" alt="External URL on an allow-listed host, processed by sharp" infersize="false" data-astro-cid-3762csus="true" loading="lazy" decoding="async" sizes="(min-width: 600px) 600px, 100vw" data-astro-image="constrained" data-astro-image-fit="cover" data-astro-image-pos="center" width="600" height="400"> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-6/md.spec.ts/Markdown-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-6/md.spec.ts/Markdown-page-renders-correctly-1.txt
new file mode 100644
index 0000000..d7a8b6f
--- /dev/null
+++ b/test-app/e2e/__snapshot__/astro-6/md.spec.ts/Markdown-page-renders-correctly-1.txt
@@ -0,0 +1,12 @@
+<div class="container">
+<h2 id="imagekit-url-primary-endpoint-host">ImageKit URL (primary endpoint host)</h2>
+<p><img src="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1000" alt="Imagekit URL" width="1000" height="1000" loading="lazy" decoding="async" sizes="(min-width: 1000px) 1000px, 100vw" data-astro-image="constrained" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=c-at_max,w-1000 1000w"></p>
+<h2 id="custom-ik-domain-additionalendpoints-host">Custom IK domain (additionalEndpoints host)</h2>
+<p><img src="https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-1000" alt="Another custom IK URL" width="1000" height="1000" loading="lazy" decoding="async" sizes="(min-width: 1000px) 1000px, 100vw" data-astro-image="constrained" srcset="https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-640 640w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-750 750w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-828 828w, https://ik.imgkit.net/demo/default-image.jpg?tr=c-at_max,w-1000 1000w"></p>
+<h2 id="local-imported-asset-delegated-to-sharp">Local imported asset (delegated to sharp)</h2>
+<p><img src="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=640&amp;h=427&amp;f=webp" alt="Local hero asset" loading="lazy" decoding="async" sizes="(min-width: 640px) 640px, 100vw" data-astro-image="constrained" width="640" height="427" srcset="/_image?href=%2F_astro%2Fhero.CfX7EzL3.jpg&amp;w=640&amp;h=427&amp;f=webp 640w"></p>
+<h2 id="allow-listed-external-url-delegated-to-sharp">Allow-listed external URL (delegated to sharp)</h2>
+<p><img src="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp" alt="Allowed external URL" loading="lazy" decoding="async" sizes="(min-width: 600px) 600px, 100vw" data-astro-image="constrained" width="600" height="400" srcset="/_image?href=https%3A%2F%2Fplacehold.co%2F600x400&amp;w=600&amp;h=400&amp;f=webp 600w"></p>
+<h2 id="non-allow-listed-external-url-rendered-as-is-by-astro">Non-allow-listed external URL (rendered as-is by Astro)</h2>
+<p><img src="https://not-allowed-external-as-is.com/creatives/4a3a37e5-f135-4fdd-877f-488570c9d4bb/default.jpg?tr=cm-pad_resize,w-900" alt="Not allowed external URL"></p>
+</div>
\ No newline at end of file
diff --git a/test-app/e2e/__snapshot__/astro-6/videos.spec.ts/Videos-page-renders-correctly-1.txt b/test-app/e2e/__snapshot__/astro-6/videos.spec.ts/Videos-page-renders-correctly-1.txt
index 65b0d6a..0379f50 100644
--- a/test-app/e2e/__snapshot__/astro-6/videos.spec.ts/Videos-page-renders-correctly-1.txt
+++ b/test-app/e2e/__snapshot__/astro-6/videos.spec.ts/Videos-page-renders-correctly-1.txt
@@ -1 +1 @@
-<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with all props --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with all HTML attributes</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" data-astro-cid-73ne5lbz="true"></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="" loop="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- EDGE CASE TESTS --> <h2 data-astro-cid-73ne5lbz="">Edge Case Tests</h2> <p data-astro-cid-73ne5lbz="">Testing extreme values and boundary conditions for video component.</p> <!-- Minimal dimensions 1px x 1px --> <div class="example" data-test-id="video-edge-minimal" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Minimal dimensions (1px × 1px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="minimal video 1x1" width="1" height="1" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Large dimensions --> <div class="example" data-test-id="video-edge-large" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Large dimensions (4000px × 2000px)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="large video" width="4000" height="2000" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Extreme aspect ratio tall --> <div class="example" data-test-id="video-edge-ratio-tall" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (1:500)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="tall aspect ratio" width="10" height="5000" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Extreme aspect ratio wide --> <div class="example" data-test-id="video-edge-ratio-wide" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Extreme aspect ratio (500:1)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="wide aspect ratio" width="5000" height="10" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Multiple complex transformations --> <div class="example" data-test-id="video-edge-complex-transformations" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Multiple complex transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:rt-90:q-50:ar-16-9" class="astro-imagekit-video" title="complex transformations" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz="true"></video> </div> </div>
\ No newline at end of file
+<div class="container" data-astro-cid-73ne5lbz=""> <h1 data-astro-cid-73ne5lbz="">Video Component Tests</h1> <!-- Basic video with urlEndpoint prop --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Basic Video with urlEndpoint prop</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with urlEndpoint prop" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with leading slash in src --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with leading slash in src</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Video with leading slash" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- urlEndpoint override --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with different urlEndpoint</h3> <video src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100" class="astro-imagekit-video" title="Video with urlEndpoint override" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with transformationPosition="path"</h3> <video src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4" class="astro-imagekit-video" title="Video with path transformation" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with custom class --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with custom class</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video custom-video-class" title="Video with custom class" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with queryParameters --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2" class="astro-imagekit-video" title="Video with queryParameters" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video with chained transformations --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video with chained transformations</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?tr=w-200,h-200:q-80" class="astro-imagekit-video" title="Video with chained transformations" height="300" width="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- Video without controls (for autoplay scenarios) --> <div class="example" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">Video without controls (autoplay, muted, loop)</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="Autoplay video" height="200" width="300" autoplay="" muted="" loop="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="path" with transformations --> <div class="example" data-test-id="video-edge-transform-path" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="path" with transformations</h3> <video src="https://ik.imagekit.io/demo/tr:w-200,h-200/sample-video.mp4" class="astro-imagekit-video" title="path transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- transformationPosition="query" with queryParameters --> <div class="example" data-test-id="video-edge-transform-query" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">transformationPosition="query" + queryParameters</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4?version=v2&amp;custom=value" class="astro-imagekit-video" title="query transformation position" width="300" height="300" controls="" data-astro-cid-73ne5lbz="true"></video> </div> <!-- All HTML video attributes together --> <div class="example" data-test-id="video-edge-all-attributes" data-astro-cid-73ne5lbz=""> <h3 data-astro-cid-73ne5lbz="">All HTML attributes combined</h3> <video src="https://ik.imagekit.io/demo/sample-video.mp4" class="astro-imagekit-video" title="all attributes" width="300" height="300" controls="" autoplay="" loop="" muted="" preload="metadata" crossorigin="anonymous" data-test="custom-attribute" data-astro-cid-73ne5lbz="true"></video> </div> </div>
\ No newline at end of file
diff --git a/test-app/e2e/fixtures.ts b/test-app/e2e/fixtures.ts
deleted file mode 100644
index ddf0efe..0000000
--- a/test-app/e2e/fixtures.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { test as base, expect } from '@playwright/test';
-import { createRequire } from 'module';
-export { expect };
-
-function getInstalledAstroVersion(): string {
-  try {
-    const require = createRequire(import.meta.url);
-    const astroPkg = require('astro/package.json');
-    return astroPkg.version;
-  } catch {
-    return 'latest';
-  }
-}
-
-export type AstroVersionFixture = {
-  astroVersion: string;
-};
-
-export const test = base.extend<AstroVersionFixture>({
-  // eslint-disable-next-line no-empty-pattern
-    astroVersion: async ({}, use) => {
-    const version = getInstalledAstroVersion();
-    await use(version);
-  },
-});
-
-export function parseVersion(version: string): [number, number, number] {
-  const parts = version.split('.').map((v) => parseInt(v, 10) || 0);
-  if (parts.length === 1) {
-    return [parts[0], 0, 0];
-  }
-  if (parts.length === 2) {
-    return [parts[0], parts[1], 0];
-  }
-  return parts.slice(0, 3) as [number, number, number];
-}
-
-export function isVersionBelow(
-  currentVersion: string,
-  minVersion: string
-): boolean {
-  const current = parseVersion(currentVersion);
-  const min = parseVersion(minVersion);
-
-  for (let i = 0; i < 3; i++) {
-    if (current[i] < min[i]) return true;
-    if (current[i] > min[i]) return false;
-  }
-  return false;
-}
-
-export function skipIfAstroVersionBelow(
-  currentVersion: string,
-  minVersion: string
-): boolean {
-  return isVersionBelow(currentVersion, minVersion);
-}
diff --git a/test-app/e2e/images.spec.ts b/test-app/e2e/images.spec.ts
index 1f724a5..422c16c 100644
--- a/test-app/e2e/images.spec.ts
+++ b/test-app/e2e/images.spec.ts
@@ -1,649 +1,17 @@
-import { test, expect, skipIfAstroVersionBelow } from "./fixtures";
+import { test, expect } from "@playwright/test";
 
 test("Image page renders correctly", async ({ page }) => {
   await page.goto("/images");
 
-  // Scroll to the bottom of the page to trigger lazy loading
+  // Scroll to the bottom to trigger lazy loading
   await page.evaluate(() => {
     window.scrollTo(0, document.body.scrollHeight);
   });
 
-  await page.waitForTimeout(2000); // Wait for images to load
+  await page.waitForTimeout(2000);
 
-  // Locate the container element
-  const container = page.locator('.container');
+  const container = page.locator(".container");
+  const outputHtml = await container.evaluate((el) => el.outerHTML);
 
-  // Grab the entire HTML from the element
-  const outputHtml = await container.evaluate(el => el.outerHTML);
-
-  // Compare against a stored snapshot
   expect(outputHtml).toMatchSnapshot();
 });
-
-test("Image renders with correct class", async ({ page }) => {
-  await page.goto("/images");
-
-  // Check that Image has the correct base class
-  const images = page.locator('img.astro-imagekit-image');
-  const count = await images.count();
-  expect(count).toBeGreaterThan(0);
-});
-
-test("Image with custom class has both classes", async ({ page }) => {
-  await page.goto("/images");
-
-  // Check for image with custom class
-  const imageWithCustomClass = page.locator('img.astro-imagekit-image.custom-class');
-  await expect(imageWithCustomClass).toBeVisible();
-});
-
-test("Image generates srcset for responsive images", async ({ page }) => {
-  await page.goto("/images");
-
-  // Get the first responsive image (example 1)
-  const responsiveImage = page.locator('.example').nth(0).locator('img');
-  const srcset = await responsiveImage.getAttribute('srcset');
-
-  // Responsive images should have srcset
-  expect(srcset).toBeTruthy();
-  expect(srcset).toContain('ik.imagekit.io');
-});
-
-test("Image non-responsive does not generate srcset", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 7 is non-responsive
-  const nonResponsiveImage = page.locator('.example').nth(6).locator('img');
-  const srcset = await nonResponsiveImage.getAttribute('srcset');
-
-  // Non-responsive images should not have srcset
-  expect(srcset).toBeFalsy();
-});
-
-test("Image with transformations generates correct URL", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 3 has transformation
-  const transformedImage = page.locator('.example').nth(2).locator('img');
-  const src = await transformedImage.getAttribute('src');
-
-  // src should contain transformation parameters
-  expect(src).toContain('ik.imagekit.io');
-  expect(src).toContain('tr=');
-});
-
-test("Image with queryParameters includes them in URL", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 4 has queryParameters
-  const imageWithQuery = page.locator('.example').nth(3).locator('img');
-  const src = await imageWithQuery.getAttribute('src');
-
-  // src should contain query parameter
-  expect(src).toContain('version=v1');
-});
-
-test("Image with loading=eager has correct attribute", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 9 has loading="eager"
-  const eagerImage = page.locator('.example').nth(8).locator('img');
-  const loading = await eagerImage.getAttribute('loading');
-
-  expect(loading).toBe('eager');
-});
-
-test("Image with data attributes preserves them", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 14 has data attributes
-  const imageWithData = page.locator('.example').nth(13).locator('img');
-  const testId = await imageWithData.getAttribute('data-testid');
-  const customAttr = await imageWithData.getAttribute('data-custom');
-
-  expect(testId).toBe('test-image');
-  expect(customAttr).toBe('value');
-});
-
-test("Image with transformationPosition=path uses path transformation", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 11 has transformationPosition="path" with transformations
-  const pathImage = page.locator('.example').nth(10).locator('img');
-  const src = await pathImage.getAttribute('src');
-
-  // Path transformations should have tr: in the path, not ?tr=
-  expect(src).toContain('/tr:');
-});
-
-// ============================================
-// ASTRO IMAGE COMPONENT PROPS TESTS
-// ============================================
-
-test("Image with decoding=sync has correct attribute", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 19 has decoding="sync"
-  const syncDecodingImage = page.locator('.example').nth(18).locator('img');
-  const decoding = await syncDecodingImage.getAttribute('decoding');
-
-  expect(decoding).toBe('sync');
-});
-
-test("Image with fetchpriority=high has correct attribute", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 20 has fetchpriority="high"
-  const highPriorityImage = page.locator('.example').nth(19).locator('img');
-  const fetchpriority = await highPriorityImage.getAttribute('fetchpriority');
-
-  expect(fetchpriority).toBe('high');
-});
-
-test("Image with densities generates density-based srcset", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 21 has densities=[1.5, 2]
-  const densitiesImage = page.locator('.example').nth(20).locator('img');
-  const srcset = await densitiesImage.getAttribute('srcset');
-
-  // Should contain density descriptors (1.5x, 2x)
-  expect(srcset).toBeTruthy();
-  if (srcset) {
-    expect(srcset).toMatch(/\d+(\.\d+)?x/);
-  }
-});
-
-test("Image with widths generates width-based srcset", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 22 has widths=[240, 540, 720]
-  const widthsImage = page.locator('.example').nth(21).locator('img');
-  const srcset = await widthsImage.getAttribute('srcset');
-  const sizes = await widthsImage.getAttribute('sizes');
-
-  // Should contain width descriptors (240w, 540w, 720w)
-  expect(srcset).toBeTruthy();
-  expect(sizes).toBeTruthy();
-  if (srcset) {
-    expect(srcset).toMatch(/\d+w/);
-  }
-});
-
-test("Image with layout=constrained has correct data attribute", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 23 has layout="constrained"
-  const constrainedImage = page.locator('.example').nth(22).locator('img');
-  const dataAstroImage = await constrainedImage.getAttribute('data-astro-image');
-
-  expect(dataAstroImage).toBe('constrained');
-});
-
-test("Image with layout=full-width has correct data attribute", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 24 has layout="full-width"
-  const fullWidthImage = page.locator('.example').nth(23).locator('img');
-  const dataAstroImage = await fullWidthImage.getAttribute('data-astro-image');
-
-  expect(dataAstroImage).toBe('full-width');
-});
-
-test("Image with layout=fixed has correct data attribute", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 25 has layout="fixed"
-  const fixedImage = page.locator('.example').nth(24).locator('img');
-  const dataAstroImage = await fixedImage.getAttribute('data-astro-image');
-
-  expect(dataAstroImage).toBe('fixed');
-});
-
-test("Image with fit=contain has correct style", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 26 has fit="contain"
-  const containFitImage = page.locator('.example').nth(25).locator('img');
-  const style = await containFitImage.getAttribute('style');
-
-  // Should have object-fit CSS property set to contain
-  expect(style).toContain('object-fit');
-  expect(style).toContain('contain');
-});
-
-test("Image with position prop has correct style", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 27 has position="top left"
-  const positionImage = page.locator('.example').nth(26).locator('img');
-  const style = await positionImage.getAttribute('style');
-
-  // Should have object-position CSS property set to top left
-  expect(style).toContain('object-position');
-  expect(style).toContain('top left');
-});
-
-test("Image with priority has eager loading attributes", async ({ page, astroVersion }) => {
-  test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-  await page.goto("/images");
-
-  // Example 28 has priority flag
-  const priorityImage = page.locator('.example').nth(27).locator('img');
-  const loading = await priorityImage.getAttribute('loading');
-  const decoding = await priorityImage.getAttribute('decoding');
-  const fetchpriority = await priorityImage.getAttribute('fetchpriority');
-
-  // priority should set loading="eager", decoding="sync", fetchpriority="high"
-  expect(loading).toBe('eager');
-  expect(decoding).toBe('sync');
-  expect(fetchpriority).toBe('high');
-});
-
-test("Image with inline style preserves style attribute", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 29 has inline style
-  const styledImage = page.locator('.example').nth(28).locator('img');
-  const style = await styledImage.getAttribute('style');
-
-  expect(style).toContain('border');
-  expect(style).toContain('border-radius');
-});
-
-test("Image with id attribute preserves it", async ({ page }) => {
-  await page.goto("/images");
-
-  // Example 30 has id attribute
-  const imageWithId = page.locator('#my-image-id');
-  await expect(imageWithId).toBeVisible();
-});
-
-// ============================================
-// PROPERTY CONFLICT TESTS (Examples 31-35)
-// ============================================
-
-test.describe('Property Conflict Tests', () => {
-  test('CONFLICT: densities + layout should handle gracefully', async ({ page, astroVersion }) => {
-    test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-    await page.goto("/images");
-
-    // Example 31: densities + layout conflict
-    const conflictImage = page.locator('[data-test-id="conflict-densities-layout"]').locator('img');
-
-    // Image should still render
-    await expect(conflictImage).toBeVisible();
-
-    // Per Astro docs, when layout is set, densities should be ignored
-    // The image should use layout-based srcset, not density-based
-    const dataAstroImage = await conflictImage.getAttribute('data-astro-image');
-    expect(dataAstroImage).toBe('constrained');
-  });
-
-  test('CONFLICT: densities + widths should only use one', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 32: densities + widths conflict
-    const conflictImage = page.locator('[data-test-id="conflict-densities-widths"]').locator('img');
-    
-    // Image should render
-    await expect(conflictImage).toBeVisible();
-    
-    // Should have srcset (either from widths or densities, not both)
-    const srcset = await conflictImage.getAttribute('srcset');
-    expect(srcset).toBeTruthy();
-  });
-
-  test('CONFLICT: widths without sizes should handle gracefully', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 33: widths without sizes
-    const conflictImage = page.locator('[data-test-id="conflict-widths-no-sizes"]').locator('img');
-    
-    // Image should render
-    await expect(conflictImage).toBeVisible();
-    
-    // sizes might be auto-generated or srcset might not be present
-    // The important thing is no errors occur
-    const alt = await conflictImage.getAttribute('alt');
-    expect(alt).toBeTruthy();
-  });
-
-  test('CONFLICT: layout=fixed + widths should not generate width variants', async ({ page, astroVersion }) => {
-    test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-    await page.goto("/images");
-
-    // Example 34: layout=fixed + widths
-    const conflictImage = page.locator('[data-test-id="conflict-fixed-widths"]').locator('img');
-
-    // Image should render
-    await expect(conflictImage).toBeVisible();
-
-    // Should have data-astro-image="fixed"
-    const dataAstroImage = await conflictImage.getAttribute('data-astro-image');
-    expect(dataAstroImage).toBe('fixed');
-  });
-
-  test('CONFLICT: layout=none + responsive should disable responsiveness', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 35: layout=none + responsive
-    const conflictImage = page.locator('[data-test-id="conflict-none-layout-responsive"]').locator('img');
-    
-    // Image should render
-    await expect(conflictImage).toBeVisible();
-    
-    // layout="none" should not generate srcset or data-astro-image attribute
-    const dataAstroImage = await conflictImage.getAttribute('data-astro-image');
-    // With layout=none, data-astro-image might not be present or be null
-    expect(dataAstroImage).toBeNull();
-  });
-});
-
-// ============================================
-// VALID PROPERTY COMBINATION TESTS (Examples 36-40)
-// ============================================
-
-test.describe('Valid Property Combinations', () => {
-  test('VALID: widths + sizes should generate proper srcset', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 36: widths + sizes (valid combination)
-    const validImage = page.locator('[data-test-id="valid-widths-sizes"]').locator('img');
-
-    await expect(validImage).toBeVisible();
-
-    const srcset = await validImage.getAttribute('srcset');
-    const sizes = await validImage.getAttribute('sizes');
-
-    // Both should exist
-    expect(srcset).toBeTruthy();
-    expect(sizes).toBeTruthy();
-
-    // srcset should contain width descriptors
-    if (srcset) {
-      expect(srcset).toMatch(/\d+w/);
-    }
-  });
-
-  test('VALID: densities alone should generate density-based srcset', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 37: densities alone (valid)
-    const validImage = page.locator('[data-test-id="valid-densities-alone"]').locator('img');
-    
-    await expect(validImage).toBeVisible();
-    
-    const srcset = await validImage.getAttribute('srcset');
-    
-    // Should have density descriptors
-    expect(srcset).toBeTruthy();
-    if (srcset) {
-      expect(srcset).toMatch(/\d+(\.\d+)?x/);
-    }
-  });
-
-  test('VALID: layout + format + quality should work together', async ({ page, astroVersion }) => {
-    test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-    await page.goto("/images");
-
-    // Example 38: layout + format + quality (valid)
-    const validImage = page.locator('[data-test-id="valid-layout-format-quality"]').locator('img');
-
-    await expect(validImage).toBeVisible();
-
-    // Should have constrained layout
-    const dataAstroImage = await validImage.getAttribute('data-astro-image');
-    expect(dataAstroImage).toBe('constrained');
-
-    // URL should contain format and quality parameters
-    const src = await validImage.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-  });
-
-  test('VALID: layout=full-width with responsive props', async ({ page, astroVersion }) => {
-    test.skip(skipIfAstroVersionBelow(astroVersion, '5.10.0'), 'Requires Astro 5.10.0+ for stable responsive images');
-    await page.goto("/images");
-
-    // Example 39: layout=full-width
-    const validImage = page.locator('[data-test-id="valid-fullwidth-responsive"]').locator('img');
-
-    await expect(validImage).toBeVisible();
-
-    // Should have full-width layout
-    const dataAstroImage = await validImage.getAttribute('data-astro-image');
-    expect(dataAstroImage).toBe('full-width');
-
-    // Should generate srcset for responsive behavior
-    const srcset = await validImage.getAttribute('srcset');
-    expect(srcset).toBeTruthy();
-  });
-
-  test('VALID: responsive=true + ImageKit breakpoints', async ({ page }) => {
-    await page.goto("/images");
-
-    // Example 40: responsive + breakpoints (valid)
-    const validImage = page.locator('[data-test-id="valid-responsive-breakpoints"]').locator('img');
-    
-    await expect(validImage).toBeVisible();
-    
-    // Should have srcset due to responsive=true
-    const srcset = await validImage.getAttribute('srcset');
-    expect(srcset).toBeTruthy();
-  });
-});
-
-// ============================================
-// EDGE CASE TESTS (Examples 41-57)
-// ============================================
-
-test.describe('Edge Case Tests - Dimensions', () => {
-  test('Minimal dimensions (1px × 1px)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-minimal-dimensions"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const width = await edgeImage.getAttribute('width');
-    expect(width).toBe('1');
-  });
-
-  test('Extreme aspect ratio (1:1000)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-extreme-ratio-tall"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const height = await edgeImage.getAttribute('height');
-    expect(height).toBe('10000');
-  });
-
-  test('Extreme aspect ratio (1000:1)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-extreme-ratio-wide"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const width = await edgeImage.getAttribute('width');
-    expect(width).toBe('10000');
-  });
-
-  test('Large width (5000px)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-large-width"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const width = await edgeImage.getAttribute('width');
-    expect(width).toBe('5000');
-  });
-});
-
-test.describe('Edge Case Tests - Quality', () => {
-  test('Quality = 0 (minimum)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-quality-0"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Should render without error even with minimum quality
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toBeTruthy();
-  });
-
-  test('Quality = 100 (maximum)', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-quality-100"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Should render without error even with maximum quality
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toBeTruthy();
-  });
-
-  test('Quality preset = "low"', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-quality-preset-low"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-  });
-
-  test('Quality preset = "mid"', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-quality-preset-mid"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-  });
-
-  test('Quality preset = "max"', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-quality-preset-max"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-  });
-});
-
-test.describe('Edge Case Tests - Formats', () => {
-  test('Format = webp', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-format-webp"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toBeTruthy();
-  });
-
-  test('Format = avif', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-format-avif"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toBeTruthy();
-  });
-
-  test('Format = svg', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-format-svg"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toBeTruthy();
-  });
-});
-
-test.describe('Edge Case Tests - Transformations', () => {
-  test('Multiple complex transformations', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-complex-transformations"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Should contain transformation parameters in URL
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-    expect(src).toContain('tr=');
-  });
-
-  test('transformationPosition="path"', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-transform-position-path"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Path transformations should use /tr: syntax
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('/tr:');
-  });
-
-  test('transformationPosition="query"', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-transform-position-query"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Query transformations should use ?tr= syntax or query params
-    const src = await edgeImage.getAttribute('src');
-    expect(src).toContain('?');
-  });
-});
-
-test.describe('Edge Case Tests - Responsive Breakpoints', () => {
-  test('Extreme device breakpoints', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-device-breakpoints"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Should generate srcset with extreme breakpoints
-    const srcset = await edgeImage.getAttribute('srcset');
-    expect(srcset).toBeTruthy();
-  });
-
-  test('Extreme image breakpoints', async ({ page }) => {
-    await page.goto("/images");
-
-    const edgeImage = page.locator('[data-test-id="edge-image-breakpoints"]').locator('img');
-    
-    await expect(edgeImage).toBeVisible();
-    
-    // Should generate srcset with extreme breakpoints
-    const srcset = await edgeImage.getAttribute('srcset');
-    expect(srcset).toBeTruthy();
-  });
-});
-
diff --git a/test-app/e2e/md.spec.ts b/test-app/e2e/md.spec.ts
new file mode 100644
index 0000000..3d2d938
--- /dev/null
+++ b/test-app/e2e/md.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+
+test("Markdown page renders correctly", async ({ page }) => {
+  await page.goto("/md");
+
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  await page.waitForTimeout(2000);
+
+  const container = page.locator(".container");
+  const outputHtml = await container.evaluate((el) => el.outerHTML);
+
+  expect(outputHtml).toMatchSnapshot();
+});
diff --git a/test-app/e2e/og.spec.ts b/test-app/e2e/og.spec.ts
new file mode 100644
index 0000000..d8ab253
--- /dev/null
+++ b/test-app/e2e/og.spec.ts
@@ -0,0 +1,61 @@
+import { test, expect } from "@playwright/test";
+
+test("OG page emits expected meta tags", async ({ page }) => {
+  await page.goto("/og");
+
+  const IK_URL = "https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,h-630";
+  const ALT = "Default ImageKit demo image";
+
+  await expect(page.locator('meta[property="og:title"]')).toHaveAttribute(
+    "content",
+    "Hello from @imagekit/astro",
+  );
+  await expect(page.locator('meta[property="og:type"]')).toHaveAttribute(
+    "content",
+    "article",
+  );
+  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
+    "content",
+    IK_URL,
+  );
+  await expect(
+    page.locator('meta[property="og:image:secure_url"]'),
+  ).toHaveAttribute("content", IK_URL);
+  await expect(page.locator('meta[property="og:image:width"]')).toHaveAttribute(
+    "content",
+    "1200",
+  );
+  await expect(page.locator('meta[property="og:image:height"]')).toHaveAttribute(
+    "content",
+    "630",
+  );
+  await expect(page.locator('meta[property="og:image:alt"]')).toHaveAttribute(
+    "content",
+    ALT,
+  );
+
+  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute(
+    "content",
+    "summary_large_image",
+  );
+  await expect(page.locator('meta[name="twitter:title"]')).toHaveAttribute(
+    "content",
+    "Hello from @imagekit/astro",
+  );
+  await expect(page.locator('meta[name="twitter:image"]')).toHaveAttribute(
+    "content",
+    IK_URL,
+  );
+  await expect(page.locator('meta[name="twitter:image:alt"]')).toHaveAttribute(
+    "content",
+    ALT,
+  );
+
+  // Helper-built escape hatch URL — full match
+  await expect(
+    page.locator('meta[property="og:image:secondary"]'),
+  ).toHaveAttribute(
+    "content",
+    "https://ik.imagekit.io/demo/default-image.jpg?tr=bl-5:w-1200,h-630",
+  );
+});
diff --git a/test-app/e2e/videos.spec.ts b/test-app/e2e/videos.spec.ts
index 26cdf82..a552be0 100644
--- a/test-app/e2e/videos.spec.ts
+++ b/test-app/e2e/videos.spec.ts
@@ -3,132 +3,15 @@ import { test, expect } from "@playwright/test";
 test("Videos page renders correctly", async ({ page }) => {
   await page.goto("/videos");
 
-  // Scroll to the bottom of the page
+  // Scroll to the bottom to trigger lazy loading
   await page.evaluate(() => {
     window.scrollTo(0, document.body.scrollHeight);
   });
 
-  await page.waitForTimeout(2000); // Wait for videos to load
+  await page.waitForTimeout(2000);
 
-  // Locate the container element
-  const container = page.locator('.container');
+  const container = page.locator(".container");
+  const outputHtml = await container.evaluate((el) => el.outerHTML);
 
-  // Grab the entire HTML from the element
-  const outputHtml = await container.evaluate(el => el.outerHTML);
-
-  // Compare against a stored snapshot
   expect(outputHtml).toMatchSnapshot();
 });
-
-// ============================================
-// EDGE CASE TESTS FOR VIDEO COMPONENT
-// ============================================
-
-test.describe('Video Edge Case Tests - Dimensions', () => {
-  test('Minimal dimensions (1px × 1px)', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-minimal"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    const width = await edgeVideo.getAttribute('width');
-    expect(width).toBe('1');
-  });
-
-  test('Large dimensions (4000px × 2000px)', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-large"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    const width = await edgeVideo.getAttribute('width');
-    expect(width).toBe('4000');
-  });
-
-  test('Extreme aspect ratio (1:500)', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-ratio-tall"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    const height = await edgeVideo.getAttribute('height');
-    expect(height).toBe('5000');
-  });
-
-  test('Extreme aspect ratio (500:1)', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-ratio-wide"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    const width = await edgeVideo.getAttribute('width');
-    expect(width).toBe('5000');
-  });
-});
-
-test.describe('Video Edge Case Tests - Transformations', () => {
-  test('Multiple complex transformations', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-complex-transformations"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    // Should contain transformation parameters
-    const src = await edgeVideo.getAttribute('src');
-    expect(src).toContain('ik.imagekit.io');
-    expect(src).toContain('tr=');
-  });
-
-  test('transformationPosition="path"', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-transform-path"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    // Path transformations should use /tr: syntax
-    const src = await edgeVideo.getAttribute('src');
-    expect(src).toContain('/tr:');
-  });
-
-  test('transformationPosition="query"', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-transform-query"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    // Query transformations should use query params
-    const src = await edgeVideo.getAttribute('src');
-    expect(src).toContain('?');
-  });
-});
-
-test.describe('Video Edge Case Tests - Attributes', () => {
-  test('All HTML attributes combined', async ({ page }) => {
-    await page.goto("/videos");
-
-    const edgeVideo = page.locator('[data-test-id="video-edge-all-attributes"]').locator('video');
-    
-    await expect(edgeVideo).toBeVisible();
-    
-    // Check for all attributes
-    const controls = await edgeVideo.getAttribute('controls');
-    const autoplay = await edgeVideo.getAttribute('autoplay');
-    const loop = await edgeVideo.getAttribute('loop');
-    const muted = await edgeVideo.getAttribute('muted');
-    const preload = await edgeVideo.getAttribute('preload');
-    
-    expect(controls).not.toBeNull();
-    expect(autoplay).not.toBeNull();
-    expect(loop).not.toBeNull();
-    expect(muted).not.toBeNull();
-    expect(preload).toBe('metadata');
-  });
-});
-
diff --git a/test-app/package.json b/test-app/package.json
index 9802f29..16ca023 100644
--- a/test-app/package.json
+++ b/test-app/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@astrojs/node": "^9.5.5",
     "@imagekit/astro": "workspace:*",
+    "@imagekit/javascript": "^5.1.0",
     "astro": "^5.18.1"
   },
   "devDependencies": {
diff --git a/test-app/playwright.config.ts b/test-app/playwright.config.ts
index 1e3a348..8947664 100644
--- a/test-app/playwright.config.ts
+++ b/test-app/playwright.config.ts
@@ -1,6 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
 import path from "path";
-import "./e2e/fixtures";
 
 // Use process.env.PORT by default and fallback to port 4321
 const PORT = process.env.PORT || 4321;
diff --git a/test-app/src/assets/hero.jpg b/test-app/src/assets/hero.jpg
new file mode 100644
index 0000000..56fb86b
Binary files /dev/null and b/test-app/src/assets/hero.jpg differ
diff --git a/test-app/src/pages/api/upload-auth.ts b/test-app/src/pages/api/upload-auth.ts
index 9aa6737..41d5c1a 100644
--- a/test-app/src/pages/api/upload-auth.ts
+++ b/test-app/src/pages/api/upload-auth.ts
@@ -7,7 +7,7 @@ export const GET: APIRoute = async () => {
   try {
     const authParams = getUploadAuthParams({
       privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
-      publicKey: import.meta.env.IMAGEKIT_PUBLIC_KEY,
+      publicKey: import.meta.env.PUBLIC_IMAGEKIT_PUBLIC_KEY,
     });
     return new Response(JSON.stringify(authParams), {
       status: 200,
@@ -20,7 +20,7 @@ export const GET: APIRoute = async () => {
         token: 'dummy-token',
         signature: 'dummy-signature',
         expire: Math.floor(Date.now() / 1000) + 30 * 60, // 30 minutes from now
-        publicKey: import.meta.env.IMAGEKIT_PUBLIC_KEY || 'dummy-public-key',
+        publicKey: import.meta.env.PUBLIC_IMAGEKIT_PUBLIC_KEY || 'dummy-public-key',
       };
       console.warn('Using dummy auth params for CI environment');
       return new Response(JSON.stringify(dummyAuthParams), {
diff --git a/test-app/src/pages/images.astro b/test-app/src/pages/images.astro
index ca480c5..10c0f99 100644
--- a/test-app/src/pages/images.astro
+++ b/test-app/src/pages/images.astro
@@ -1,5 +1,6 @@
 ---
-import { Image } from '@imagekit/astro';
+import { Image } from 'astro:assets';
+import heroImage from '../assets/hero.jpg';
 ---
 
 <!DOCTYPE html>
@@ -35,15 +36,28 @@ import { Image } from '@imagekit/astro';
 <body>
   <div class="container">
     <h1>Image Component Tests</h1>
-    <p>Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations.</p>
+    <p>Image uses Astro's built-in Image component for optimized image delivery with ImageKit transformations. The <code>urlEndpoint</code> is configured globally in <code>astro.config.mjs</code>; cases below only pass it explicitly when overriding it.</p>
 
-    <!-- Basic image with urlEndpoint prop -->
+    <!-- Basic image (urlEndpoint comes from astro.config.mjs) -->
     <div class="example">
-      <h3>1. Basic Image with urlEndpoint prop</h3>
+      <h3>Basic image (urlEndpoint from integration config)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="default-image.jpg"
-        alt="Image with urlEndpoint prop"
+        alt="Basic image"
+        width={10}
+        height={10}
+        fit="contain"
+        position='top left'
+      />
+    </div>
+
+    <!-- urlEndpoint prop override -->
+    <div class="example">
+      <h3>urlEndpoint prop override</h3>
+      <Image
+        urlEndpoint="https://ik.imagekit.io/demo2/"
+        src="/default-image.jpg"
+        alt="Image with urlEndpoint override"
         width={300}
         height={300}
       />
@@ -51,9 +65,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with leading slash in src -->
     <div class="example">
-      <h3>2. Image with leading slash in src</h3>
+      <h3>Leading slash in src</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with leading slash"
         width={300}
@@ -61,11 +74,21 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
+    <!-- Absolute URL src -->
+    <div class="example">
+      <h3>Absolute URL src (urlEndpoint ignored, transformations still applied)</h3>
+      <Image
+        src="https://ik.imagekit.io/demo/default-image.jpg"
+        alt="Absolute URL src"
+        width={300}
+        height={300}
+      />
+    </div>
+
     <!-- Image with transformation -->
     <div class="example">
-      <h3>3. Image with transformation</h3>
+      <h3>Transformation prop</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="With transformation"
         transformation={[{ height: 100, width: 100 }]}
@@ -76,9 +99,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with queryParameters -->
     <div class="example">
-      <h3>4. Image with queryParameters</h3>
+      <h3>queryParameters prop</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with queryParameters"
         queryParameters={{
@@ -92,9 +114,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Responsive image with sizes -->
     <div class="example">
-      <h3>5. Responsive image with sizes</h3>
+      <h3>Responsive image with sizes</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Responsive image with sizes"
         sizes="(max-width: 600px) 100vw, 50vw"
@@ -105,9 +126,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Responsive image with fixed sizes -->
     <div class="example">
-      <h3>6. Responsive image with fixed sizes (300px)</h3>
+      <h3>Responsive image with fixed sizes (300px)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Responsive image with fixed sizes"
         sizes="300px"
@@ -116,24 +136,10 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Non-responsive image -->
-    <div class="example">
-      <h3>7. Non-responsive image (responsive=false)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Non-responsive image"
-        responsive={false}
-        width={300}
-        height={300}
-      />
-    </div>
-
     <!-- Image with custom class -->
     <div class="example">
-      <h3>8. Image with custom class</h3>
+      <h3>Custom class</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with custom class"
         class="custom-class"
@@ -144,9 +150,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Lazy loading eager -->
     <div class="example">
-      <h3>9. Image with loading="eager"</h3>
+      <h3>loading="eager"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with loading eager"
         loading="eager"
@@ -157,9 +162,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Transformation position path -->
     <div class="example">
-      <h3>10. Image with transformationPosition="path"</h3>
+      <h3>transformationPosition="path"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with path transformation"
         transformationPosition="path"
@@ -170,9 +174,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Transformation position path with custom transformations -->
     <div class="example">
-      <h3>11. Image with transformationPosition="path" + custom transformations</h3>
+      <h3>transformationPosition="path" + custom transformations</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with path transformation + custom transformations"
         transformationPosition="path"
@@ -182,37 +185,10 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Custom device breakpoints -->
-    <div class="example">
-      <h3>12. Image with custom deviceBreakpoints</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Image with custom device breakpoints"
-        deviceBreakpoints={[320, 640, 1024]}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- Custom image breakpoints -->
-    <div class="example">
-      <h3>13. Image with custom imageBreakpoints</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Image with custom image breakpoints"
-        imageBreakpoints={[200, 400, 600]}
-        width={300}
-        height={300}
-      />
-    </div>
-
     <!-- Image with data attributes -->
     <div class="example">
-      <h3>14. Image with data attributes</h3>
+      <h3>Data attributes</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with data attributes"
         data-testid="test-image"
@@ -224,9 +200,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with multiple transformations -->
     <div class="example">
-      <h3>15. Image with multiple chained transformations</h3>
+      <h3>Multiple chained transformations</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with multiple chained transformations"
         transformation={[
@@ -245,9 +220,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with format prop -->
     <div class="example">
-      <h3>16. Image with format="avif"</h3>
+      <h3>format="avif" ignored</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with AVIF format"
         format="avif"
@@ -258,9 +232,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with quality prop (preset) -->
     <div class="example">
-      <h3>17. Image with quality="high"</h3>
+      <h3>quality="high"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with high quality preset"
         quality="high"
@@ -271,9 +244,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with quality prop (number) -->
     <div class="example">
-      <h3>18. Image with quality=50</h3>
+      <h3>quality=50</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with numeric quality"
         quality={50}
@@ -284,9 +256,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with decoding prop -->
     <div class="example">
-      <h3>19. Image with decoding="sync"</h3>
+      <h3>decoding="sync"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with sync decoding"
         decoding="sync"
@@ -297,9 +268,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with fetchpriority prop -->
     <div class="example">
-      <h3>20. Image with fetchpriority="high"</h3>
+      <h3>fetchpriority="high"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with high fetch priority"
         fetchpriority="high"
@@ -310,12 +280,12 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with densities prop -->
     <div class="example">
-      <h3>21. Image with densities=[1.5, 2]</h3>
+      <h3>densities=[1.5, 2] (requires layout="none" to override config default)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with density srcset"
         densities={[1.5, 2]}
+        layout="none"
         width={300}
         height={300}
       />
@@ -323,9 +293,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with widths prop -->
     <div class="example">
-      <h3>22. Image with widths=[240, 540, 720]</h3>
+      <h3>widths=[240, 540, 720]</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with specific widths srcset"
         widths={[240, 540, 720]}
@@ -337,9 +306,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with layout="constrained" -->
     <div class="example">
-      <h3>23. Image with layout="constrained"</h3>
+      <h3>layout="constrained"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with constrained layout"
         layout="constrained"
@@ -350,9 +318,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with layout="full-width" -->
     <div class="example">
-      <h3>24. Image with layout="full-width"</h3>
+      <h3>layout="full-width"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with full-width layout"
         layout="full-width"
@@ -363,9 +330,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with layout="fixed" -->
     <div class="example">
-      <h3>25. Image with layout="fixed"</h3>
+      <h3>layout="fixed"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with fixed layout"
         layout="fixed"
@@ -374,29 +340,13 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Image with fit prop -->
-    <div class="example">
-      <h3>26. Image with fit="contain"</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Image with contain fit"
-        layout="constrained"
-        fit="contain"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- Image with position prop -->
+    <!-- Image with layout="none" (turns off responsive srcset) -->
     <div class="example">
-      <h3>27. Image with position="top left"</h3>
+      <h3>layout="none" (responsive off)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
-        alt="Image with top left position"
-        layout="constrained"
-        position="top left"
+        alt="Image with responsive off"
+        layout="none"
         width={300}
         height={300}
       />
@@ -404,9 +354,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with priority prop -->
     <div class="example">
-      <h3>28. Image with priority (eager loading shorthand)</h3>
+      <h3>priority (eager loading shorthand)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with priority flag"
         priority
@@ -417,9 +366,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with style attribute -->
     <div class="example">
-      <h3>29. Image with inline style</h3>
+      <h3>Inline style</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with inline style"
         style="border: 3px solid red; border-radius: 10px;"
@@ -430,9 +378,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Image with id attribute -->
     <div class="example">
-      <h3>30. Image with id attribute</h3>
+      <h3>id attribute</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="Image with id"
         id="my-image-id"
@@ -441,201 +388,10 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- PROPERTY CONFLICT TESTS -->
-    <h2>Property Conflict Tests (Invalid Combinations)</h2>
-    <p>Per Astro docs: These property combinations should not be used together. Testing graceful handling.</p>
-
-    <!-- densities + layout conflict -->
-    <div class="example" data-test-id="conflict-densities-layout">
-      <h3>31. CONFLICT: densities + layout (densities should be ignored)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Conflict: densities + layout"
-        densities={[1.5, 2]}
-        layout="constrained"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- densities + widths conflict -->
-    <div class="example" data-test-id="conflict-densities-widths">
-      <h3>32. CONFLICT: densities + widths (only one should be used)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Conflict: densities + widths"
-        densities={[1.5, 2]}
-        widths={[240, 540, 720]}
-        sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- widths without sizes -->
-    <div class="example" data-test-id="conflict-widths-no-sizes">
-      <h3>33. CONFLICT: widths without sizes (sizes required)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Conflict: widths without sizes"
-        widths={[240, 540, 720]}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- layout=fixed + widths -->
-    <div class="example" data-test-id="conflict-fixed-widths">
-      <h3>34. CONFLICT: layout=fixed + widths (fixed layout shouldn't vary widths)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Conflict: layout=fixed + widths"
-        layout="fixed"
-        widths={[240, 540, 720]}
-        sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- layout=none + responsive prop -->
-    <div class="example" data-test-id="conflict-none-layout-responsive">
-      <h3>35. CONFLICT: layout=none + responsive=true (none disables responsiveness)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Conflict: layout=none + responsive"
-        layout="none"
-        responsive={true}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- VALID PROPERTY COMBINATIONS -->
-    <h2>Valid Property Combinations</h2>
-    <p>These property combinations work correctly together.</p>
-
-    <!-- widths + sizes valid -->
-    <div class="example" data-test-id="valid-widths-sizes">
-      <h3>36. VALID: widths + sizes (responsive with explicit widths)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Valid: widths + sizes"
-        widths={[240, 540, 720]}
-        sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, 720px"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- densities alone valid -->
-    <div class="example" data-test-id="valid-densities-alone">
-      <h3>37. VALID: densities alone (density-based srcset)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Valid: densities alone"
-        densities={[1.5, 2]}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- layout=constrained + format + quality valid -->
-    <div class="example" data-test-id="valid-layout-format-quality">
-      <h3>38. VALID: layout=constrained + format + quality</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Valid: layout + format + quality"
-        layout="constrained"
-        format="webp"
-        quality="high"
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- layout=full-width with responsive -->
-    <div class="example" data-test-id="valid-fullwidth-responsive">
-      <h3>39. VALID: layout=full-width with responsive props</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Valid: layout full-width"
-        layout="full-width"
-        responsive={true}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- responsive + ImageKit breakpoints -->
-    <div class="example" data-test-id="valid-responsive-breakpoints">
-      <h3>40. VALID: responsive=true + ImageKit breakpoints</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="Valid: responsive + breakpoints"
-        responsive={true}
-        deviceBreakpoints={[320, 640, 1024]}
-        imageBreakpoints={[200, 400, 600]}
-        width={300}
-        height={300}
-      />
-    </div>
-
-    <!-- EDGE CASE TESTS -->
-    <h2>Edge Case Tests</h2>
-    <p>Testing extreme values and boundary conditions.</p>
-
-    <!-- Minimal dimensions 1px x 1px -->
-    <div class="example" data-test-id="edge-minimal-dimensions">
-      <h3>41. Minimal dimensions (1px × 1px)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="minimal 1x1"
-        width={1}
-        height={1}
-      />
-    </div>
-
-    <!-- Extreme aspect ratio 1:1000 -->
-    <div class="example" data-test-id="edge-extreme-ratio-tall">
-      <h3>42. Extreme aspect ratio (1:1000)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="1:1000 aspect ratio"
-        width={10}
-        height={10000}
-      />
-    </div>
-
-    <!-- Extreme aspect ratio 1000:1 -->
-    <div class="example" data-test-id="edge-extreme-ratio-wide">
-      <h3>43. Extreme aspect ratio (1000:1)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="1000:1 aspect ratio"
-        width={10000}
-        height={10}
-      />
-    </div>
-
     <!-- Quality boundary: 0 -->
     <div class="example" data-test-id="edge-quality-0">
-      <h3>44. Quality = 0 (minimum)</h3>
+      <h3>Quality = 0 (minimum)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="quality 0"
         quality={0}
@@ -646,9 +402,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Quality boundary: 100 -->
     <div class="example" data-test-id="edge-quality-100">
-      <h3>45. Quality = 100 (maximum)</h3>
+      <h3>Quality = 100 (maximum)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="quality 100"
         quality={100}
@@ -659,9 +414,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Format: webp -->
     <div class="example" data-test-id="edge-format-webp">
-      <h3>46. Format = webp</h3>
+      <h3>Format = webp</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="webp format"
         format="webp"
@@ -672,9 +426,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Format: avif -->
     <div class="example" data-test-id="edge-format-avif">
-      <h3>47. Format = avif</h3>
+      <h3>Format = avif</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="avif format"
         format="avif"
@@ -685,9 +438,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Format: svg -->
     <div class="example" data-test-id="edge-format-svg">
-      <h3>48. Format = svg</h3>
+      <h3>Format = svg</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="svg format"
         format="svg"
@@ -698,9 +450,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Multiple complex transformations -->
     <div class="example" data-test-id="edge-complex-transformations">
-      <h3>49. Multiple complex transformations</h3>
+      <h3>Multiple complex transformations</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="complex transformations"
         transformation={[
@@ -717,9 +468,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- transformationPosition path with transformations -->
     <div class="example" data-test-id="edge-transform-position-path">
-      <h3>50. transformationPosition="path" + transformations</h3>
+      <h3>transformationPosition="path" + transformations</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="transformation path position"
         transformationPosition="path"
@@ -731,9 +481,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- transformationPosition query with complex query params -->
     <div class="example" data-test-id="edge-transform-position-query">
-      <h3>51. transformationPosition="query" + queryParameters</h3>
+      <h3>transformationPosition="query" + queryParameters</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="transformation query position"
         transformationPosition="query"
@@ -747,23 +496,10 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Large width boundary test -->
-    <div class="example" data-test-id="edge-large-width">
-      <h3>52. Large width (5000px)</h3>
-      <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="5000px width"
-        width={5000}
-        height={5000}
-      />
-    </div>
-
     <!-- Quality as string preset -->
     <div class="example" data-test-id="edge-quality-preset-low">
-      <h3>53. Quality preset = "low"</h3>
+      <h3>Quality preset = "low"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="quality low preset"
         quality="low"
@@ -774,9 +510,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Quality as string preset mid -->
     <div class="example" data-test-id="edge-quality-preset-mid">
-      <h3>54. Quality preset = "mid"</h3>
+      <h3>Quality preset = "mid"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="quality mid preset"
         quality="mid"
@@ -787,9 +522,8 @@ import { Image } from '@imagekit/astro';
 
     <!-- Quality as string preset max -->
     <div class="example" data-test-id="edge-quality-preset-max">
-      <h3>55. Quality preset = "max"</h3>
+      <h3>Quality preset = "max"</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/default-image.jpg"
         alt="quality max preset"
         quality="max"
@@ -798,33 +532,32 @@ import { Image } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Responsive with custom device breakpoints edge case -->
-    <div class="example" data-test-id="edge-device-breakpoints">
-      <h3>56. Responsive with extreme device breakpoints</h3>
+    <!-- SHARP DELEGATION: non-IK srcs are routed through Astro's bundled sharp service. -->
+    <h2>Sharp delegation (non-ImageKit srcs)</h2>
+    <p>The following cases use srcs that are not ImageKit URLs. The integration delegates them to Astro's default sharp service, so they're served via Astro's <code>/_image</code> endpoint instead of being rewritten to <code>ik.imagekit.io</code>.</p>
+
+    <!-- Local imported asset (Vite-emitted /_astro/ path) -->
+    <div class="example" data-test-id="sharp-local-import">
+      <h3>Local imported asset (sharp)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="device breakpoints"
-        responsive={true}
-        deviceBreakpoints={[100, 5000]}
+        src={heroImage}
+        alt="Local hero image processed by sharp"
         width={300}
-        height={300}
       />
     </div>
 
-    <!-- Responsive with custom image breakpoints edge case -->
-    <div class="example" data-test-id="edge-image-breakpoints">
-      <h3>57. Responsive with extreme image breakpoints</h3>
+    <!-- Allow-listed external URL (in image.domains) -->
+    <div class="example" data-test-id="sharp-external-allowed">
+      <h3>Allow-listed external URL (sharp)</h3>
       <Image
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="/default-image.jpg"
-        alt="image breakpoints"
-        responsive={true}
-        imageBreakpoints={[100, 5000]}
-        width={300}
-        height={300}
+        src="https://placehold.co/600x400"
+        alt="External URL on an allow-listed host, processed by sharp"
+        width={600}
+        height={400}
+        inferSize={false}
       />
     </div>
+
   </div>
 </body>
 </html>
diff --git a/test-app/src/pages/index.astro b/test-app/src/pages/index.astro
index c2a3b8f..ca8ff4e 100644
--- a/test-app/src/pages/index.astro
+++ b/test-app/src/pages/index.astro
@@ -48,6 +48,8 @@
   <ul>
     <li><a href="/images">Image Component Tests</a></li>
     <li><a href="/videos">Video Component Tests</a></li>
+    <li><a href="/og">OG Image Tags (&lt;OgImage&gt;)</a></li>
+    <li><a href="/md">Markdown Image Test</a></li>
   </ul>
 
   <hr style="margin: 40px 0; border: 0; border-top: 1px solid #eee;" />
diff --git a/test-app/src/pages/md.md b/test-app/src/pages/md.md
new file mode 100644
index 0000000..47ad05b
--- /dev/null
+++ b/test-app/src/pages/md.md
@@ -0,0 +1,32 @@
+---
+layout: null
+title: Markdown image test
+---
+
+# Markdown image test
+
+This page verifies that `![alt](url)` in `.md` files is processed by Astro's image pipeline and routed through the `@imagekit/astro` image service.
+
+<div class="container">
+
+## ImageKit URL (primary endpoint host)
+
+![Imagekit URL](https://ik.imagekit.io/demo/default-image.jpg)
+
+## Custom IK domain (additionalEndpoints host)
+
+![Another custom IK URL](https://ik.imgkit.net/demo/default-image.jpg)
+
+## Local imported asset (delegated to sharp)
+
+![Local hero asset](../assets/hero.jpg)
+
+## Allow-listed external URL (delegated to sharp)
+
+![Allowed external URL](https://placehold.co/600x400)
+
+## Non-allow-listed external URL (rendered as-is by Astro)
+
+![Not allowed external URL](https://not-allowed-external-as-is.com/creatives/4a3a37e5-f135-4fdd-877f-488570c9d4bb/default.jpg?tr=cm-pad_resize,w-900)
+
+</div>
diff --git a/test-app/src/pages/og.astro b/test-app/src/pages/og.astro
new file mode 100644
index 0000000..caa5717
--- /dev/null
+++ b/test-app/src/pages/og.astro
@@ -0,0 +1,60 @@
+---
+import { OgImage, getOgImageUrl } from '@imagekit/astro';
+
+// Compute one URL via the helper to demonstrate the escape hatch
+const customUrl = getOgImageUrl({
+  src: '/default-image.jpg',
+  width: 1200,
+  height: 630,
+  transformation: [{ blur: 5 }],
+});
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>OG Image Test</title>
+
+  <!-- Case 1: full options (component) -->
+  <OgImage
+    src="/default-image.jpg"
+    title="Hello from @imagekit/astro"
+    description="A demo of <OgImage> — single image URL used for both OG and Twitter, format auto-selected by ImageKit."
+    alt="Default ImageKit demo image"
+    type="article"
+  />
+
+  <!-- Case 2: helper escape hatch (rendered by hand) -->
+  <meta property="og:image:secondary" content={customUrl} />
+</head>
+<body>
+  <h1>&lt;OgImage&gt; Output</h1>
+  <p class="note">View source to see the generated &lt;meta&gt; tags injected into the page &lt;head&gt;.</p>
+
+  <h2>Helper-built secondary URL</h2>
+  <pre>{customUrl}</pre>
+
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 40px 20px;
+    }
+    pre {
+      background: #f6f8fa;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      padding: 12px;
+      overflow-x: auto;
+      font-size: 13px;
+    }
+    .note {
+      color: #666;
+      font-size: 14px;
+    }
+  </style>
+</body>
+</html>
diff --git a/test-app/src/pages/upload.astro b/test-app/src/pages/upload.astro
index f15e265..5a66af6 100644
--- a/test-app/src/pages/upload.astro
+++ b/test-app/src/pages/upload.astro
@@ -109,7 +109,7 @@
   </div>
 
   <script>
-    import { upload } from '@imagekit/astro';
+    import { upload } from '@imagekit/javascript';
 
     const fileInput = document.getElementById('file-input') as HTMLInputElement;
     const uploadBtn = document.getElementById('upload-btn') as HTMLButtonElement;
@@ -147,7 +147,7 @@
         const response = await upload({
           file,
           fileName: file.name,
-          publicKey: import.meta.env.IMAGEKIT_PUBLIC_KEY,
+          publicKey: import.meta.env.PUBLIC_IMAGEKIT_PUBLIC_KEY,
           ...authParams,
         });
 
diff --git a/test-app/src/pages/videos.astro b/test-app/src/pages/videos.astro
index 09cb97b..b93eca4 100644
--- a/test-app/src/pages/videos.astro
+++ b/test-app/src/pages/videos.astro
@@ -40,7 +40,6 @@ import { Video } from '@imagekit/astro';
     <div class="example">
       <h3>Basic Video with urlEndpoint prop</h3>
       <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="sample-video.mp4"
         title="Video with urlEndpoint prop"
         height={300}
@@ -53,7 +52,6 @@ import { Video } from '@imagekit/astro';
     <div class="example">
       <h3>Video with leading slash in src</h3>
       <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="/sample-video.mp4"
         title="Video with leading slash"
         height={300}
@@ -66,7 +64,6 @@ import { Video } from '@imagekit/astro';
     <div class="example">
       <h3>Video with transformations</h3>
       <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
         src="sample-video.mp4"
         title="Video with transformations"
         transformation={[{ height: 100, width: 100 }]}
@@ -76,24 +73,6 @@ import { Video } from '@imagekit/astro';
       />
     </div>
 
-    <!-- Video with all props -->
-    <div class="example">
-      <h3>Video with all HTML attributes</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="Video with all props"
-        height={300}
-        width={300}
-        controls
-        autoplay
-        loop
-        muted
-        preload="none"
-        poster="https://ik.imagekit.io/demo/default-image.jpg"
-      />
-    </div>
-
     <!-- urlEndpoint override -->
     <div class="example">
       <h3>Video with different urlEndpoint</h3>
@@ -185,84 +164,9 @@ import { Video } from '@imagekit/astro';
       />
     </div>
 
-    <!-- EDGE CASE TESTS -->
-    <h2>Edge Case Tests</h2>
-    <p>Testing extreme values and boundary conditions for video component.</p>
-
-    <!-- Minimal dimensions 1px x 1px -->
-    <div class="example" data-test-id="video-edge-minimal">
-      <h3>Minimal dimensions (1px × 1px)</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="minimal video 1x1"
-        width={1}
-        height={1}
-        controls
-      />
-    </div>
-
-    <!-- Large dimensions -->
-    <div class="example" data-test-id="video-edge-large">
-      <h3>Large dimensions (4000px × 2000px)</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="large video"
-        width={4000}
-        height={2000}
-        controls
-      />
-    </div>
-
-    <!-- Extreme aspect ratio tall -->
-    <div class="example" data-test-id="video-edge-ratio-tall">
-      <h3>Extreme aspect ratio (1:500)</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="tall aspect ratio"
-        width={10}
-        height={5000}
-        controls
-      />
-    </div>
-
-    <!-- Extreme aspect ratio wide -->
-    <div class="example" data-test-id="video-edge-ratio-wide">
-      <h3>Extreme aspect ratio (500:1)</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="wide aspect ratio"
-        width={5000}
-        height={10}
-        controls
-      />
-    </div>
-
-    <!-- Multiple complex transformations -->
-    <div class="example" data-test-id="video-edge-complex-transformations">
-      <h3>Multiple complex transformations</h3>
-      <Video
-        urlEndpoint="https://ik.imagekit.io/demo/"
-        src="sample-video.mp4"
-        title="complex transformations"
-        transformation={[
-          { width: 200, height: 200 },
-          { rotation: 90 },
-          { quality: 50 },
-          { aspectRatio: "16-9" }
-        ]}
-        width={300}
-        height={300}
-        controls
-      />
-    </div>
-
     <!-- transformationPosition="path" with transformations -->
     <div class="example" data-test-id="video-edge-transform-path">
-      <h3>transformationPosition="path"</h3>
+      <h3>transformationPosition="path" with transformations</h3>
       <Video
         urlEndpoint="https://ik.imagekit.io/demo/"
         src="sample-video.mp4"