gatsby-plugin-sharp support?

[kkor]

A quick question while waiting for graphql support in my repo... do you plan on adding gatsby-plugin-sharp support or is there some hurdle that prevents it? Or could you give some pointers on how to add it?

[birkir]

Great question!

We could try to detect image fields and add sharp support recursively. But the thing is, it will not work on the client side, so a utility function would have to map original sharped image fields with the updated raw url.

Other thing, Prismic has image sizes on the fields so I didn't really feel the need for sharper, other than webp support.

What would you usecase be?

[kkor]

Yeah I noticed the responsive image support in Prismic, so I think we could live without the gatsby-plugin-sharp, but having lazy-loading out-of-the-box (https://www.gatsbyjs.org/packages/gatsby-image/#problem) would be super nice :)

[birkir]

Blocked by https://github.com/gatsbyjs/rfcs/pull/11

[jodiedoubleday]

I know this is currently blocked, but support for this would be great. Gatsby-Image is a superb tool for optimising images, much better than uploading multiple image sizes in prismic. That coupled with webp and on blur loading I think this would be a great feature to have.

Is there the potential to add Gatsby image/Gatsby sharp support when deploying the static site but maintain the original format for things like preview.

Idea being for previewing you want to check the image fits with the page. For deploy you want it optimised for performance.

[birkir]

Yeah, that's what we can enable when unblocked. Sharp and preview would never work because it happens on runtime.

gatsby-source-graphql will need to have sharp plugin for us to be able to move forward in any direction, really.

[lusa]

Hi @birkir and others - It would be great to hear if you've solved this problem using other libraries or strategies, or if there is a guide to optimizing images that you're aware of that we could use. My use case is a bunch of high quality images and I'm unsure if it's best to just look into downgrading the quality of these images or wait for this issue. I think a lazy loading solution would get me close enough, just so the images are loaded only when in the viewport.

[birkir]

You can utilize the crop feature in Prismic to generate different sizes. Maybe in the near-future we will get a better Image manipulation API from Prismic so we can create a React component that acts like resharper.

[lusa]

@birkir It seems that gatsby-transformer-sharp and gatsby-plugin-sharp are possible with the other plugin (gatsby-source-prismic) as discussed here https://github.com/gatsbyjs/gatsby/issues/14076

As linked in that issue, this codebase uses gatsby-image here with GraphQL/Prismic: https://github.com/LekoArts/gatsby-starter-prismic/blob/master/src/slices/Image.jsx#L13 (I understand that's a different source plugin but it at least provides hope that we can use gatsby-image within Prismic)

What can we do to enable gatsby-image / lazy loading with gatsby-source-prismic-graphql? I would like to file a separate issue to discuss that, as I think that would really increase performance much more-so than cropping the image. Loading all the images at once is not very efficient, and I think gatsby-image already solves these problems for us. Thanks for your help.

[birkir]

Fundamentally different plugins, the one you are referencing is not using gatsby-source-graphql.

See https://github.com/birkir/gatsby-source-prismic-graphql/issues/3#issuecomment-486054022 for a reason why.

Resharper cannot be used with any gatsby graphql plug-in.

[birkir]

Unblocked and released https://github.com/birkir/gatsby-source-prismic-graphql/pull/50