雪碧图已经过时了吗

[fengxianqi]

今天在群里讨论了下，有个同学认为在 http2 的场景下，雪碧图没有作用反而会变慢，另一个同学说雪碧图已经过时了，面试被怼过。请问下大家怎么看

[betulac]

上面的很多老哥们真的用过雪碧图?话说让美工去拼雪碧图是什么操作?

[zarte]

请跟上潮流，现在有不缺那点网速。

[belin520]

小尺寸的 icon 适合 inline 到 CSS 或者 HTML 里面，不需要额外的加载。
这种事情，现在构建工具都可以做

[solome]

没有过时，只是现在有更好的选择：svg\iconfont。

[eason1874]

看了下淘宝首页，只有右侧用户中心几个多色图标是雪碧图，顶部、搜索框、列表、悬浮工具栏、底部用的单色图标都是字体图标。

看了下谷歌，搜索结果页面是 svg，账号页面是字体图标，关于我页面是雪碧图，油管页面是 svg。

[augustheart]

@areless 讲真就是，如果才用大图缩小的用法，没法保证缩放效果。

[augustheart]

主要还是时代过去了吧。现在基本上已经不考虑流量、性能什么的了，自然一切向着方便的方向走。

[learnshare]

@betulac 上古时代的雪碧图真的是自己手工处理的，grunt/gulp 也没出现很久

[banricho]

自动合并雪碧图以及多尺寸处理并不是什么有难度的事情……
即便是现在移动端大量的 vw vh 也不会增加多少工作量。

感觉更多的还是设计风格发生了变化，很多图片可被替代。
加上网络都比较好了，这玩意儿的提升不那么明显了。本质上只是减少了请求数，图片体积未必小，毕竟还得考虑到按需加载的问题。

[overflow99]

雪碧图虽说会减少 http 请求，但是会增加代码量，而且不好维护，现在的主流用 iconfont+svg

[qiaobeier]

icon font 有渲染问题，现在都是 svg symbol sprite

[66beta]

想什么呢？现在是 webpack 自动生成雪碧图的

http2 就可以浪费连接数了？

[no1xsyzy]

@areless 一个 flash，不放矢量动画，就两张位图相对移动，照样电老虎，放不放矢量动画反而是小头。
安全不安全，你说了不算，看看数据 <https://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53>，78% 的任意代码执行漏洞。
跨站 POST 你写着香，骇客就不觉得香了吗？
做大渲小你觉得就是方便？你拿啥缩？ sampledown 算法那么多，实际上能通用任何风格图标的不存在，而且还有非整数倍缩放问题，会有明显晕轮。

至于游戏，你只看到贴图用的位图，你没看到模型用的全是矢量。
因为你看不懂模型，花上半天时间，玩玩 Blender。
简单的对比：TR 1996 和 TR 2013。你觉得这 17 年就换了个贴图？

[no1xsyzy]

@areless 你不妨花个半天时间，玩玩 Blender，拿上一堆贴图，看看能玩出什么。
哪个 3A 游戏的动画部分不是用骨骼做的？布娃娃都少不了。
另外，宫老则是说过 3D 动画才是未来，而且又双叒叕复出了，做 3D。

[areless]

@no1xsyzy 押井守说高帧 3d 不自然。你看 3d 动画吧，我还是看普通漫画，手绘分镜真棒，爽歪歪。分镜可以一气呵成，某些高科技偏要拿几百帧去补间~~~一堆计算机去渲染，结果差强人意。矢量放大占资源程度比大位图缩放多的多，矢量本身就是通过计算最后出来一张位图。位图构成复杂，矢量可能得算到计算机崩溃。矢量不能用于展示实景，及类实景的 icon~~~也就是现在的平面化磁贴 ui 让矢量重新火了一把，简直是 flash 恶劣之处的再生。前端漏洞也是安全性问题的话，那大家都不用上网了，那种跨站脚本是漏洞，谁定义的啊？那每个统计脚本都是木马了~~flash 那优越的 as 怎么不发扬光大

[hakono]

@areless
无知

一个连分镜是什么意思都搞不懂的人居然好意思乱卖弄自己那半斤八两的学识。真当这贴里就只有前端程序员没人懂？

日本 2D 动画靠着实质一秒 8 帧的作画张数做出流畅的视觉效果靠的是分镜？你搞笑呢先学学分镜是什么意思。一秒 8 帧的流畅完全就是靠着动画原画师们的用尽各种智慧钻研出的技巧模拟绘制出来的。
比如手动绘制动态模糊和运动变形，甚至对于一个水平超高的原画师来说不运用任何运动变形和动态模糊就能在这个帧率下画出流畅的动作，靠的完全是原画师个人的能力经验和水平，因为他们需要在极其有限的张数和预算下绘制出流畅的效果。

而你说的 3D 动画不流畅，不好意思这个锅 3D 不背，日本 3D 动画不流畅是为了市场强行三渲二然后抽帧的造成的。真正的纯 3D 且制作合格的动画不存在不流畅的问题。
日本 3D 动画技术的积累就是个弟中的弟弟，3D 长久以来只是 2D 的辅助，导致日本 3D 动画制作技术和 2D 相比一直都处于吊车尾等级。就这点技术能力还强行想把 3D 渲染成手绘 2D 的效果迎合市场，做出的效果怎么会好

[no1xsyzy]

@areless
1、好莱坞电影也有分镜，也就记录片这种摆不了只能撞的没分镜。
2、觉得手绘比 3D 好，要么是 Pearl Effect，要么就是只看了些垃圾 3D 就开始说的。
3、高帧 3D 的不自然主要来自恐怖谷，因为这群人还在手捏模型的阶段；游戏大量采用动作捕捉，你有觉得有多不自然吗？
4、行啊，跨站不算，那等你根本没用过淘宝却莫名其妙多了几百万的已付款已签收订单别哭啊。你开个网站日常被 8Tbps 也别哭啊。
5、你对于位图的理解是不是停留在 1920x1080 不动了啊？至少 08 年就有 3000x3000 以上的了，Rage 当时就有 4K 壁纸了，单一个文件，不进行任何解码，占带宽占内存就比大部分矢量图完全调用高。这对比一下，你是给 4k 屏专门做个大背景还是做点抽象矢量图？
6、你这不 perf 就敲定哪个更优，算不算 premature optimization ？

[no1xsyzy]

@areless 7、分镜一气呵成？白箱里蓝胖子憋不出分镜都被 Desk 关小黑屋了，真当分镜是屎能一泻千里啊。
8、任意代码执行不是安全性问题，不如直接把电脑给我？进 CVE 不算漏洞，你这是要跟整个业界对着干咯？
9、这么吹位图，难道你用的是 ms-paint-i.de ？

[QdouHuiQwaiLai]

确实过时了

[fumichael]

iconfont 1 不是 csssprite 变种吗, 原理差不多吧