Image plugin helpers

[ascorbic]

There is now an image plugin toolkit for plugin authors who want to add support for gatsby-plugin-image. See the draft docs

[KyleAMathews]

While this loses the benefit of the low-resolution placeholder

can the placeholder in the new component be a URL?

[ascorbic]

It can, and that's what the Cloudinary demo uses. It's obviously not going to give all the benefits of inlining it though.

[wardpeet]

Ther is little to no benefit of doing placeholder urls. It's a secondary domain so the connection needs to be made, by then lazy loading should already have been kicked in and load the proper image.

[ascorbic]

Surely it'll make a difference with large images or slow connections

[wardpeet]

Technically it's worse for slow connections especially when it's in the viewport. We'll download the placeholder and the main image only to swap it immediately. Basically, you're taking up network resources away for nothing. For lazy images below the fold, it's the same. At page load we spend time downloading placeholder images and lazy loading already kicked in while the user is scrolling so they probably never see the placeholder. So, we have to make sure in the readme and docs that placeholder images as a URL should be handled with care.

[axe312ger]

This makes migrations like these harder than they would if there was a standard way to generate this data.

THANK YOU!

We are also proposing a custom hook that allows runtime generation of gatsby image data, meaning these can be used in situations where the image data is loaded at runtime rather than build time.

I guess this is huge. That could decrease json bloat for pages that have many images like gallery pages and so on :)

---

These new hooks look good to me, just left two small comments in the Contentful PR. Thank you again for implementing it there already :)

As far as I can see this will be possible to update/align https://github.com/axe312ger/gatsby-transformer-inline-svg to the new API as well.

Will adapt the new Image API patterns in #15783 as soon I find time for it.

Big thanks to everybody contributing to this great new Image API!

[ascorbic]

I guess this is huge. That could decrease json bloat for pages that have many images like gallery pages and so on :)

Yes, though it would be at the expense of lacking placeholder images, unless you sent those through too. Doing something like using the dominant color for the placeholder might work there, and you could include that in the data

[tpiros]

Thanks for putting this together @ascorbic. Disclaimer: I work for Cloudinary and I have tried the use-cloudinary-image.ts file that you referenced and I found a few quirks with it. It could be that I misunderstood how that particular plugin works, but these are my main observations, using the code below:

const image = useCloudinaryImage({
    width: 400,
    height: 300,
    filename: "woman.jpg",
    cloudname: "tamas-demo",
    formats: ["auto"],
  })

1. The image extension gets modified even if I use auto in formats from .jpg to .webp (in Chrome). This shouldn't be the case. In cloudinary adding the f_auto flag to the image URL should not change the extension from .jpg (or whatever the original is/was). The content-type field will change automatically based on the browser you use to open the image.
2. Another interesting thing is that I added both the width and height props, however the image didn't seem to respect that and this is what the generated URL looked like: https://res.cloudinary.com/tamas-demo/image/upload/c_lfill,w_800,h_600/woman.webp. Again, not sure why this happened.

Let me know if I can help in any way!

[ascorbic]

Hi @tpiros ,
Thanks for looking at this. That hook is really just a proof of concept, but I'd love to work with you to get it ready for production. It may make sense for it to go in the cloudinary plugin, however unlike the existing integration it doesn't require anything to be uploaded at build time.

[tpiros]

@ascorbic anytime! I will take a deeper look and would be happy to jump on a call to talk through your ideas and how I can help :)