浏览器动图方案

这里不是动画效果, 是表情包那种动图

可选方案

序列帧, CSS/JS控制

兼容性最好, 可用于适配老旧浏览器
图文件大，且在不同屏幕分辨率下可能会失真

gif

由于采用了8位压缩,最多只能处理256种颜色（2的8次方）,故不宜应用于真彩图像
文件尺寸可能较大
通常 WebM 是更好的选择

WebP / APNG

APNG 社区支持力度不及 WebP, WebP 基本是当前非动图首选

视频代替 MP4/WebM

WebM 浏览器支持没有 MP4 广, 可以优先 WebM, fallback 到 MP4

Safari浏览器中视频播放会自动全屏, webkit-playsinline 没用, 有个开源库iphone-inline-video解决这个问题.
新属性 playsinline 有用 ( IOS10 开始 )
ios app 中无此限制, 可以自己设置 webview 选项

可以将视频分段加载到canvas播放..

关于浏览器视频播放策略

https://webkit.org/blog/6784/new-video-policies-for-ios/
https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
https://imququ.com/post/new-video-policies-for-ios10.html

ios11 chrome64 开始
有声音的

方案总结

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <img src="animated.gif">
</video>

<br />优先 WebM, 提供 fallback

参考链接

客户端上动态图格式对比和解决方案
http://dreampiggy.com/2017/03/06/%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8A%E5%8A%A8%E6%80%81%E5%9B%BE%E6%A0%BC%E5%BC%8F%E5%AF%B9%E6%AF%94%E5%92%8C%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

前端图片优化机制
https://imweb.io/topic/568b20194c44bcc56092e415

Replace Animated GIFs with Video
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video
https://www.smashingmagazine.com/2018/11/gif-to-video/
https://techstacker.com/why-webm-is-superior-to-gif-video-comparison/fr6xlr2zhn9usttsh/

GIF vs APNG vs WebP
http://littlesvr.ca/apng/gif_apng_webp5.html

All You Need to Know about WebM Format
https://icecreamapps.com/blog/all-you-need-to-know-about-webm-format/