雪碧图已经过时了吗

[fengxianqi]

今天在群里讨论了下，有个同学认为在 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 至今还在用着