除了雪碧图，加载大量图片素材还有什么好的方案？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1066 天前的主题，其中的信息可能已经有所发展或是发生改变。

类似静态官网这种，有一些前端动画需要大量前端图片素材暂定用 nuxt 写

10 条回复 • 2021-05-26 14:58:48 +08:00

liyer

2021-05-26 12:13:11 +08:00

base64
svg
canvas

Resource

2021-05-26 12:17:57 +08:00

一般是 iconfont 和 svg，但是你这种情况，我认为雪碧图是最吼的。

Mutoo

2021-05-26 12:38:12 +08:00

用骨骼动画替代帧动画，可以节省大量素材空间。
免费的 dragonbone http://dragonbones.com/en/index.html#.YK3QgZP7Q8M
收费的 spine http://en.esotericsoftware.com/

TomatoYuyuko

2021-05-26 13:41:10 +08:00

@liyer canvas 对加载图片素材还有优化？

liyer

2021-05-26 13:47:41 +08:00

@TomatoYuyuko 你不是有动画吗？

3dwelcome

2021-05-26 13:59:51 +08:00

WebP 支持动画的吧，可以考虑一下。

然后用 JS 把需要的单帧提取出来，存在 window BOM 下。img src 直接去引用。

TomatoYuyuko

2021-05-26 14:13:33 +08:00

@liyer 只有切图，然后前端用这堆素材做一个动画。。。

TomatoYuyuko

2021-05-26 14:16:06 +08:00

@3dwelcome UI 那边的说法是 webp 体积会很大。。

3dwelcome

2021-05-26 14:20:52 +08:00

@TomatoYuyuko UI 那是懒吧，地球人都知道 webp 比 jpg 还要小。

在公司，只要你喉咙足够响，桌子拍的足够响，webp 的体积就不会大。

hxsf

2021-05-26 14:58:48 +08:00

CDN + HTTP/2 push ?