Reducing image filesizes sizes across all slices/pages

Thank you in advance for any help you can provide.

Out of the box, Prismic appears to use images at their original filesize, so a 6MB photo uploaded will be shown on a page at 6MB.

We are using imgix to do some resizing, but it is somewhat laborious to deal with editing imgix values for all of the individual slices and placements.

Is there a basic setting somewhere where we can configure a rule something like:

  • Always compress images (to a certain quality value)
  • If image is over width=1500px, resize to width=1500px
  • If image is width=1500px or less, do not resize

... where it would apply to every image placed anywhere on the Prismic site, unless specifically overridden?

Hey @prism1c,

You can configure the Image field to do some of this work for you. When you configure the field on a Custom Type, you can set named "responsive views" with specific dimensions. If you specify a width or a height, Imgix will resize it to that width or height. However, as you seem to have noted, if the image is smaller than the specified height, Imgix will upscale it, which might not be desirable.

Further, Prismic and Imgix have a default compression, specified with the Imgix URL parameter auto=compress. Imgix will also determine the best format for the image.

Having said that, the default and built-in configurations might not suit all needs, such as leaving small images untouched instead of upscaling them. For that, I would recommend including some reusable logic in your app, as either a component or a function. The function would receive the Image field, check the size of the Image to see if any operations needs to be performed, and potentially edit the Imgix query parameters for any custom formatting. You can find more info on how to do that in the Prismic docs on Image configuration and Imgix API reference.

Let me know if that answers your questions, and if there's anything else I can do to help.

Best,
Sam