WebP support check doesn't pass for Firefox

[leomelzer]

The current implementation of the webp check doesn't work for Firefox, although it has had support since version 65: https://github.com/GraphCMS/graphcms-image/blob/master/src/index.js#L23-L37

Why? Firefox doesn't support webp in data-urls yet. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Chrome also supports the image/webp type.

• Relevant bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1559743
• Vercel handles check on server side: https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/image-optimizer.ts#L46
• Alternate approach (async!): https://stackoverflow.com/a/54120785/684032

Did you purposely choose the sync approach? How about handling the detection server-side? I'm not sure if the media assets server GraphCMS uses is open source and/or supports this!?

Thanks for making GraphCMS!

[notrab]

Ah! This is a rather interesting problem. We're hoping to make a few changes to this repo soon, so I'll leave this repo open so we can discuss possible workarounds, if at all possible with our asset CDN.

[leomelzer]

Thanks @notrab - let me know if I can provide further information. We have some heavy Firefox users who would be happy :)

[notrab]

Thanks @leomelzer - we use FileStack under the hood for serving assets, which could be an issue here, since assets are served directly from there.

It could be some time before we manage to take a look at this repo, and seeing what improvements can be made, so if you do have a PR, or suggestion on a workaround that isn't a breaking change, I'd be open to getting something in the README, or the package.

Side note: I don't know too much about this, so I'll need to do some investigating to get up to speed.

[leomelzer]

@notrab I had a brief look - actually Filestack supports detecting support for modern image formats using the auto_image transform. See https://www.filestack.com/docs/api/processing/#auto-image-conversion

I've opened a PR to add this. If you run storybook you'll see webp served for Firefox (or any supported browser for that matter).

Regarding backwards-compatibility:

The withWebp prop now also opts-in to theoretical JPEG-XR conversion, however I don't know how often that happens. Given the fact the default for this prop anyways is true I believe this is no deal-breaker. Smaller images mean happier users, as they say :)

Thanks for considering!

[github-actions]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀