Read more about the Prismic imgix integration here.
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
sizes, it allows the browser to render the correctly sized image immediately after the page has loaded. Read more here: https://github.com/imgix/react-imgix#server-side-rendering
I'm using Gatsby or a static-site generator
If you keep the image URLs unchanged in your statically generated files, URLs are still loaded from the browser and you'll benefit from the image optimisation services.
If you use the gatsby-plugin-sharp package though, you won't benefit from image processing as image files are locally downloaded and served from your site files folder.
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
What happens if I remove these "compress" parameter, will I get the original, uncompressed image file?
I'm seeing that some images are being too aggressively compressed. Is there any way that I can turn off compression without having to alter the URL rendering?
There is no option for turning off the default compression yet. However you can alter the URL (remove the
auto=compress,format parameters) in order to get the uncompressed image file.
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 to optimize images before uploading them to your Prismic Media Library.
How are GIFs handled?
Animated GIF files will be compressed by imgix. 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. Read more here: https://blog.imgix.com/2019/08/13/announcing-support-for-webp-and-svg
Is the SVG format supported?
You can add SVG images to your documents and have them returned through the api, although they can’t be cropped & resized using the image editor in prismic.io for now.
What happens with PDF (and any other filetype that is not an image)?
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)
If we use our own image optimization service, is it fully compatible or will there be any conflicts?
You will need to strip down the parameters when passing the URL to your service to avoid conflicts.
What happens with old image URLs after the switch? How long will they be available for?
Old image URLs will still be reachable after the release of the imgix integration. We don't have any timeline on how long they'll be available for, so we advise that you do not keep caching them.
I'm using a proxy to rewrite the URLs of images sent by Prismic, what will happen?
If you want to benefit from image optimization (compress and format options), you'll have to pass the user-agent to your proxy. So that your proxy can pass the user agent when it's making the requests to the actual images URLs.
Given the fact 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 the image is cached by imgix CDN. Read more here: https://docs.imgix.com/apis/url/auto/auto#format