From what I gather, I don’t know that there’s a new norm in this regard yet, besides recognizing that gifs are increasingly old & clunky (despite being fun & amusing), and so I don’t know if mp4s or webms or something else might be better if wanting to keep a site lightweight while still having some animated elements.
Generally yes.
GIF’s ancient LZW compression is remarkably ill-suited for modern CPUs, and more expensive than modern algorithms. Combined with significantly larger file sizes, it costs much more to decode, on top of increased costs of transfer and caching.
GIF might have an edge if the animation is very small (<16px, few frames).
It also gets messy if you need to play hundreds of animations. GIF will be terribly inefficient, but also browsers aren’t designed to have hundreds of video elements, so both will eat memory in their own way, and it will vary which is worse.
WebMs encoded with VP9 or even better AV1 are better than GIFs. Decode speed is negligible, especially considering how much more quickly it will load
IMO webm files are ideal as they’re extremely small for the quality of video output. Downside is, they can take a while longer to encode compared to mp4s if your hardware can’t accelerate it
iOS still has issues with webm >_<.
Best to use a vp9 webm with a h264 mp4 fallback.
Maybe next decade when the EU creates even more laws, Apple will begrudgingly add av1 support and we can all switch to that.
A lot of “gifs” are actually served up as mp4s actually
What kind of animated site elements?
Basically any animated visual element where in the past you might have used a gif. I’m thinking more for a casual kind of site rather than anything professional, but with a desire for using more up to date formats that are smaller & quicker to load.
Animated content? Or site navigation elements, overlays, etc?
If the later go with the image assets svg, png, gif, etc since there’s better support for masking, css animations and so on.
Ah, sorry, not trying to be obtuse, content. I thought by referring to gifs it might make that clear.
I figured but thought I’d cover the bases
Follow-up question: How about transparent animated graphics?
