From 43875e266b6c6de15572ca906be23ee308339a09 Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Tue, 5 May 2026 16:16:40 +0530
Subject: [PATCH 01/18] Add ImageKit media guide

- Adds src/content/docs/en/guides/media/imagekit.mdx with setup, image/video, OG image, client uploads, content-collection loader, and Node.js usage- Adds public/logos/imagekit.svg and registers it in src/data/logos.ts (alphabetically between image and juno)- Mentions ImageKit alongside Cloudinary in guides/images.mdx and reference/image-service-reference.mdx- Auto-registered in MediaGuidesNav via type: media frontmatter- i18nReady: false (translations to follow)
---
 public/logos/imagekit.svg                     |   1 +
 src/content/docs/en/guides/images.mdx         |   2 +-
 src/content/docs/en/guides/media/imagekit.mdx | 311 ++++++++++++++++++
 .../en/reference/image-service-reference.mdx  |   2 +-
 src/data/logos.ts                             |   1 +
 5 files changed, 315 insertions(+), 2 deletions(-)
 create mode 100644 public/logos/imagekit.svg
 create mode 100644 src/content/docs/en/guides/media/imagekit.mdx

diff --git a/public/logos/imagekit.svg b/public/logos/imagekit.svg
new file mode 100644
index 0000000000000..1387707921c94
--- /dev/null
+++ b/public/logos/imagekit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 400 400" version="1.1" viewBox="0 0 400 400"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><g><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9zm19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4v.1z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6l4.1-21.2zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6l3.3-.1z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7zM180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2H180zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9zm25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1z" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9zm7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7l12.2 19zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8h3.5zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4h-.1zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4l.2 2.9z" class="st0"/></g></svg>
\ No newline at end of file
diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx
index 8a1ceb4d90939..5602b838c45aa 100644
--- a/src/content/docs/en/guides/images.mdx
+++ b/src/content/docs/en/guides/images.mdx
@@ -541,7 +541,7 @@ Use the HTML `<img>` element when you cannot use the `<Image />` component, for
 
 Image CDNs work with [all Astro image options](#images-in-astro-files). Use an image's full URL as the `src` attribute in the `<Image />` component, an `<img>` tag, or in Markdown notation. For image optimization with remote images, also [configure your authorized domains or URL patterns](#authorizing-remote-images).
 
-Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example, Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment.
+Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example, Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment. ImageKit also provides an [Astro SDK](https://github.com/imagekit-developer/imagekit-astro) that registers an image service so Astro's built-in `<Image />` and `<Picture />` components are routed through ImageKit automatically.
 
 <ReadMore>See the full API reference for the [`<Image />`](/en/reference/modules/astro-assets/#image-) and [`<Picture />`](/en/reference/modules/astro-assets/#picture-) components.</ReadMore>
 
diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
new file mode 100644
index 0000000000000..3c0ca623637c1
--- /dev/null
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -0,0 +1,311 @@
+---
+title: ImageKit & Astro
+description: Add images and videos to your Astro project using ImageKit
+sidebar:
+  label: ImageKit
+type: media
+stub: false
+logo: imagekit
+i18nReady: false
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+
+[ImageKit](https://imagekit.io) is a real-time media optimization and delivery platform with a global CDN, a built-in Digital Asset Manager (DAM), and a URL-based transformation API for images and videos.
+
+When delivering through ImageKit, you get automatic format conversion (AVIF, WebP), automatic quality, responsive images, AI-powered transformations (background removal, generative fill, upscaling), and adaptive video streaming.
+
+## Using ImageKit in Astro
+
+The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in sharp service, so the integration can be added to an existing project without breaking existing assets.
+
+The SDK also provides a `<Video />` component, an `<OgImage />` component for social cards, and a server-side helper for issuing client-side upload tokens.
+
+For pure URL building or browser uploads in any framework, you can also use the lower-level [ImageKit JavaScript SDK](https://github.com/imagekit-developer/imagekit-javascript). For server-side asset management (uploading, listing, deleting, metadata), use the [ImageKit Node.js SDK](https://github.com/imagekit-developer/imagekit-nodejs).
+
+## Prerequisites
+
+- An existing Astro project
+- An [ImageKit account](https://imagekit.io/registration/)
+
+## Installing the ImageKit Astro SDK
+
+Install the SDK by running the appropriate command for your package manager:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install @imagekit/astro
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add @imagekit/astro
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add @imagekit/astro
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+## Configuring your account
+
+Create a new `.env` file in the root of your project and add your ImageKit credentials:
+
+```shell title=".env"
+IMAGEKIT_URL_ENDPOINT="https://ik.imagekit.io/<your_imagekit_id>"
+
+# Only needed if you generate upload auth tokens on the server
+PUBLIC_IMAGEKIT_PUBLIC_KEY="<Your Public Key>"
+IMAGEKIT_PRIVATE_KEY="<Your Private Key>"
+```
+
+Then register the integration in `astro.config.mjs`:
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+import imagekit from '@imagekit/astro/integration';
+
+export default defineConfig({
+  integrations: [imagekit()],
+});
+```
+
+You can also pass `urlEndpoint` directly to the integration instead of using the environment variable:
+
+```js title="astro.config.mjs"
+imagekit({
+  urlEndpoint: 'https://ik.imagekit.io/<your_imagekit_id>',
+}),
+```
+
+## Using ImageKit images
+
+With the integration installed, Astro's built-in `<Image />` and `<Picture />` components route requests through ImageKit and apply automatic format and quality optimization, responsive `srcset`, and lazy loading.
+
+```astro title="Component.astro"
+---
+import { Image } from 'astro:assets';
+---
+<Image
+  src="/sample.jpg"
+  width={800}
+  height={600}
+  alt="A sample image"
+/>
+```
+
+The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) — cropping, focus, AI effects, overlays, and more:
+
+```astro title="Component.astro"
+---
+import { Image } from 'astro:assets';
+---
+<Image
+  src="/portrait.jpg"
+  width={500}
+  height={500}
+  alt="Cropped portrait"
+  transformation={[{ width: 500, height: 500, focus: 'face' }]}
+/>
+```
+
+The component-level `width` and `height` set the rendered HTML dimensions. The values inside `transformation` control the ImageKit server-side resize.
+
+## Using ImageKit videos
+
+Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside ImageKit-specific props such as `transformation` and `urlEndpoint`.
+
+```astro title="Component.astro"
+---
+import { Video } from '@imagekit/astro';
+---
+<Video
+  src="/sample.mp4"
+  width={1280}
+  height={720}
+  controls
+/>
+```
+
+To resize the video on ImageKit's side, pass dimensions inside `transformation`:
+
+```astro title="Component.astro"
+<Video
+  src="/sample.mp4"
+  width={640}
+  height={360}
+  transformation={[{ width: 640, height: 360 }]}
+  controls
+/>
+```
+
+## Generating Open Graph image URLs
+
+Use the `<OgImage />` component to render OpenGraph and Twitter Card `<meta>` tags pointing at an ImageKit-optimized image. Place it inside your layout's `<head>`.
+
+```astro title="Layout.astro"
+---
+import { OgImage } from '@imagekit/astro';
+---
+<html>
+  <head>
+    <OgImage
+      src="/og-banner.jpg"
+      title="My page title"
+      description="Preview description for social cards"
+      alt="OG image description"
+    />
+  </head>
+  <body><slot /></body>
+</html>
+```
+
+If you need just a URL instead of the rendered tags, use the `getOgImageUrl()` helper:
+
+```astro title="Layout.astro"
+---
+import { getOgImageUrl } from '@imagekit/astro';
+
+const ogImage = getOgImageUrl({
+  src: '/og-banner.jpg',
+  transformation: [{ width: 1200, height: 630 }],
+});
+---
+<meta property="og:image" content={ogImage} />
+```
+
+## Enabling client-side uploads
+
+To upload files directly from the browser, generate a short-lived authentication token on the server using the `getUploadAuthParams()` helper from `@imagekit/astro/server`. The private key stays server-side and is never sent to the browser.
+
+This requires an [adapter](/en/guides/on-demand-rendering/) so the endpoint runs on demand:
+
+```ts title="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 = () => {
+  const authParams = getUploadAuthParams({
+    privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
+    publicKey: import.meta.env.PUBLIC_IMAGEKIT_PUBLIC_KEY,
+  });
+
+  return new Response(JSON.stringify(authParams), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+```
+
+The browser then fetches this endpoint and passes the returned `signature`, `token`, and `expire` to the `upload()` function from [`@imagekit/javascript`](https://github.com/imagekit-developer/imagekit-javascript).
+
+## Loading from your ImageKit Media Library
+
+You can use [Astro Content Collections](/en/guides/content-collections/) together with the [`@imagekit/nodejs`](https://www.npmjs.com/package/@imagekit/nodejs) SDK to power gallery and listing pages directly from your ImageKit Media Library.
+
+Install the Node SDK as a dev dependency:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install -D @imagekit/nodejs
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add -D @imagekit/nodejs
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add -D @imagekit/nodejs
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Then define a collection backed by `client.assets.list()`:
+
+```ts title="src/content.config.ts"
+import { defineCollection, z } from 'astro:content';
+import ImageKit from '@imagekit/nodejs';
+
+const client = new ImageKit({
+  privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
+});
+
+const gallery = defineCollection({
+  loader: async () => {
+    const assets = await client.assets.list({
+      type: 'file',
+      fileType: 'image',
+      limit: 50,
+    });
+
+    return assets
+      .filter((asset) => asset.type === 'file' && !!asset.fileId && !!asset.url)
+      .map((asset) => ({
+        id: asset.fileId,
+        url: asset.url,
+        width: asset.width ?? 0,
+        height: asset.height ?? 0,
+        name: asset.name ?? '',
+      }));
+  },
+  schema: z.object({
+    url: z.string().url(),
+    width: z.number(),
+    height: z.number(),
+    name: z.string(),
+  }),
+});
+
+export const collections = { gallery };
+```
+
+Render the collection with `<Image>` from `astro:assets`. The integration generates the ImageKit CDN URL with the requested transformations:
+
+```astro title="src/pages/gallery.astro"
+---
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
+
+const photos = await getCollection('gallery');
+---
+{photos.map(({ data }) => (
+  <Image
+    src={data.url}
+    width={data.width}
+    height={data.height}
+    alt={data.name}
+    transformation={[{ width: 400, height: 300, focus: 'auto' }]}
+  />
+))}
+```
+
+## Using ImageKit in Node.js
+
+For server-side workflows such as bulk uploads, listing assets, or deleting files, use the official [`@imagekit/nodejs`](https://www.npmjs.com/package/@imagekit/nodejs) SDK directly:
+
+```ts title="src/pages/api/upload.ts"
+import ImageKit from '@imagekit/nodejs';
+
+const client = new ImageKit({
+  privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
+});
+
+await client.files.upload({
+  file: '<file path, buffer, or URL>',
+  fileName: 'sample.jpg',
+});
+```
+
+## Official resources
+
+- [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro)
+- [ImageKit Astro integration documentation](https://imagekit.io/docs/integration/astro)
+- [ImageKit JavaScript SDK](https://github.com/imagekit-developer/imagekit-javascript)
+- [ImageKit Node.js SDK](https://github.com/imagekit-developer/imagekit-nodejs)
+- [ImageKit transformation reference](https://imagekit.io/docs/transformations)
diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx
index b9922bc2752b6..3b3e2b97bc3c2 100644
--- a/src/content/docs/en/reference/image-service-reference.mdx
+++ b/src/content/docs/en/reference/image-service-reference.mdx
@@ -11,7 +11,7 @@ import Since from '~/components/Since.astro';
 Astro provides two types of image services: Local and External.
 
 - **Local services** handle image transformations directly at build for static sites, or at runtime both in development mode and for on-demand rendering. These are often wrappers around libraries like Sharp, ImageMagick, or Squoosh. In dev mode and in production routes rendered on demand, local services use an API endpoint to do the transformation.
-- **External services** point to URLs and can add support for services such as Cloudinary, Vercel, or any [RIAPI](https://github.com/riapi/riapi)-compliant server.
+- **External services** point to URLs and can add support for services such as Cloudinary, ImageKit, Vercel, or any [RIAPI](https://github.com/riapi/riapi)-compliant server.
 
 ## Building using the Image Services API
 
diff --git a/src/data/logos.ts b/src/data/logos.ts
index 77b9b24461e99..69ff2f2d1aa13 100644
--- a/src/data/logos.ts
+++ b/src/data/logos.ts
@@ -63,6 +63,7 @@ export const logos = LogoCheck({
 	hugo: { file: 'hugo.svg', padding: '.125em' },
 	hygraph: { file: 'hygraph.svg', padding: '.1em .125em .1em .1em' },
 	image: { file: 'astro-image.svg', padding: '.1875em' },
+	imagekit: { file: 'imagekit.svg', padding: '.15em' },
 	juno: { file: 'juno.svg', padding: '0' },
 	jekyll: { file: 'jekyll.png', padding: '.1em .05em 0' },
 	jekyllpad: { file: 'jekyllpad.svg', padding: '0.2em' },

From de8da01459b2c3e296fbcc34a745e9244bfafd84 Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Tue, 5 May 2026 17:08:07 +0530
Subject: [PATCH 02/18] docs(images): enhance ImageKit integration details in
 images guide

Co-authored-by: Copilot <copilot@github.com>
---
 src/content/docs/en/guides/images.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx
index 5602b838c45aa..e4d89e9763a7d 100644
--- a/src/content/docs/en/guides/images.mdx
+++ b/src/content/docs/en/guides/images.mdx
@@ -541,7 +541,10 @@ Use the HTML `<img>` element when you cannot use the `<Image />` component, for
 
 Image CDNs work with [all Astro image options](#images-in-astro-files). Use an image's full URL as the `src` attribute in the `<Image />` component, an `<img>` tag, or in Markdown notation. For image optimization with remote images, also [configure your authorized domains or URL patterns](#authorizing-remote-images).
 
-Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example, Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment. ImageKit also provides an [Astro SDK](https://github.com/imagekit-developer/imagekit-astro) that registers an image service so Astro's built-in `<Image />` and `<Picture />` components are routed through ImageKit automatically.
+Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example:
+
+- Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment.
+- ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service, so Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax.
 
 <ReadMore>See the full API reference for the [`<Image />`](/en/reference/modules/astro-assets/#image-) and [`<Picture />`](/en/reference/modules/astro-assets/#picture-) components.</ReadMore>
 

From 069f07d973f0f05324754dfefab990f5a5825f75 Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Tue, 5 May 2026 17:13:06 +0530
Subject: [PATCH 03/18] docs(images): add AI-powered transformations and upload
 form examples to ImageKit guide

Co-authored-by: Copilot <copilot@github.com>
---
 src/content/docs/en/guides/media/imagekit.mdx | 128 ++++++++++++++++--
 1 file changed, 120 insertions(+), 8 deletions(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 3c0ca623637c1..245f704f76484 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -113,6 +113,55 @@ import { Image } from 'astro:assets';
 
 The component-level `width` and `height` set the rendered HTML dimensions. The values inside `transformation` control the ImageKit server-side resize.
 
+### AI-powered transformations
+
+ImageKit transformations include AI effects that can be applied through the same `transformation` prop:
+
+```astro title="Component.astro"
+---
+import { Image } from 'astro:assets';
+---
+<!-- Remove background -->
+<Image
+  src="/product.jpg"
+  width={500}
+  height={500}
+  alt="Product with background removed"
+  transformation={[{ aiRemoveBackground: true }]}
+/>
+
+<!-- Upscale a low-resolution image -->
+<Image
+  src="/thumbnail.jpg"
+  width={1024}
+  height={1024}
+  alt="Upscaled image"
+  transformation={[{ aiUpscale: true }]}
+/>
+
+<!-- Generative fill to extend an image to a new aspect ratio -->
+<Image
+  src="/portrait.jpg"
+  width={1600}
+  height={900}
+  alt="Image extended with generative fill"
+  transformation={[
+    { width: 1600, height: 900, cropMode: 'pad_resize', background: 'genfill' },
+  ]}
+/>
+
+<!-- AI drop shadow -->
+<Image
+  src="/product.png"
+  width={500}
+  height={500}
+  alt="Product with AI drop shadow"
+  transformation={[{ aiDropShadow: true }]}
+/>
+```
+
+See the [supported transformations reference](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects.
+
 ## Using ImageKit videos
 
 Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside ImageKit-specific props such as `transformation` and `urlEndpoint`.
@@ -200,7 +249,61 @@ export const GET: APIRoute = () => {
 };
 ```
 
-The browser then fetches this endpoint and passes the returned `signature`, `token`, and `expire` to the `upload()` function from [`@imagekit/javascript`](https://github.com/imagekit-developer/imagekit-javascript).
+The browser then fetches this endpoint and passes the returned `signature`, `token`, `expire`, and `publicKey` to the `upload()` function from [`@imagekit/javascript`](https://github.com/imagekit-developer/imagekit-javascript). Install it as a direct dependency:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install @imagekit/javascript
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add @imagekit/javascript
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add @imagekit/javascript
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+A minimal upload form on a `.astro` page:
+
+```astro title="src/pages/upload.astro"
+<input type="file" id="file-input" />
+<button id="upload-btn">Upload</button>
+<progress id="upload-progress" value="0" max="100"></progress>
+
+<script>
+  import { upload } from '@imagekit/javascript';
+
+  const fileInput = document.getElementById('file-input') as HTMLInputElement;
+  const uploadBtn = document.getElementById('upload-btn') as HTMLButtonElement;
+  const progress = document.getElementById('upload-progress') as HTMLProgressElement;
+
+  uploadBtn.addEventListener('click', async () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+
+    const auth = await fetch('/api/upload-auth').then((r) => r.json());
+
+    const result = await upload({
+      ...auth,
+      file,
+      fileName: file.name,
+      onProgress: (e) => {
+        progress.value = (e.loaded / e.total) * 100;
+      },
+    });
+
+    console.log('Uploaded:', result);
+  });
+</script>
+```
+
+See [the official guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals.
 
 ## Loading from your ImageKit Media Library
 
@@ -226,11 +329,13 @@ Install the Node SDK as a dev dependency:
   </Fragment>
 </PackageManagerTabs>
 
-Then define a collection backed by `client.assets.list()`:
+Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects, so pass `type: 'file'` to exclude folders and `fileType: 'image'` to limit results to images. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema:
 
 ```ts title="src/content.config.ts"
-import { defineCollection, z } from 'astro:content';
+import { defineCollection } from 'astro:content';
+import { z } from 'astro/zod';
 import ImageKit from '@imagekit/nodejs';
+import type { Files } from '@imagekit/nodejs/resources/files/files';
 
 const client = new ImageKit({
   privateKey: import.meta.env.IMAGEKIT_PRIVATE_KEY,
@@ -239,19 +344,23 @@ const client = new ImageKit({
 const gallery = defineCollection({
   loader: async () => {
     const assets = await client.assets.list({
-      type: 'file',
-      fileType: 'image',
+      type: 'file',       // exclude folders
+      fileType: 'image',  // only image files
+      skip: 0,
       limit: 50,
     });
 
     return assets
-      .filter((asset) => asset.type === 'file' && !!asset.fileId && !!asset.url)
+      .filter((asset): asset is Files.File =>
+        asset.type === 'file' && !!asset.fileId && !!asset.url
+      )
       .map((asset) => ({
-        id: asset.fileId,
-        url: asset.url,
+        id: asset.fileId ?? '',
+        url: asset.url ?? '',
         width: asset.width ?? 0,
         height: asset.height ?? 0,
         name: asset.name ?? '',
+        tags: asset.tags ?? [],
       }));
   },
   schema: z.object({
@@ -259,12 +368,15 @@ const gallery = defineCollection({
     width: z.number(),
     height: z.number(),
     name: z.string(),
+    tags: z.array(z.string()),
   }),
 });
 
 export const collections = { gallery };
 ```
 
+After adding the collection, run `astro sync` (or start the dev server) so Astro generates the collection types used by `getCollection()`.
+
 Render the collection with `<Image>` from `astro:assets`. The integration generates the ImageKit CDN URL with the requested transformations:
 
 ```astro title="src/pages/gallery.astro"

From ff109dcad7b1298c67d58b9b6e3653d465955cef Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:43:21 +0530
Subject: [PATCH 04/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 245f704f76484..7abb879dc5ecb 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -6,7 +6,7 @@ sidebar:
 type: media
 stub: false
 logo: imagekit
-i18nReady: false
+i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 

From dd5119b49fcad883e3534abd08a793e0cb3780b7 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:43:30 +0530
Subject: [PATCH 05/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 7abb879dc5ecb..632ce5934a3cd 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -16,7 +16,7 @@ When delivering through ImageKit, you get automatic format conversion (AVIF, Web
 
 ## Using ImageKit in Astro
 
-The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in sharp service, so the integration can be added to an existing project without breaking existing assets.
+The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in Sharp service, so the integration can be added to an existing project without breaking existing assets.
 
 The SDK also provides a `<Video />` component, an `<OgImage />` component for social cards, and a server-side helper for issuing client-side upload tokens.
 

From daa2e887448b8ab4e928e00aeaea0c1f3ba6cb8a Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:43:42 +0530
Subject: [PATCH 06/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 632ce5934a3cd..1198ccc992c07 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -96,7 +96,7 @@ import { Image } from 'astro:assets';
 />
 ```
 
-The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) — cropping, focus, AI effects, overlays, and more:
+The integration adds an additional `transformation` prop on `<Image />`, `<Picture />`, and `getImage()` for applying any [ImageKit transformation](https://imagekit.io/docs/transformations) (e.g. cropping, focus, AI effects, overlays):
 
 ```astro title="Component.astro"
 ---

From bdf79ce3e4f61e42dcd2d288b74f691c751a7ee8 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:43:52 +0530
Subject: [PATCH 07/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 1198ccc992c07..59858c8cfb18c 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -160,7 +160,7 @@ import { Image } from 'astro:assets';
 />
 ```
 
-See the [supported transformations reference](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects.
+See the [supported transformations reference in ImageKit documentation](https://imagekit.io/docs/integration/astro#supported-transformations) for the full list, including overlays, smart cropping (`focus: 'auto'`, `focus: 'face'`), and other effects.
 
 ## Using ImageKit videos
 

From 638bd57874aa9bb0df967693c0357f686c02f6e9 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:44:12 +0530
Subject: [PATCH 08/18] Update src/content/docs/en/guides/images.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/images.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx
index e4d89e9763a7d..4540d41216848 100644
--- a/src/content/docs/en/guides/images.mdx
+++ b/src/content/docs/en/guides/images.mdx
@@ -544,7 +544,7 @@ Image CDNs work with [all Astro image options](#images-in-astro-files). Use an i
 Alternatively, the CDN may provide its own SDKs to more easily integrate in an Astro project. For example:
 
 - Cloudinary supports an [Astro SDK](https://astro.cloudinary.dev/) which allows you to easily drop in images with their `CldImage` component or a [Node.js SDK](https://cloudinary.com/documentation/node_integration) that can generate URLs to use with an `<img>` tag in a Node.js environment.
-- ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service, so Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax.
+- ImageKit provides an [Astro integration](https://github.com/imagekit-developer/imagekit-astro) that registers an image service. This means Astro's built-in `<Image />` and `<Picture />` components, along with Markdown `![]()` and MDX images, are all routed through ImageKit automatically. It adds CDN delivery, automatic AVIF/WebP conversion, responsive `srcset`, and on-the-fly transformations without changing your existing image syntax.
 
 <ReadMore>See the full API reference for the [`<Image />`](/en/reference/modules/astro-assets/#image-) and [`<Picture />`](/en/reference/modules/astro-assets/#picture-) components.</ReadMore>
 

From af539a9330e2d835e7947eeedc6afdcb51a57ab4 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:44:34 +0530
Subject: [PATCH 09/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 59858c8cfb18c..bc4acef6724ff 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -375,7 +375,7 @@ const gallery = defineCollection({
 export const collections = { gallery };
 ```
 
-After adding the collection, run `astro sync` (or start the dev server) so Astro generates the collection types used by `getCollection()`.
+After adding the collection, run [`astro sync`](/en/reference/cli-reference/#astro-sync) (or start the dev server) to generate the collection types used by `getCollection()`.
 
 Render the collection with `<Image>` from `astro:assets`. The integration generates the ImageKit CDN URL with the requested transformations:
 

From eba1982fe5ac188138543d15b3c439edd9825b47 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:45:12 +0530
Subject: [PATCH 10/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index bc4acef6724ff..dc039047b25e7 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -164,7 +164,7 @@ See the [supported transformations reference in ImageKit documentation](https://
 
 ## Using ImageKit videos
 
-Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside ImageKit-specific props such as `transformation` and `urlEndpoint`.
+Add videos to your `.astro` components with the `<Video />` component. It accepts standard HTML video attributes alongside [ImageKit-specific props](https://imagekit.io/docs/integration/astro#video-component) such as `transformation` and `urlEndpoint`.
 
 ```astro title="Component.astro"
 ---

From 2da760a37f58582d85a66f9a43b018fa777c7e8e Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:45:23 +0530
Subject: [PATCH 11/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index dc039047b25e7..da3761e148d2d 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -303,7 +303,7 @@ A minimal upload form on a `.astro` page:
 </script>
 ```
 
-See [the official guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals.
+See [the ImageKit guide](https://imagekit.io/docs/integration/astro#uploading-files) for full error handling and abort signals.
 
 ## Loading from your ImageKit Media Library
 

From 15d86f98ebec1e1a981a93c170bef57e8b2e2d74 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:45:38 +0530
Subject: [PATCH 12/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index da3761e148d2d..96edbab88978f 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -329,7 +329,7 @@ Install the Node SDK as a dev dependency:
   </Fragment>
 </PackageManagerTabs>
 
-Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects, so pass `type: 'file'` to exclude folders and `fileType: 'image'` to limit results to images. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema:
+Then define a collection backed by `client.assets.list()`. The Node SDK returns an array of `File | Folder` objects. To limit results to images, pass `type: 'file'` to exclude folders and `fileType: 'image'`. Use the `Files.File` type guard so each entry is correctly typed before mapping it into your collection schema:
 
 ```ts title="src/content.config.ts"
 import { defineCollection } from 'astro:content';

From dcff9ef4173ddbdc5bb5da9d59e5ad5ef1fefb9e Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:45:47 +0530
Subject: [PATCH 13/18] Update public/logos/imagekit.svg

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 public/logos/imagekit.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/logos/imagekit.svg b/public/logos/imagekit.svg
index 1387707921c94..dec83caccd8b5 100644
--- a/public/logos/imagekit.svg
+++ b/public/logos/imagekit.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 400 400" version="1.1" viewBox="0 0 400 400"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><g><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9zm19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4v.1z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6l4.1-21.2zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6l3.3-.1z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7zM180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2H180zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9zm25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1z" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9zm7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7l12.2 19zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8h3.5zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9zm19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7l3.4-.1z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4h-.1zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4l.2 2.9z" class="st0"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" viewBox="0 0 400 400"><style>.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style><path d="M10 195.8c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9s-3.6-.6-4.9-1.9m19.5 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M94.1 230.7c-6.8 18.4-30.6 21-27 1.9 1.2-6.6 2.6-13.4 3.9-20.9 2.1-9.8-7.2-2.5-10.3 5.4-.1.2-.2.3-.3.7-.5 2.7-4.5 25.3-4.9 27.5H44.4c2.4-13.4 4.2-24 5.9-33.3 1.6-9.1-7-3.7-10.5 3.5-.1.1-.1.2-.2.3l-5.9 29.4H21.9l8.6-42.8h11.8l-1.1 5.8c6.8-8.2 19.2-9.2 19.9 2.5 9-12.2 24.4-13.1 20.3 7l-1.4 7.6c-.7 3.7-.8 3.9-2.1 10.9-1.5 6.8 10 2.6 12.8-5.6h3.4z" class="st0"/><path d="M118.3 210.3c-5.2-9.5-15.3-.3-18.3 13.6-3.3 15.5 2.4 23.5 14.2 7.6zm23.2 20.3c-5.9 15.8-26.4 21.3-27.6 6.6-9.1 13.5-28.6 11-27-6.7 1.2-13.8 8-27.6 23.3-28.1h21.7l-.7 3.3c-2.7 13.1-4.5 20.7-6.4 30.6-1.9 9.8 10.6 2.4 13.4-5.6z" class="st0"/><path d="M166.4 209.6c-5.2-9.7-15.6-.3-18.7 13.8-3.4 15.9 2.6 24 14.4 7.9-.1-.1 4.3-21.7 4.3-21.7M180 202l-6.6 32.3c-3.6 19.9-9.4 37.8-34.8 30.6l7.9-8.2c4.3 3.3 7.4 3.7 9.8 2.3l.3-1.4 3.9-19c-9.5 11.9-27.8 8.9-26.4-8.5 1.7-19.7 13.1-27.5 21.7-27.9 1.6-.1 3.2-.2 5-.2zm11.7 22.5c13.5.4 15.1-15.8 12.9-17.5-1.7-1.3-5.5.3-8.6 5.2-1.8 2.7-3.3 6.6-4.3 11.4.1.3 0 .7 0 .9m25.7 6c-6.7 12.3-13.7 15.5-23.5 15.2-16.2-.5-16.4-21-8.5-33.6 6.5-10.1 17.6-12.2 22.5-8.1 4.4 3.5 4.5 10 1.9 15.1-3.9 7.1-11 9.8-18.4 9.5.1 4.1 1.6 8.9 5.3 10.7 6.6 3.1 13.5-2.1 17.6-8.7 0-.1 3.1-.1 3.1-.1" class="st0"/><path d="M240.7 207.9c-4 2.1-9.3 10-12.3 13.8l-.9 4.1c.9-.3 1.7-.7 2.4-1 13.8-5.7 17.5-20.6 10.8-16.9m7.6 37.4h-12.2l-9.5-14.7-2.7 14.7h-12l11.9-59.9h11.6c-2 10.7-3.8 18.9-5.8 29.6 2.9-4 7.1-9 11.2-11.4 12.2-7.4 15.8 14-4.7 22.7zm12.3-49.5c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9m19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M303.7 230.3c-6.8 18.3-32.1 23.2-27.3-.3l4.5-22.3h-5.1l2.1-5.2h4.1l2.3-11.1 12.2-2.4-2.7 13.5h6.9l-2.5 5.2h-5.4l-5.7 28.4c-2 10 10.2 2.6 13.1-5.8zm3.2 3.7c1.4-1.3 3-2 4.9-2s3.5.7 5 2c1.3 1.5 2 3.1 2 5s-.7 3.5-2 4.9c-1.5 1.3-3.1 2-5 2s-3.5-.7-4.9-2c-1.3-1.4-2-3-2-4.9 0-2 .7-3.6 2-5m29.9-38.2c-1.2-1.3-1.8-2.8-1.8-4.8.1-1.9.7-3.4 2-4.8 1.4-1.3 2.9-2 4.9-2s3.4.7 4.7 2c1.4 1.4 2.1 2.9 2.1 4.8 0 2-.8 3.5-2.1 4.8-1.4 1.3-3 1.9-4.9 1.9-2 0-3.6-.6-4.9-1.9m19.4 34.3c-6.8 18.5-32.6 23.5-27.8-.5l5.6-27.1h11.8c-2.7 14.5-4.7 23.3-6.7 33.4-2 10.3 10.8 2.7 13.7-5.7z" class="st0"/><path d="M378.6 223.3c-2.7-.5-5.3-1.7-8.2-3.9l4.5-6.1c1.1 1 2.4 1.8 3.7 2.3-1.4-6.3-6.8-12-11.6-5.2-4.3 6.2-8.1 24.9-.5 29.2 4.1 2.4 10-1.8 12.2-15.9v-.4zm20.4-8.7c-3.4 3.1-6.8 5.5-10.2 7-2.5 19.5-18.4 27.1-28.5 23.2-8-2.9-10.9-10.3-10-18.1.9-8.3 5.9-16.9 13.9-21.5s19.9-5 24 4.9c.7 1.6 1.1 3.7 1.1 6 3.4-.9 6.8-2.5 9.5-4.4z" class="st0"/></svg>
\ No newline at end of file

From 6c2077cde62338000950c346b4cd212e55e78fd8 Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:46:30 +0530
Subject: [PATCH 14/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 96edbab88978f..38848ee0e6bec 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -225,6 +225,8 @@ const ogImage = getOgImageUrl({
 <meta property="og:image" content={ogImage} />
 ```
 
+See the [ImageKit OG component documentation](https://imagekit.io/docs/integration/astro#og-image-component) for a complete list of supported props.
+
 ## Enabling client-side uploads
 
 To upload files directly from the browser, generate a short-lived authentication token on the server using the `getUploadAuthParams()` helper from `@imagekit/astro/server`. The private key stays server-side and is never sent to the browser.

From 7b073775d4e310c42df0d77d008dc5570a7c1f1b Mon Sep 17 00:00:00 2001
From: "ImageKit.io" <45416977+imagekitio@users.noreply.github.com>
Date: Thu, 21 May 2026 15:46:50 +0530
Subject: [PATCH 15/18] Update src/content/docs/en/guides/media/imagekit.mdx

Co-authored-by: Armand Philippot <git@armand.philippot.eu>
---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 38848ee0e6bec..278a91e61af57 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -237,7 +237,7 @@ This requires an [adapter](/en/guides/on-demand-rendering/) so the endpoint runs
 import type { APIRoute } from 'astro';
 import { getUploadAuthParams } from '@imagekit/astro/server';
 
-export const prerender = false;
+export const prerender = false; // Not needed in 'server' mode
 
 export const GET: APIRoute = () => {
   const authParams = getUploadAuthParams({

From 90be45d51246d91fc9e5a8f342e9dd623ff3c6ec Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Thu, 21 May 2026 16:01:55 +0530
Subject: [PATCH 16/18] Add ImageKit Video Player integration and usage
 instructions

---
 src/content/docs/en/guides/media/imagekit.mdx | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 278a91e61af57..854b350981ea4 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -190,6 +190,66 @@ To resize the video on ImageKit's side, pass dimensions inside `transformation`:
 />
 ```
 
+## ImageKit Video Player
+
+The [`@imagekit/video-player`](https://github.com/imagekit-developer/imagekit-video-player) ships a dedicated Astro integration via the `@imagekit/video-player/astro` subpath export. This gives you a native `IKVideoPlayer` Astro component with full TypeScript types ([`IKPlayerOptions`](https://imagekit.io/docs/video-player/overview#ikplayer-options), [`SourceOptions`](https://imagekit.io/docs/video-player/overview#source-options)). It works directly in `.astro` files without any framework adapter. It is built on [Video.js](https://videojs.com/) and adds AI-generated subtitles and chapters, automatic translation into 50+ languages, word-level karaoke-style highlighting, seek thumbnails, a floating sticky player, and adaptive bitrate streaming (HLS/DASH). No manual transcription work is required.
+
+Install the package:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install @imagekit/video-player
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add @imagekit/video-player
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add @imagekit/video-player
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Then use the `IKVideoPlayer` component in any `.astro` file:
+
+```astro title="VideoPlayer.astro"
+---
+import { IKVideoPlayer } from '@imagekit/video-player/astro';
+import '@imagekit/video-player/styles.css';
+
+const ikOptions = {
+  imagekitId: 'YOUR_IMAGEKIT_ID',
+  seekThumbnails: true,
+};
+
+const source = {
+  src: 'https://ik.imagekit.io/your_imagekit_id/video.mp4',
+  chapters: true,          // AI-generated chapter markers
+  textTracks: [{
+    autoGenerate: true,    // AI speech-to-text subtitles
+    default: true,
+    highlightWords: true,  // word-level highlighting
+    translations: [
+      { langCode: 'es', label: 'Spanish' },
+      { langCode: 'fr', label: 'French' },
+    ],
+  }],
+};
+---
+
+<IKVideoPlayer ikOptions={ikOptions} source={source} />
+```
+
+`chapters: true` tells the player to auto-detect chapters from the video content. `textTracks` with `autoGenerate: true` generates subtitles via AI speech-to-text; the `translations` array requests additional language tracks without any manual `.srt` files.
+
+:::note
+The Video Player SDK is currently in beta. Test thoroughly before using it in production. See the [Video Player overview in ImageKit documentation](https://imagekit.io/docs/video-player/overview) for the full list of options including playlists, shoppable videos, and signed URL support.
+:::
+
 ## Generating Open Graph image URLs
 
 Use the `<OgImage />` component to render OpenGraph and Twitter Card `<meta>` tags pointing at an ImageKit-optimized image. Place it inside your layout's `<head>`.

From 65ad9379acbca06538729dcd467969f8a312c252 Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Thu, 21 May 2026 16:07:03 +0530
Subject: [PATCH 17/18] Clarify AI subtitle generation and chapter detection in
 Video Player documentation

---
 src/content/docs/en/guides/media/imagekit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index 854b350981ea4..d6f3519fce27c 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -244,7 +244,7 @@ const source = {
 <IKVideoPlayer ikOptions={ikOptions} source={source} />
 ```
 
-`chapters: true` tells the player to auto-detect chapters from the video content. `textTracks` with `autoGenerate: true` generates subtitles via AI speech-to-text; the `translations` array requests additional language tracks without any manual `.srt` files.
+With `chapters: true`, the player auto-generates chapter markers from the video content. Setting `autoGenerate: true` in `textTracks` creates AI speech-to-text subtitles without any `.srt` files. Each entry in `translations` adds an automatically generated subtitle track in that language.
 
 :::note
 The Video Player SDK is currently in beta. Test thoroughly before using it in production. See the [Video Player overview in ImageKit documentation](https://imagekit.io/docs/video-player/overview) for the full list of options including playlists, shoppable videos, and signed URL support.

From 8ea335de8955c01d359c69fdaaeacb81025c32c9 Mon Sep 17 00:00:00 2001
From: Manu Chaudhary <manu@imagekit.io>
Date: Thu, 28 May 2026 12:55:07 +0530
Subject: [PATCH 18/18] docs(imagekit.mdx): address review comments

---
 src/content/docs/en/guides/media/imagekit.mdx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/content/docs/en/guides/media/imagekit.mdx b/src/content/docs/en/guides/media/imagekit.mdx
index d6f3519fce27c..9c90d0feed52d 100644
--- a/src/content/docs/en/guides/media/imagekit.mdx
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -16,7 +16,7 @@ When delivering through ImageKit, you get automatic format conversion (AVIF, Web
 
 ## Using ImageKit in Astro
 
-The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in Sharp service, so the integration can be added to an existing project without breaking existing assets.
+The [ImageKit Astro SDK](https://github.com/imagekit-developer/imagekit-astro) registers a custom [image service](/en/reference/image-service-reference/) that re-routes Astro's built-in `<Image />` and `<Picture />` components, plus Markdown and MDX images, through ImageKit. Local imports continue to be processed by Astro's built-in Sharp service. This means an existing project can add the integration without breaking existing assets.
 
 The SDK also provides a `<Video />` component, an `<OgImage />` component for social cards, and a server-side helper for issuing client-side upload tokens.
 
@@ -192,7 +192,9 @@ To resize the video on ImageKit's side, pass dimensions inside `transformation`:
 
 ## ImageKit Video Player
 
-The [`@imagekit/video-player`](https://github.com/imagekit-developer/imagekit-video-player) ships a dedicated Astro integration via the `@imagekit/video-player/astro` subpath export. This gives you a native `IKVideoPlayer` Astro component with full TypeScript types ([`IKPlayerOptions`](https://imagekit.io/docs/video-player/overview#ikplayer-options), [`SourceOptions`](https://imagekit.io/docs/video-player/overview#source-options)). It works directly in `.astro` files without any framework adapter. It is built on [Video.js](https://videojs.com/) and adds AI-generated subtitles and chapters, automatic translation into 50+ languages, word-level karaoke-style highlighting, seek thumbnails, a floating sticky player, and adaptive bitrate streaming (HLS/DASH). No manual transcription work is required.
+The [`@imagekit/video-player`](https://github.com/imagekit-developer/imagekit-video-player) package exports a dedicated Astro integration through the `@imagekit/video-player/astro` subpath. It provides a native `IKVideoPlayer` Astro component with full TypeScript types ([`IKPlayerOptions`](https://imagekit.io/docs/video-player/overview#ikplayer-options), [`SourceOptions`](https://imagekit.io/docs/video-player/overview#source-options)). You can use it directly in `.astro` files without any framework adapter.
+
+The player is built on [Video.js](https://videojs.com/) and includes AI-generated subtitles and chapters, automatic translation into 50+ languages, word-level karaoke-style highlighting, seek thumbnails, a floating sticky player, and adaptive bitrate streaming (HLS/DASH). No manual transcription work is required.
 
 Install the package:
 
@@ -247,7 +249,7 @@ const source = {
 With `chapters: true`, the player auto-generates chapter markers from the video content. Setting `autoGenerate: true` in `textTracks` creates AI speech-to-text subtitles without any `.srt` files. Each entry in `translations` adds an automatically generated subtitle track in that language.
 
 :::note
-The Video Player SDK is currently in beta. Test thoroughly before using it in production. See the [Video Player overview in ImageKit documentation](https://imagekit.io/docs/video-player/overview) for the full list of options including playlists, shoppable videos, and signed URL support.
+The Video Player SDK is currently in beta. Test thoroughly before using it in production. See the [Video Player overview in ImageKit documentation](https://imagekit.io/docs/video-player/overview) for the full list of options, including playlists, shoppable videos, and signed URL support.
 :::
 
 ## Generating Open Graph image URLs