Prismic Image Optimization with imgix

We've partnered with Imgix to provide Prismic users with image optimization, next-gen image support, and an improved interface that will give them greater control when cropping and editing their images.

So, what is Prismic?

To keep it simple, we're a technology-agnostic headless CMS. Is that simple?

Well, to keep it short at least, when using Prismic, developers are able to pair their CMS with whichever frameworks and technologies that they prefer. We also try to develop features that maximize the benefits of their other technology choices. A great example of this is the fact that we are a component CMS - meaning that you can use the same component-based approach on your frontend and your backend.

But we know that a CMS doesn't stop with developers and so, even though we see them as our focus, we've also developed an intuitive user experience for content creators. That component-based approach also means that our Slices feature allows content creators (including the most technologically challenged out there) to independently create and edit pages - giving them more autonomy and leaving developers with more time to focus on their actual product.

We're working hard at providing the best possible developer and editor experience - and that's why offering image optimization and an improved user interface for manging images was so important.

Image Optimization with Imgix

We're working hard at providing the best possible developer and editor experience - and that's why offering image optimization and an improved user interface for manging images was so important.

You've heard it all before, time for us to puff out our chests and tell you how great we are.

But, no, when we work on new features, we work on things for our users, not just for us - and this one is no different (I know, we sound amazing. Don't we?).

So, we're excited to announce our partnership with imgix (a service that transforms images on demand and in real-time via a simple URL API) to deliver our new Image Optimization feature, but we're even more excited to see what it will do for you.

Improved Images. Improved Experience.

Image Optimization is an example of a feature that will improve the experience for all Prismic users. That isn't to downplay the importance of any of the other new features that we roll out, but it is great to share news about a feature and be able to say that EVERYONE should pay attention.

So how will it help you?

Marketers and Designers

It will make a world of difference. Right off the bat, the improved user interface will make it easier to select, crop, and adjust images. This will help you to save time whenever you are creating new content and allow you to be sure that images look just the way you want them to on your page.

And to make that even better, images will be optimized based on how your end-users are visiting your page. If you've got someone using Chrome on a mobile they will get a Webp that is optimized for their browser, even though they've uploaded a heavy JPG file.

It's sometimes easy to overlook the experience of your end users when you are producing content, but this feature will ensure that they have the best possible experience whenever they visit your website or app.

Developers

You've probably got this figured out from the title, but in case you are interested in a better explanation of the exact details of what has changed, here are the basics (if you aren't go ahead and skip to the next paragraph, I won't judge you).

We've replaced ImageMagick with imgix, meaning that, from now on, instead of images being forwarded through our bucket and custom CDN, we're now forwarding image links through imgix for transformations. So the transformation requested is computed on the fly on the first request and then cached by the provider.

OK, we got through that, now I can tell you about some more of the benefits.

You first concern is probably: what will I have to do to get this working?

Well, we've got some good news on that front. This will work right out of the box without you having to do anything.

With this feature, we will now support next-gen images. So formats like WebP will now be displayed whenever the end users browser supports them.

This will even give you the possibility of using the imgix API to generate your own transformations. You can refer to the imgix documentation to see all the transformations you have available.

And improved image compression also means that your CDN consumption will go down - our own tests have shown that images will be roughly 50% smaller.

We know that this is more of a win for us, but it is still good news for those of you out there who are consuming bandwidth like it is going out of style.

SEO and Performance

The real reason to be excited about this feature is the impact that it will have on your SEO. End user image optimization and compressed images means faster loading times for your websites, and that means better SEO.

No matter where SEO falls in your marketing strategy you can't undersell its importance and any improvement is a step in the right direction.

Our own tests have shown that Image Optimization will improve loading times considerably and users will see their website's time to interactive drop by an average of more than a second.

That isn't to say that you can ignore the other SEO best-practices that you need to follow when it comes to images, but you can get a great overview of these from imgix themselves.

Update – January 14, 2020: This feature is now available by default in every repository.

Update – August 14, 2019: We've already worked out most of the kinks, but the feature is still in beta testing for the time being. That doesn't mean that you can't start using it today, but you will need to get in touch with us to request to test it. You can do this by just clicking on the chat icon in the bottom right corner and telling us that you would like to beta test the feature. Don't be shy! Let us know if you would like to try it out, but if not, all Prismic users can look forward to Image Optimization in the near future.