Use Cloudinary to convert animated GIFs to videos

[mavaddat]

From jekyll-cloudinary created by nhoizey: nhoizey#33

https://twitter.com/nhoizey/status/943789684769067009

[mavaddat]

Note that Cloudinary is working on making f_auto smart about https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/ – so that, from one URL, browsers that support MP4s-in-<img> would get MP4s, while those that don't would still get Gifs.

Functionality like this would simplify work within jekyll-cloudinary a lot, and the resulting <img> would perform a bit better than a <video> would (because the <img src> gets preloaded, and the <video src> load takes 1+ extra round trips to support buffered loading). But until other browsers implement video-in-<img>, the trade-off of using <img> instead of <video> right now is that you'll still be sending Gifs to a bunch of people (whereas with <video autoplay loop muted>, everybody could get an H.264 today.)

Noting official yet, Cloudinary's plans could change, and maybe this is not a trade-off that makes sense in this context right now – but it’s something to be aware of at least.

[mavaddat]

@eeeps hi Eric, would you still recommend use <video>, a few months later?

[mavaddat]

<img src='mp4'> status:

• Cloudinary still hasn’t deployed f_auto,fl_animated → mp4s to the general public.
• Blink seems to have some consensus and has a trial implementation, but they’ve been quiet for a month or so.
• It’s on Firefox’s radar
• Edge: ?

So right now – <video autoplay loop muted> is unfortunately still the safest bet, for the foreseeable future.

[mavaddat]

Thanks a lot for the details @eeeps!

I choose the <video> path for this silly plugin easing sharing of Giphy animated GIFs: https://github.com/nhoizey/nicolas-hoizey.com/blob/master/_plugins/giphy.rb

I wonder if I could/should make it more generic, and part of this plugin.

[mavaddat]

If you do, this is a good read: https://webplatform.news/issues/2017-10-26#-video-autoplay-instead-of-animated-gif

[mavaddat]

@eeeps thanks for the link, very useful!

Here what I already did: https://nicolas-hoizey.com/2018/08/using-cloudinary-s-fetch-api-to-convert-an-animated-gif-to-a-video.html