---
title: "Image"
description: "This article explains what the image field is and how to configure it."
meta_title: "Image"
category: "fields"
audience: developers
lastUpdated: "2026-04-23T01:17:46.000Z"
---

Content writers can upload, crop, and manage images through the [Page Builder](https://prismic.io/docs/guides/page-builder.md).

Prismic serves images through [imgix](https://www.imgix.com/), a powerful image hosting platform, enabling compression, formatting, and web optimization.

Prismic provides components for [Next.js](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), and [SvelteKit](https://prismic.io/docs/sveltekit.md) to display images.

**Next.js example:**

```tsx
import { PrismicNextImage } from "@prismicio/next";

<PrismicNextImage field={slice.primary.my_image_field} />;
```

**Nuxt example:**

```vue-html
<PrismicImage :field="slice.primary.my_image_field" />
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicImage } from "@prismicio/svelte";
</script>

<PrismicImage field={slice.primary.my_image_field} />
```

[Learn how content writers manage images](https://prismic.io/docs/guides/manage-images.md)

# Add an image to a content model

Image fields are added using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents.

* **Type Builder:**

  > **Important**
  >
  > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**.

  1. **Watch for changes**

     In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project.

     ```sh
     npx prismic sync --watch
     ```

     > **Tip**: You can pull Type Builder changes at any time using `npx prismic
     >   sync`.

  2. **Add an image field**

     In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add an **image** field and provide the following:

     * **Label**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
     * **API ID**: The property name in the Content API. Use a short, snake-cased name.

  3. **(Optional) Add responsive sizes**

     Images can be configured with multiple responsive sizes. Content writers can upload differently sized images with predetermined dimensions.

     Open the field settings and add as many responsive sizes as desired.

     You can now close the Prismic CLI `sync` command or add your next field.

* **Prismic CLI:**

  > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details.

  1. **Add an image field**

     Use the `prismic field add image` command to add an image field to a slice.

     ```sh
     npx prismic field add image hero --to-slice MySlice
     ```

     Use `--to-type` to add the field to a page type or custom type instead.

     ```sh
     npx prismic field add image hero --to-type page
     ```

     > Responsive sizes are not supported by the Prismic CLI. Add them in the [Type Builder](https://prismic.io/docs/type-builder.md) or [Slice Machine](https://prismic.io/docs/slice-machine.md).

* **Slice Machine:**

  1. **Open Slice Machine**

     In your Prismic project, start Slice Machine to begin editing content models.

     ```sh
     npx start-slicemachine --open
     ```

  2. **Add an image field**

     In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add an **image** field.

     The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.

     The **API ID** determines the property name in the Content API. Use a short, snake-cased name.

  3. **(Optional) Add responsive sizes**

     Images can be configured with multiple responsive sizes. Content writers can upload differently sized images with predetermined dimensions.

     Open the field settings and add as many responsive sizes as desired.

# Display images

Prismic provides image components for Next.js, Nuxt, and SvelteKit.

**Next.js example:**

```tsx
import { PrismicNextImage } from "@prismicio/next";

<PrismicNextImage field={slice.primary.my_image_field} />;
```

See the [`<PrismicNextImage>` documentation](https://prismic.io/docs/technical-reference/prismicio-next/v2.md#prismicnextimage) to learn more.

**Nuxt example:**

```vue-html
<PrismicImage :field="slice.primary.my_image_field" />
```

See the [`<PrismicImage>` documentation](https://prismic.io/docs/technical-reference/prismicio-vue/v4.md#prismicimage) to learn more.

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicImage } from "@prismicio/svelte";
</script>

<PrismicImage field={slice.primary.my_image_field} />
```

See the [`<PrismicImage>` documentation](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismicimage) to learn more.

# Transform images through the API

You can apply [any imgix transformation](https://docs.imgix.com/apis/rendering) to your image using the `imgixParams` prop. All Prismic image components support the `imgixParams` prop.

This example makes an image black and white:

**Next.js example:**

```tsx {5}
import { PrismicNextImage } from "@prismicio/next";

<PrismicNextImage
  field={slice.primary.my_image_field}
  imgixParams={{ sat: -100 }}
/>;
```

**Nuxt example:**

```vue-html {3}
<PrismicImage
  :field="slice.primary.my_image_field"
  :imgix-params="{ sat: -100 }"
/>
```

**SvelteKit example:**

```svelte {7}
<script lang="ts">
  import { PrismicImage } from "@prismicio/svelte";
</script>

<PrismicImage
  field={slice.primary.my_image_field}
  imgixParams={{ sat: -100 }}
/>
```

[See all of the available imgix parameters](https://docs.imgix.com/apis/url)

# Images are automatically compressed

All images distributed through the API have an `auto=compress,format` URL parameter. The parameter automatically compresses the image and serves the most efficient format (usually AVIF).

It's best **not to** compress your images before serving them with imgix. Since we optimize images, uploading a pre-compressed image can have the opposite effect, degrading the quality and increasing the image's file size.

imgix's automatic compression will turn GIFs into an animated WebP in supported browsers (such as Chrome).

To disable formatting and compression, set `auto: null` in your `imgixParams`.

**Next.js example:**

```tsx {5}
import { PrismicNextImage } from "@prismicio/next";

<PrismicNextImage
  field={slice.primary.my_image_field}
  imgixParams={{ auto: null }}
/>;
```

**Nuxt example:**

```vue-html {3}
<PrismicImage
  :field="slice.primary.my_image_field"
  :imgix-params="{ auto: null }"
/>
```

**SvelteKit example:**

```svelte {7}
<script lang="ts">
  import { PrismicImage } from "@prismicio/svelte";
</script>

<PrismicImage
  field={slice.primary.my_image_field}
  imgixParams={{ auto: null }}
/>
```

# Check if an image field has a value

Use `isFilled.image()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if an image field has a value.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.image(slice.primary.my_image_field)) {
  // Do something if `my_image_field` has a value.
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

Here is what an image looks like from the Content API:

```json
{
  "example_image": {
    "id": "uYM_PQJ8VvY",
    "url": "https://images.prismic.io/slicemachine-blank/dcea6535-f43b-49a7-8623-bf281aaf1cb2_roller-skating.png?auto=compress,format",
    "alt": "An illustration of a roller skater.",
    "copyright": null,
    "dimensions": {
      "width": 2048,
      "height": 1536
    }
  }
}
```

When an image supports [responsive sizes](#optional-add-responsive-sizes), each size is added as a property:

```json {5-20}
{
  "example_image": {
    // ...
    "id": "uYM_PQJ8VvY",
    "Mobile": {
      "id": "uYM_PQJ8VvY",
      "url": "https://images.prismic.io/slicemachine-blank/dcea6535-f43b-49a7-8623-bf281aaf1cb2_roller-skating.png?auto=compress,format&w=400&h=300",
      "alt": "An illustration of a roller skater.",
      "copyright": null,
      "dimensions": {
        "width": 400,
        "height": 300
      },
      "edit": {
        "x": 0,
        "y": 0,
        "zoom": 1,
        "background": "transparent"
      }
    }
  }
}
```