ATTENTION: We've changed the way we handle SVG's, read more here!
What is happening?
Prismic is launching a new partnership with imgix and have developed a new feature to optimize dynamically compress all your images.
We've chosen to do this to improve your website performance, which is impactful for your first rendering of the page & for SEO.
Changes in the URL
What are the transformation that we are doing automatically?
At the moment for all images distributed through the API, we are using the auto compress & format transformations that will distribute the right format for each browser & apply some compression on images.
compress : Note: we strive to reduce file size while maintaining as much visual information as possible, so the operations applied are subject to change.
format : is respected, so images will be served in a WebP format whenever possible. If the WebP format is not supported, images that contain transparency will be served in a PNG8 format, if supported, and all others will be served as JPEG. The quality standard (q) is set to 45.
See docs here : https://docs.imgix.com/apis/url/auto/auto#compress
What happens for the old images?
For old images we will not apply any transformation in the resizing & cropping, we will just proxy those images through imgix in order to compress them & distribute the right format dynamically for each browser.
What happens for new image cropping & resizing?
For each new image that you crop or resize through the new image editing popup, the system will add new parameters to the url to define the cropping & the size. This also will automatically happen for responsive views when you add an image to the Image field.
The parameters that are used are
rect for the cropping,
w for the width, &
h for the height.
Below is an example of a base image url distributed through imgix :
And here is an example of that same image after being cropped and resized:
Warning about GIFs
Before you start using GIFs, it's important that you read the information below. Since GIFs are much larger than standard images and can have a much larger impact on your bandwidth consumption, we wanted to give you a little more info to ensure the success of your GIFs. The most important thing to do is use
auto=format,compress for animated GIFs. It will actually turn those GIFs into an animated WebP in supported browsers (such as Chrome).
It's best to not compress your GIFs before serving them with imgix. Since we optimize images, uploading a pre-compressed GIF can have the opposite effect, which can degrade quality and increase the GIF's file size.
Changes in the interface
The new Image edit popup
Along with the new imgix integration, we've made some changes to the image edit popup that will allow you to easily switch from one responsive view to another.
Before you had to switch from responsive view to another in the editor & then open the cropper popup. But now you can easily switch between views.
Here's what the new popup looks like:
And below you'll see what this looked like with the old popup:
No more extra whitespace
Some people have mentioned that the old image cropper was not really precise and allowed them to create some white margin in their images by zooming out or moving things around. The new cropper will remove this behavior.
For existing images we will not change anything but as soon as you will want to update your cropping the new cropper will ask you to redefine your cropping. In some cases, you might have to change your custom type definition to fit your design, as an FYI.
See the image in real size
Since the popup is smaller than most of the images that you're displaying on the website, we have also provided a link to see the image in real size. Just click the link to see what it will look like!
What do you have to do to get ready for this?
In most cases, you won't need to do anything at all. When the switch is made to the new imgix integration, everything should continue to work properly. There are a few cases, though, where you might need to prepare for the switch. Some example include:
- You have a proxy in front of your site
- Static site generators with white list domain configuration
- Already using an image optimization provider
If so, you'll need to make some changes to your website before this feature goes live for everyone. We have outlined what you need to do below. If you need help with this, feel free to contact us.
If you're using your Own CDN to customize your domain or because you negotiated a pricing
First if your own CDN doesn't provide dynamic optimization, this feature will not work. Since you're putting a CDN in front of our image API, we will not get the necessary information to recognize the browser requesting the image & we will not be able to 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 which is changing from our S3 bucket or CDN which is what it used before.
If you're using your Own imgix Integration
You can keep your integration but that might conflict with our own integration. Our dev team is looking into this currently to see what will happen in this case.
No matter what, though, we recommend switching from your imgix integration to ours because it will help reduce your total bandwidth consumption from Prismic and hopefully keep you well within your monthly limit.
If you're using your Own Image Optimization Service (Proxy: Cloudinary, fastly, ...)
In order to make this work you will need to change the domain. Be sure that they accept imgix parameter and that the new url structure won't break your own integration.
If you whitelist domain (Static site generator or any other case)
In a case where you whitelisted domains for your project you will have to update your configuration in order to whitelist the new image domain. All images are currently distributed through the domain
my-repo.cdn.prismic.io and will be now distributed through the
images.prismic.io domain. You should be sure that you whitelist this new domain in order for your images to continue to work on your site.
How to apply your own transformations
Now that our images will be served through imgix, you will be able to add any other imgix transformations that you would like. You can refer to the imgix documentation for anything else that you need.
What happens for SEO with old images?
The Prismic dev team plans to setup redirection from old image urls to the new ones. For the time being, though, those old image urls will continue to exist, so no links should be broken.
Update – January 14, 2020: This feature is now available by default in every repository.
Update – August 14, 2019: If you're interested in trying out this new feature early, feel free to reach out to us via our chat system in the bottom-right corner of the page. You can create a new project and ask us to activate the feature for you. Or if you're an Enterprise Client you can reach out to your customer success manager in order to have access to the feature in one of your Environments.