WebM (despite being closely related to WebP) can be 5-10x more efficient than WebP.

That's because WebP focused so strongly on being a GIF equivalent that it also dropped all things that made WebM efficient and instead adopted GIF's awfully inefficient architecture (just dumb frames overlaid on top of each other, without motion vectors or predicted frames).

Safari shows how it can be done: it supports silent MP4/H.264 straight in <img>. You get all the ease of use GIF, order of magnitude smaller file, and hardware acceleration.

It's unintuitive, but well-compressed videos are cheaper to decode than dumb "animation" formats, because file size differences are so massive that it's cheaper to decompress a small amount of complex data than to chew through vast amounts of poorly compressed data.

There's also the practical matter of network speed. In many common scenarios a 300kb webm can be fully downloaded and playing while a roughly equivalent 5mb gif is paused a few frames in, buffering.

Also video decoding is cheaper because most GPU/SoCs supports hardware decoding.

This isn't a good assumption to make, many people own cheap phones that lack hardware codecs that can decode videos with modern encodings.

I can't imagine any cheap SoC for smartphones without H.264 HW decoder because playing video is essential and it can record video. Possibly exists for low-feature phones without camera but it's not for web browsing.

The licenses for codecs sometimes cut into the thin margins on budget phones. A large amount of people outside of the US and EU are stuck on low-end phones, and I'm pretty sure many of the government subsidized phones in the US are in the same boat.

Do people really use Safari?

Yes, lots of them... on iOS.

Also worth noting that all the alternative browsers on iOS are just reskinned versions of Safari as well.

Somewhere between 25 and 50% globally based on your audience.

Lots of folks using Mobile Safari.

As a point of data, Animated PNG is finally (as of ~2019) supported natively among all major browsers.

https://caniuse.com/#search=animated%20png

Edit- I was unaware the recently-announced Safari 14 Technical Preview adds support for WebP too! Making both formats viable for all browsers, finally.

Recently we've been going through the browser stats on our websites, and while globally apparently IE is dying, it's certainly not dead yet. In the specific industry I work in (Heavy Automotive Retailing, eg Truck Sales and Servicing), we see upwards of 30% of our users on browsers <= IE11. All of our sites are getting poor lighthouse scores on performance with the main suggestion to be changing to webp, but that would exclude 30% of our customers.

There is a way to offer both jpg and webp, letting the browser to choose.

Ooh, does that mean that slack supports WebP now?

Update: nope. Maybe another year :(

Animations should just be videos. No reason for an animated image format, an animated image is just a video with no audio track.

My understanding is that webp is video. That is, it's a still frame using the vp8 codec.

It only has VP8's intraframe compression, not VP8's interframe compression, so animated WebP is not a proper video codec and is a different beast to WebM video.

As far as I can tell though, it has to be VP8 and can't be VP9. Maybe I'm mistaken about that, but all the webp literature I've read or skimmed talks about VP8 specifically. So what's the advantage of an animated webp using VP8 over a webm using VP9?

No need for image formats either as an image is just a very short single frame video.

I think this a very poor comparison to make because it denies the time dimension of video completely, which fundamentally affects how we perceive and use video, and also ignores the fact that still images linger and have different requirements.

The only advantage I can see it where videos are not allowed to autoplay you would want a gif to play somethig small.

For me is all about sharing. The website itself usually displays the "video" as if it was a gif, but as soon as you go to share anywhere, you're sharing a video on platforms that handle it like a video. No looping, seek controls, complicated UI, etc. I just want to post a photo that auto plays and loops anywhere. I don't are about the internals, but I want all applications to recognize that file as an animated photo, not a video.

Videos can autoplay on browsers if they are muted

An animated WebP is basically a WebM video.

Or let me rephrase, why is WebP as a animated picture / video format insufficient?

video format usually take up too much memory: what you gain in efficiency costs in resources. Conversely, animated WebP are dirt cheap: one buffer only, written over and over.

Then, there's optim being made in WebP to allow fast jump to keyframe, even when there's transparency. Video codec don't allow that, and you can have an arbitrary long torture sequence of transparent frame that needs to be decoded back when the video comes in the view again.

Last, animation are usually low-fps (~10fps): there, video codec don't perform very well and are basically keyframes. So the difference isn't as great as one would think.

Oh, and hardware need a 'reset' between decoding tasks, to reconfigure memory, and decoding can't be parallelized.

Eh. An animated image (an image that contains some sort of video media, whether gif or h264 or whatever) is a hint to the browser to play it automatically and without sound. If everything were true video (say, mp4) you couldn’t make that distinction. As long as the video in the animated video is encoded properly — as real video and not a sequence of frames as gif does — then animated images definitely have their places.

> An animated image (an image that contains some sort of video media, whether gif or h264 or whatever) is a hint to the browser to play it automatically and without sound. If everything were true video (say, mp4) you couldn’t make that distinction.

<video autoplay muted> says the same thing.

Also, gif only supports one-bit transparency; Whereas webp and png allow partial/gradated transparency.