Image optimization with Next.js

Hey Prismic Community,

currently using Prismic the first time in combination with Next.js and curious on what’s the best way to deal with images / image optimization (as there is no equivalent to the amazing gatsby-image).
I don’t have SSG pages, everything is SSR so I can’t optimize on build time with various plugins.

Is the only way to have various image sizes defined inside Prismic?

Curious on your opinions.

Thank you

Check out how to use sizes/srcset on CSS tricks.

You can use the original image size (no parameters), and add on width and height attributes as necessary:

For example, here’s an image URL:

https://images.prismic.io/<image-path>?auto=compress,format

And you can add parameters:

https://images.prismic.io/<image-path>?auto=compress,format&w=1500&h=1000

1 Like

Haha oh damn, I was not aware that Prismic is supporting “dynamic” size queries (if you can call it like them).
(Or shame on me if this is a native browser api :roll_eyes: :astonished:)

Thanks a ton @marcellothearcane

Prismic uses Imgix - so everything here should work.

The srcset/sizes is a native browser thing, yes - see support here: https://caniuse.com/#feat=srcset

yeah i am aware of srcset and — of course — I am using it, but was not aware of the image format api. Once read that Prismic has switched to Imgix on their blog but thought that’s more a way of handling stuff in between and less about the output on the client / frontend.

thanks again