The Image field

When editing documents, you likely run into the Image field. The prismic.io Image field is capable of modifying the width, height, and framing of the image as well as providing image views to handle responsive images.

The repository administrator might limit some of these capabilities when configuring the image field, so this article assumes that all the image capabilities have been configured.

Choose your image

The first step is adding an image to the Image field.

If your image field is empty, then click on the image field to open the media gallery. This will allow you to select an image already in your media library or to upload a new image.

Once your image is uploaded, click on the + button to add it to your document.

prismic.io automatically creates the responsive view(s) once you've selected the image.

Crop or resize your image

prismic.io offers tools to directly edit your images inside your documents.
Click the "Crop & Resize" button to reframe, zoom, and/or crop the image.

Note that gif and svg image types cannot be edited in prismic.io.

Handle responsive images

You can navigate through your responsive views by clicking on the dots below the image field. 

For each responsive view, you can crop/resize or upload an entirely new image.

Add alt and description to images

You can add metadata to your assets such as alt text and descriptions for better SEO. For that, you can click on the detail button of your image and add your metadata.

Did this answer your question?