Here are some of the most frequently asked questions about the Imgix integration.*
I use my own CDN, and it doesn't provide dynamic optimization
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.
What happens to old Prismic images?
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.
Which parameters get added to the URL when cropping & resizing?
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.
-
rect: Source Rectangle Region | Size Parameters | imgix URL API Documentation -
w: Image Width | Size Parameters | imgix URL API Documentation -
h: Image Height | Size Parameters | imgix URL API Documentation
I use my own Imgix Integration
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.
I use my own Image Optimization Service (Proxy: Cloudinary, fastly, ...)
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.
What happens if I whitelisted domains? (Static site generator or any other case)
Make sure that you whitelist this new domain for your images to continue to work on your site: images.prismic.io.
What happens if my app is pre-rendering pages?
You'll benefit from the image optimization services as the image URLs are still loaded from the browser.
Server-side rendering with React
If you're using server-side rendering with React, you might want to integrate the react-Imgix library. Since react-imgix uses srcset and 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: Automatic | Automatic Parameters | imgix URL API Documentation
If I remove the "compress" parameter, will I get the original, uncompressed image file?
Yes.
Some images are being too aggressively compressed. Can I turn off compression without having to alter the URL rendering?
Yes, @prismicio/helpers v2.1.0 includes Image helpers, such as prismicH.asImageSrc(), which allow you to pass an object of Imgix API options to format your image. In these options you can disable image compression.
What if we remove parameters appended to the image URL returned by Prismic's API?
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.
How are GIFs handled?
Imgix will compress animated GIF files. Don't compress animated GIFs before uploading them to your Prismic Media Library.
Are WebP images supported?
Yes, you can now perform the full suite of Imgix operations with WebP images.
Is the SVG format supported?
No, SVG's are treated as files and not images because of security vulnerabilities; you can read more about this here.
What happens with PDFs and any other file types that aren't images?
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.
Does this service automatically serve an optimized image based on the device (Retina, Mobile)
No, but this can be handled in your code. Have a look at the Imgix tutorial and best practices Responsive Images with srcset and Serve Responsive Images using imgix.js.
Caching
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: Automatic | Automatic Parameters | imgix URL API Documentation