Video codec with alpha channel
Since you can’t control a gif while its playing . resolve its bit data will use a ton of the memory when you have dozens GIF files. We need an alternative solution to reach that.
So by analysis the GIF format that has a several advantages/features :
- highly compression(with LZW algorithm)
- animation graphics(with certainly time and loop play)
- alpha
There are some codec here support alpha channel .
WebM
Best choice to reach our target. Tiny, high compression. But the Apple :)
Since the vp8, vp9, av1 codec never been supported on the safari now ( expect WebRTC or on the newly version Big Sur). you need a replacement.
Mp4 MPEG-4
Actually the MPEG-4 spec defined a bit to handle the opacity data but never been supported.
HEVC H.265
Safari can not play this format.
Apple Animation
i.e. QuickTime File Format (QTFF)
In ffmpeg: qtrle
Actually safari can not play this format.
Apple ProRes 4444
This one will playable on safari. however. It is cumbersome cause that take too much storage space (10 times the Gif type).
others will not to be considered cause the compatibility :
Avid DNxHD
Avid DNxHR
Avid Meridien
Cineon
DPX
GoPro Cineform
So you cannot using the video to replace Gif in nowadays.
My finally solution is sacrifice the network traffic. More specifically is, split the GIF to PNGs, save the GIF’s loop, delay of each PNGs, loading them through internet. Since the browser got picture from a link, the IMAGE file will be save to client’s local(like Cache folder or somewhere), this provide a low latency time to get files while browser using them.
Just set server link to an img src.
If you only have a bit of Gifs you can choose to resolve it (something like gif.js or just write a decode function by yourself) and rendering the bit data.
If your product ignore safari’s users, you can using webM(VP9) directly.
