Transform and edit your Prismic images

Prismic for Content Creators
1

You can edit or transform your images just by modifying the URL of your Image fields. Keep reading to learn how to do it!

How it works

Prismic's partnership with Imgix automatically optimizes and compresses all your images. The Image field lets you set up responsive views which gives you total control on the way your responsive images are handled on the front end of your app. Then you can select your images, and crop them as you like.

But, what if you want to have more options like the ones you have by using an editing program?

You can do this by manually editing the URL string to include as many Imgix settings as you want:

  • Automatically add filters by making adjustments to brightness, blur, contrast, and other styling settings
  • Add watermarks, trim, rotate; add masks
  • You can even add a face selection parameter that recognizes faces and zooms in the images exactly where they are found

See the complete Imgix documentation to check out all options.

Prismic automatically adds the auto=compress parameter into the URL so that all images are compressed and optimized. If you wish to modify this automatic parameter read the Automatic - auto example below.

Examples

Let’s see some practical examples in action:

Before doing anything, we save the image URL coming from Prismic in a constant:

const imageUrl = document.illustration.url

This is an example of what an Image field response looks like:

https://images.prismic.io/your-repo-name/cbd5772b-075e-4754-8e3a-d39810c4ff4f_image-name.jpg?auto=compress,format

Mask Image - mask

This option allows you to crop your images in different shapes. You can round the corners, make it hexagonal, or circular, add a gradient, etc. In this example, we are making our image circular. See all the available options for this parameter.

?mask=ellipse&w=200&h=200

Add it to your code:

const newUrl = `${imageUrl}?mask=ellipse&w=200&h=200`

Monochrome - monochrome

This parameter takes one hexadecimal color value and adds it to the image as a monochromatic hue. Read about more similar parameters to stylize images.

?monochrome=3d5977

Add it to your code:

const newUrl = `${imageUrl}?monochrome=3d5977`

Face detection

These set of parameters selects a face on which to center an image. You can zoom in, out, and add padding. The face detection effect uses three parameters that you add to the URL, see the next examples:

  • Fit query string: &fit=facearea

  • Face index query string: &faceindex=2

  • Face padding query string: facepad=2.8

Add it to your code:

const newUrl = `${imageUrl}&fit=facearea&faceindex=2&facepad=2.8`

The Imgix sandbox

If you want to test the Imgix capabilities you can upload them to The Imgix Sandbox to test all the available options. To see all of the available parameters read their API reference.