雪碧图已经过时了吗

[fengxianqi]

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

我看了下淘宝现在都还在用的呢。想请大家说下，在 http2 的情况下，使用雪碧图真的反而会变慢吗？

[vibbow]

主要原因应该是前端变懒了.............

[Hanggi]

都什么年代了还雪碧图。。。大部分外观性质的效果 css3 都能搞定。图标用 font icon 方便好用。没有理由用雪碧图。

[learnshare]

大概已经过时了
网页中目前用小图片素材已经比较少了，CSS、iconfont、SVG 都更方便

[xutao881]

雪碧图这玩意儿...前端我是懒得搞，都是让 UI 合并好了给我，所以要更新什么的也是 UI 搞，一个老项目要换 UI 的话更新雪碧图就很操蛋。

[xutao881]

实际上现在的 icon 管理更多的用 iconfont 比雪碧图来的方便多了

[wangyzj]

@learnshare 为什么我的前端项目全都是图，就算不用 png 也得 svg

[love]

现在拟物也不流行了，少了一大部分 UI 图片

[learnshare]

@wangyzj 取决于设计，以及图形的实现方式
能用 CSS、iconfont、SVG 的就尽量避免图片，体积大，也不灵活

[Narcissu5]

iconfont 没办法只能单色啊，等于说把设计都限制死了

[murmur]

雪碧图不好用 bg-size 啊，小图直接就自动转成 base64 了，

[wangyzj]

@learnshare 但是 iconfont 做不了多色彩图标把

[jydeng]

主要太难用了，更新困难

[learnshare]

@wangyzj 所以还有 SVG 这种方式，SVG 的渲染效果可比图片素材好太多了

[loading]

这样就不用请切图拼图仔了

[Arrowing]

过时了，有 http2 还用什么雪碧图

[VDimos]

不好用，一张图崩整个网页都崩

[ChefIsAwesome]

雪碧图得固定大小。现在是做手机页面的多，大量用比例布局，这玩意压根就没办法用。

[agdhole]

用 SVG 路过

[OSF2E]

@ChefIsAwesome #17 说到点子上了

[Chingim]

已经没必要了, http2 时代雪碧与否速度没有多大影响
但是考虑到维护性, 还是抛弃他吧

[angith]

iconfont 可以做多色图标的

[opengps]

并没有过时，只是用在了必要的场景，看下高德地图百度地图，那些 icon 都是用的雪碧图

[Mac]

非常讨厌雪碧图

[ryougifujino]

雪碧图确实是过时了，svg sprite，字体图标和纯 CSS 才是更好的选择。而且即使要使用雪碧图，也有把小图标放在特定文件夹然后通过 webpack 自动生成的方案。即使是使用单个图片，使用 url-loader 也可以在图片低于一定的设定的大小阈值时，自动将其转化 DataURL 嵌入在网页中减少图片请求。还有 http2 等等，反正能不用就不用吧。

[ryougifujino]

而且图标应该抛弃位图，使用矢量图，这也是不用雪碧图的一个理由。

[hst001]

雪碧图的出现是为了解决很多小图片带来的很多额外的请求，不得已而为之的办法，因为其本身给设计和开发都带来了额外的成本，那些小图标位置确定了之后就不能随便改了，大小也不能随便改，不能动到其它图标的位置，太多局限了。

[areless]

拆任天堂家的 2d 游戏图包看看或者拆 3d 的贴图看看，不会过时的。像素(px)是最好的定位~~~位图是完美的。炫酷？ flash 更炫更酷，人其实是不能接受 flash 过于流畅的矢量动画补间的，现在安卓苹果一直在提倡这种旧形态的 ui，就是玩概念。flash 过往早就证明矢量及高帧数动画是没意义的，甚至在动漫领域，攻壳 2 鸭嘴兽都说过动漫高清高帧数的不自然性~~~动漫在于分镜~ui 亦如此

[undeflife]

web 很少用了 2D 游戏开发里用得还挺多的...

[Pastsong]

因为 Sprite Image 是 workaround 而不是 solution

[wangyzj]

@learnshare 看来 svg 我还没用错,谢谢

[jinliming2]

雪碧图，换个小图标要重新生成整张图，图标大小变了还得连带 CSS 一堆坐标的改变，真的只是上个时代极限优化的解决方案。
现在还在用的，大多都是历史遗留下来的代码，没有整体重构的。

几年前，小图标流行使用 font 字体，用特殊 web 字体和特殊字符配合显示图标，不过这种也渐渐过时了。
三、四年前，font awesome 就开始启用 SVG 图标了。

SVG 不仅可以无损缩放，而且 svgz 可以压缩到比普通图标还要小，并且可以直接嵌入到网页中，还可以做动画替代 gif，也可以直接当图片文件来用，做 background-image 也是可以的……

[hzlzh]

曾今我们还做了 WeFlow.io ，自动合并雪碧图，后来 H2 来了， 我们就不合并了。
另外，需要注意，当雪碧图内容过多的时候有些低端手机会无法渲染这么大的图。
总结来说就是不用了

[jinliming2]

@areless 如果是针对设备的产品，那么位图没啥大毛病。但是 web 页面是要在各种设备上展示的，不同分辨率，不同像素密度，针对高分屏，要对画面进行缩放，等等这一系列需求，情况就不一样了。矢量是为了能够任意缩放而不出现锯齿。
像素是最好的定位？在上个世纪各种电子设备屏幕分辨率都差不多的年代也许是的，就比如十几年前就行的手机分辨率大多是 240*320，你要是按照这个分辨率到现在来按照像素定位，放到 4k 屏幕上显示，那也许你得准备一个放大镜了。
flash 被淘汰是其他原因，web 安全性、耗电之类的。

[liuy1994g]

我觉得一是 iconfont 很方便，二是用雪碧图不好做 css 特效

[weixiangzhe]

还有一点 现在小的图片 会被 webpack 打成 base64 直接写到 js 里的，需要用雪碧图的地方太少拉，

[areless]

@jinliming2 真的是安全性差及耗电高吗？用 h5 或者其他形式来构建 flash 一样的矢量动画试试，照样电老虎。关于安全性，这是前端啊，大哥。虽然以前 flash 可以任意跨站 post 数据~推流~~~~作为开发者用着不香吗？那时候其他前端还真实现不了。位图可以做一份大的缩放适配给小分辨率设备使用的。矢量不是必须的~~~矢量没有锯齿是因为用运算抗锯齿了，普通渲染的矢量是有锯齿的

[areless]

为什么图形领域在用的经典方案。老任 sony 无数 3a 大作的贴图，web 领域却那么突出。就像过去动画也用矢量去做了，结果闹了笑话。没了灵魂。没了灵魂。瘦了几年，历史反复，前端又要回 flash 那套了

[lizz666]

快 3 年的开发生涯中好像没用过。。。

[yzlren]

-。-雪碧图不是可以用 gulp，webpack 自动构建嘛

[Atukey]

google 至今还在用着

[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 变种吗, 原理差不多吧

[fengmumu]

过不过时看场景的吧，把图片打包进文件又不是灭有缺点，svg 什么的复杂点的，体积也大的， 说 H2 的，h2 也有其缺点啊，无脑一把梭木有意义啊，小声比比，现在很多都还是 h1 的吧，只有过时的业务场景，哪有过时的技术，JQ 现在也不是没有死

[meepo3927]

用 iconfont , fontAwesome， 我目前的项目中 icon 基本不用图片了

[phy25]

https://www.google.cn/logos/2019/halloween19/rc1/wolf-trick-sprite.png