Here are some of the most frequently asked questions about the Imgix integration.*
Image Optimization will not work. Since you're putting a CDN in front of our image API we aren't able get the necessary information to recognize the browser requesting the image and won't provide the right image for your browser.
On top of that, you will have to change your configuration to point to the new image domain: images.prismic.io.
We don't apply any transformation in the resizing and cropping of old images. We proxy those images through Imgix to compress them and distribute the right format dynamically for each browser.
The system will add parameters to the URL to define the cropping & the size for each image you edit in the image editor. This also will automatically happen for responsive views when you add an image to the Image field.
The used parameters are
rect for the cropping,
w for the width, &
h for the height.
Here is the official Imgix documentation for these parameters.
We recommend switching from your Imgix integration to ours to avoid conflict. It will help reduce your total bandwidth consumption from Prismic and hopefully keep you well within your monthly limit.
To make this work, you will need to change the domain. Be sure that they accept Imgix parameters and that the URL structure of the optimized images won't break your own integration.
Make sure that you whitelist this new domain for your images to continue to work on your site:
You'll benefit from the image optimization services as the image URLs are still loaded from the browser.
If you're using server-side rendering with React, you might want to integrate the react-Imgix library. Since
sizes, it allows the browser to render the correctly sized image immediately after the page has loaded. Read more here: GitHub - imgix/react-imgix: React component to display imgix images
Prismic Image URLs now have the "compress" parameter added by default; how can we make sure that the quality is not affected?
More about what the "auto compress" operation does from the Imgix docs: https://docs.imgix.com/apis/url/auto/auto#compress
Some images are being too aggressively compressed. Can I turn off compression without having to alter the URL rendering?
There is no option for turning off the default compression. However, you can alter the URL to get the uncompressed image file by removing the
You will get the full original image attached to the document.
How can we ensure that the quality will be good enough and that the image will not be pixelated on specific devices?
Users can see how Imgix transforms images by clicking on the "View real size image" link on the Picture editing popup in the Prismic UI. Alternatively, users can test how Imgix processes images with the Sandbox available here: https://sandbox.imgix.com/
What do we need to upload to Prismic? Full image resolution or should we “optimize” it first on our side?
We don't recommend optimizing images before uploading them to your Prismic Media Library.
Imgix will compress animated GIF files. Don't compress animated GIFs before uploading them to your Prismic Media Library.
Yes, you can now perform the full suite of Imgix operations with WebP images.
No, SVG's are treated as files and not images because of security vulnerabilities; you can read more about this here.
Any non-image file will be served directly from our CDN (Cloudfront). URLs remain the same as before the introduction of the Image Optimization functionality.
Given that we use the
auto=format parameter by default, Imgix will compile the various data available (headers, user agents, and image analytics) to select the optimal image format for your user. This format is served back, and Imgix CDN caches the image. Read more here: https://docs.imgix.com/apis/url/auto/auto#format