Add ability to serve images in Webp format

[gregorygaines]

Your React library for loading GraphCMS images has the ability to compress and serve images in the Webp format. It would make sense to include the functionality in this library, but unfortunately I can't find it.

[jpedroschmitz]

Hey @gregorygaines, the plugin already supports the webp format! https://github.com/GraphCMS/gatsby-source-graphcms/blob/b2bb56f22ff6d3ba5236a6c6c56457fc27aaa373/gatsby-source-graphcms/src/gatsby-node.js#L323-L325

[gregorygaines]

Awesome! One last question. Is this feature available for serving directly from the graphcms CDN instead of downloading locally if I want to take advantage of graphcms caching?

[jpedroschmitz]

Yeah! You can upload webp images to our CDN!

If you want, you also convert images from png to webp, for example.

https://graphcms.com/docs/api-reference/content-api/assets#convert-file-type

[gregorygaines]

Thanks is awesome @jpedroschmitz, but not quite what I need; I'll explain further.

When using GatsbyImage with gatsby-source-graphcms, images are served by the CDN with the url generator code below...

https://github.com/GraphCMS/gatsby-source-graphcms/blob/b2bb56f22ff6d3ba5236a6c6c56457fc27aaa373/gatsby-source-graphcms/src/gatsby-node.js#L382-L393

The image is unoptimized; served in it's original format.

However, when the CDN url generator code is modified to include /auto_image/compress/...

const src = `https://media.graphcms.com/resize=width:${width},height:${height},fit:${fit}/
output=quality:${quality}/auto_image/compress/${baseURL}`;

The aforementioned image is now served compressed and converted to the webp format. 😊

I can continue modifying the plugin directly myself, but modifying future releases of the plugin could prove troublesome which is why I hope this can be added as a feature.

Regards,

[jpedroschmitz]

That's a feature from Filestack, as you mentioned.

This task automatically changes the encoding of the image based on the user agent and therefore provides better compression and quality characteristics compared to their older JPEG and PNG counterparts.
https://www.filestack.com/docs/api/processing/#auto-image-conversion

We can add it as an option, but I think the best option here is to add support to the image option formats.

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#formats

I'll reopen it!