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 @@
+
\ 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..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 `` element when you cannot use the `` 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 `` component, an `` 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 `` 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 `` 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 `` and `` 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.
See the full API reference for the [``](/en/reference/modules/astro-assets/#image-) and [``](/en/reference/modules/astro-assets/#picture-) components.
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..245f704f76484
--- /dev/null
+++ b/src/content/docs/en/guides/media/imagekit.mdx
@@ -0,0 +1,423 @@
+---
+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 `` and `` 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 `` component, an `` 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:
+
+
+
+ ```shell
+ npm install @imagekit/astro
+ ```
+
+
+ ```shell
+ pnpm add @imagekit/astro
+ ```
+
+
+ ```shell
+ yarn add @imagekit/astro
+ ```
+
+
+
+## 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/"
+
+# Only needed if you generate upload auth tokens on the server
+PUBLIC_IMAGEKIT_PUBLIC_KEY=""
+IMAGEKIT_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/',
+}),
+```
+
+## Using ImageKit images
+
+With the integration installed, Astro's built-in `` and `` 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';
+---
+
+```
+
+The integration adds an additional `transformation` prop on ``, ``, 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';
+---
+
+```
+
+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';
+---
+
+
+
+
+
+
+
+
+
+
+
+```
+
+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 `` 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';
+---
+
+```
+
+To resize the video on ImageKit's side, pass dimensions inside `transformation`:
+
+```astro title="Component.astro"
+
+```
+
+## Generating Open Graph image URLs
+
+Use the `` component to render OpenGraph and Twitter Card `` tags pointing at an ImageKit-optimized image. Place it inside your layout's ``.
+
+```astro title="Layout.astro"
+---
+import { OgImage } from '@imagekit/astro';
+---
+
+
+
+
+
+
+```
+
+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 }],
+});
+---
+
+```
+
+## 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`, `expire`, and `publicKey` to the `upload()` function from [`@imagekit/javascript`](https://github.com/imagekit-developer/imagekit-javascript). Install it as a direct dependency:
+
+
+
+ ```shell
+ npm install @imagekit/javascript
+ ```
+
+
+ ```shell
+ pnpm add @imagekit/javascript
+ ```
+
+
+ ```shell
+ yarn add @imagekit/javascript
+ ```
+
+
+
+A minimal upload form on a `.astro` page:
+
+```astro title="src/pages/upload.astro"
+
+
+
+
+
+```
+
+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
+
+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:
+
+
+
+ ```shell
+ npm install -D @imagekit/nodejs
+ ```
+
+
+ ```shell
+ pnpm add -D @imagekit/nodejs
+ ```
+
+
+ ```shell
+ yarn add -D @imagekit/nodejs
+ ```
+
+
+
+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 } 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,
+});
+
+const gallery = defineCollection({
+ loader: async () => {
+ const assets = await client.assets.list({
+ type: 'file', // exclude folders
+ fileType: 'image', // only image files
+ skip: 0,
+ limit: 50,
+ });
+
+ return assets
+ .filter((asset): asset is Files.File =>
+ 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 ?? '',
+ tags: asset.tags ?? [],
+ }));
+ },
+ schema: z.object({
+ url: z.string().url(),
+ 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 `` 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 }) => (
+
+))}
+```
+
+## 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: '',
+ 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' },