Manage Images
Prismic's image field is a convenient way to add images to a document.
The image field can be configured with predefined image dimensions, so when an editor uploads an image, it will be cropped automatically to the right dimensions. The editor can customize the crop, the alt text, the description, and more.
Images are all managed in Prismic’s built-in Media Library and automatically compressed, formatted, and optimized.
Add an image
To add an image, click on the image field. This will open the Media Library. Here, you can upload or select an image. To insert an image, select the one you want, and click Add to page. (If you upload an image, wait for it to finish loading first.)
If responsive views are configured for images in your custom type, once you have inserted the image, arrows will appear on its left and right — denoting each responsive view. You can use those to see how the image looks in each of them.
Edit an image
Once you have added an image, you can edit it. There are three buttons to the right of the image:
- The frame icon will open the image editor. It allows you to crop & resize your image. It will also display one or more responsive views. The responsive views are listed in the left sidebar. You can choose each responsive view and customize their zoom and cropping.
- The magnifying glass icon lets you to replace the selected image.
- The trash icon will clear your selection and remove the image.
Add alt text to an image
Alt text is a short description of your image. It helps with SEO and accessibility.
There are two ways to add alt text in Prismic.
- From the Media library: when you upload or select an image, you will see a panel on the right side with an Alternative text field where you can specify alt text for that image.
- From a document: after adding an image to a document, you will see an alt text field next to it. If alternative text for this image was filled in the Media Library, it will appear here. You can customize the alt text for each translation of your document and each responsive view of the image by changing the content of this alt text field.
Add metadata to an image
Along with alt text, you can add other metadata to images when you add them to the Media Library.
To edit an image’s metadata, select an image in the Media Library and browse the right-hand side panel’s two tabs, Description and More info. They give you the following options:
- Tags, for categorizing your Media Library’s assets
- Copyright, for ownership
- Private Notes, to help with internal organization and searching
Supported media
These are the supported image formats for images hosted in Prismic:
- PNG
- JPEG
- WEBP
- GIF
- JPE
- JPG
- ICO
- JFIF
Maximum file size
The maximum file size allowed depends on the file type.
The maximum image size is 10MB.
The maximum size for any other file type is 100MB.
Video hosting
While it is possible to upload videos (maximum 100MB file size) to your Media Library, this can quickly consume your CDN allowance. We recommend hosting videos on a dedicated platform like YouTube or Vimeo and then embedding them on your website. Services like YouTube and Vimeo offer video compression support with an excellent video player.