ATTENTION: We've changed the way we handle SVG's, read more here!

How it works

Prismic launched a new partnership with Imgix and have developed a new feature to optimize dynamically compress all your images. Read: Prismic + Imgix integration.

If you already know the Image field you know that it lets you set up responsive views from the Custom type builder, which gives you total control on the way your responsive images are handled on the front end of your app. Then in the Writing room, you can select your images, and crop or zoom 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.

That way you’ll be able 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, and these just to name a few. See the complete Imgix documentation to check out all of the possibilities.

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.

Some examples

Now 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 a raw 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

Change default compression and formatting settings

This parameter lets you control the compression of the images. Prismic adds compress as the default value to every served image. You can modify this by replacing this value in your code, like in this following example.

After saving our response in a constant, like shown before, we remove the compress value of the query string and then add the output quality method: q set to 80. In this case, we are using a template string to concatenate the values:

const newImageUrl = `${imageUrl}&q=80`

This way you can control the output quality of your image.

Mask Image - mask

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

Query string example: ?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.

Query string example: ?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 capabilities of Imgix before uploading your images to Prismic then you can upload them to The Imgix Sandbox from your local machine to play with all the possibilities that Imgix has to offer. To see all of the available parameters read their API reference.

Did this answer your question?