Image

This article explains what the image field is and how to configure it in the custom type builder.

Prismic serves images from a powerful image hosting platform, enabling compression, formatting, and web optimization.

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

{
  "example_image": {
    "dimensions": {
      "width": 2048,
      "height": 1536
    },
    "alt": null,
    "copyright": null,
    "url": "https://images.prismic.io/slicemachine-blank/dcea6535-f43b-49a7-8623-bf281aaf1cb2_roller-skating.png?auto=compress,format",
    "id": "ZZ0naHt8YpyOwHlT"
  }
}

Add an image to a content model

Before you can start using images in Prismic, you will need a project set up. To get started, choose your framework from the docs homepage.

Once you have a project, open the slice or type that you want to edit and add an image field.

You can define responsive views for your image. For each view, Prismic will serve a version of your image with the given dimensions. However, you can also customize image dimensions in your code using the SDKs that Prismic provides.

Edit images

The Page Builder provides functions for uploading, cropping, and managing images. To learn more, read Manage Images.

Render images

After you have fetched data from your repository, you need to render it in your UI code. The Prismic SDKs provide functions and components for rendering images:

import { PrismicImage } from "@prismicio/react";

<PrismicImage field={doc.data.myImageField} />;

Or in Next.js:

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

<PrismicNextImage field={doc.data.example_image} />;

Prismic’s image optimization feature is possible thanks to our partnership with Imgix. We dynamically compress and optimize your images, improving your website performance and SEO.

You can apply any Imgix transformation to your image. This example will make an image black and white:

import { PrismicImage } from "@prismicio/react";

<PrismicImage
  field={doc.data.myImageField}
  imgixParams={{ sat: -100 }}
/>;

Or in Next.js:

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

<PrismicNextImage
  field={doc.data.example_image}
  imgixParams={{ sat: -100 }}
/>;

All images distributed through the API have the Imgix URL parameter auto: "compress,format".

The format operation distributes each image in the proper format for the browser. Images are served in WebP format wherever possible. If WebP is not supported, images with transparency are served as PNG8. All others are served as JPEGs.

The compress operation reduces the file size while maintaining as much visual information as possible.

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

Refer to the Imgix documentation to learn more about image formatting options.