Pardon my pedantry but MP4 is just the container and does not spare you from finding a compatible set of codecs to put in that container that will play on your target browser-plus-OS combo. See the video and audio codec table here for example: https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Fo...

> From my understanding, the easiest way is to use the <video> tag with mp4.

The easiest way for everyone involved is... using GIFs as GIFs.

The 19% in savings (when converting to lossless WebP) aren't worth it. Not even 60%, when you consider what you lose in usability.

<video> and mp4 can also work well. As a GIF replacement, the initial differences are minor because you can easily add loop and autoplay to the video’s attributes, and both work with most browsers’ reader modes. From my tests, though, video-as-GIFs isn't a feature supported by the major RSS readers, while WebP works without any issues.

Anyways, the real insurmountable problem is animations with transparent backgrounds. There’s no good way to do this in mp4, and WebP seems to be the only format that does it well. But because of all the little pains, headaches, and surprises that can arise due to subtly different use cases, I still think WebP is the format that will give you the most benefit with the least drawbacks for silent animated images. Even without having transparent backgrounds as a requirement.

Agreed with the MP4 recommendation. As I mentioned in another thread, animated WebP can have frame-rate issues on Safari... but if you want autoplaying videos with transparency it's pretty much the only game in town.

If you don't need transparency, I would 100% stick with mp4. Just make sure you set the tag elements "autoplay loop muted".

Mobile Safari used to be pretty weird. If you wanted autoplay (and NO controls), you needed to make sure to remove the audio channel on the video. Setting the "muted" attribute wasn't enough.