Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to serve images in Webp format #233

Open
gregorygaines opened this issue Feb 18, 2022 · 5 comments
Open

Add ability to serve images in Webp format #233

gregorygaines opened this issue Feb 18, 2022 · 5 comments

Comments

@gregorygaines
Copy link

gregorygaines commented Feb 18, 2022

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.

@gregorygaines gregorygaines changed the title Add ability to compress and convert images to Webp Add ability to serve images in Webp format Feb 18, 2022
@jpedroschmitz
Copy link
Contributor

@gregorygaines
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

gregorygaines commented Feb 27, 2022

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
Copy link
Contributor

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!

@jpedroschmitz jpedroschmitz reopened this Feb 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants