V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fengxianqi
V2EX  ›  程序员

雪碧图已经过时了吗

  •  
  •   fengxianqi ·
    fengxianqi · 2019-11-13 20:28:39 +08:00 · 17624 次点击
    这是一个创建于 1819 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2019-11-13 21:18:32 +08:00
    我看了下淘宝现在都还在用的呢。想请大家说下,在 http2 的情况下,使用雪碧图真的反而会变慢吗?
    63 条回复    2019-11-16 11:13:30 +08:00
    vibbow
        1
    vibbow  
       2019-11-13 20:30:26 +08:00   ❤️ 1
    主要原因应该是前端变懒了.............
    Hanggi
        2
    Hanggi  
       2019-11-13 20:30:43 +08:00
    都什么年代了还雪碧图。。。大部分外观性质的效果 css3 都能搞定。图标用 font icon 方便好用。没有理由用雪碧图。
    learnshare
        3
    learnshare  
       2019-11-13 20:31:06 +08:00
    大概已经过时了
    网页中目前用小图片素材已经比较少了,CSS、iconfont、SVG 都更方便
    xutao881
        4
    xutao881  
       2019-11-13 20:35:14 +08:00
    雪碧图这玩意儿...前端我是懒得搞,都是让 UI 合并好了给我,所以要更新什么的也是 UI 搞,一个老项目要换 UI 的话更新雪碧图就很操蛋。
    xutao881
        5
    xutao881  
       2019-11-13 20:36:00 +08:00
    实际上现在的 icon 管理更多的用 iconfont 比雪碧图来的方便多了
    wangyzj
        6
    wangyzj  
       2019-11-13 20:37:43 +08:00
    @learnshare 为什么我的前端项目全都是图,就算不用 png 也得 svg
    love
        7
    love  
       2019-11-13 20:39:54 +08:00
    现在拟物也不流行了,少了一大部分 UI 图片
    learnshare
        8
    learnshare  
       2019-11-13 20:40:34 +08:00
    @wangyzj 取决于设计,以及图形的实现方式
    能用 CSS、iconfont、SVG 的就尽量避免图片,体积大,也不灵活
    Narcissu5
        9
    Narcissu5  
       2019-11-13 20:48:42 +08:00
    iconfont 没办法只能单色啊,等于说把设计都限制死了
    murmur
        10
    murmur  
       2019-11-13 20:49:50 +08:00
    雪碧图不好用 bg-size 啊,小图直接就自动转成 base64 了,
    wangyzj
        11
    wangyzj  
       2019-11-13 20:55:32 +08:00
    @learnshare 但是 iconfont 做不了多色彩图标把
    jydeng
        12
    jydeng  
       2019-11-13 20:55:33 +08:00
    主要太难用了,更新困难
    learnshare
        13
    learnshare  
       2019-11-13 20:59:48 +08:00
    @wangyzj 所以还有 SVG 这种方式,SVG 的渲染效果可比图片素材好太多了
    loading
        14
    loading  
       2019-11-13 21:05:08 +08:00 via Android
    这样就不用请切图拼图仔了
    Arrowing
        15
    Arrowing  
       2019-11-13 21:16:22 +08:00 via Android
    过时了,有 http2 还用什么雪碧图
    VDimos
        16
    VDimos  
       2019-11-13 21:16:59 +08:00 via Android
    不好用,一张图崩整个网页都崩
    ChefIsAwesome
        17
    ChefIsAwesome  
       2019-11-13 21:23:54 +08:00   ❤️ 1
    雪碧图得固定大小。现在是做手机页面的多,大量用比例布局,这玩意压根就没办法用。
    agdhole
        18
    agdhole  
       2019-11-13 21:37:52 +08:00
    用 SVG 路过
    OSF2E
        19
    OSF2E  
       2019-11-13 21:39:52 +08:00
    @ChefIsAwesome #17 说到点子上了
    Chingim
        20
    Chingim  
       2019-11-13 22:09:29 +08:00
    已经没必要了, http2 时代雪碧与否速度没有多大影响
    但是考虑到维护性, 还是抛弃他吧
    angith
        21
    angith  
       2019-11-13 22:20:52 +08:00 via Android
    iconfont 可以做多色图标的
    opengps
        22
    opengps  
       2019-11-13 22:22:06 +08:00 via Android
    并没有过时,只是用在了必要的场景,看下高德地图百度地图,那些 icon 都是用的雪碧图
    Mac
        23
    Mac  
       2019-11-13 22:32:00 +08:00 via Android
    非常讨厌雪碧图
    ryougifujino
        24
    ryougifujino  
       2019-11-13 22:37:53 +08:00
    雪碧图确实是过时了,svg sprite,字体图标和纯 CSS 才是更好的选择。而且即使要使用雪碧图,也有把小图标放在特定文件夹然后通过 webpack 自动生成的方案。即使是使用单个图片,使用 url-loader 也可以在图片低于一定的设定的大小阈值时,自动将其转化 DataURL 嵌入在网页中减少图片请求。还有 http2 等等,反正能不用就不用吧。
    ryougifujino
        25
    ryougifujino  
       2019-11-13 22:38:37 +08:00
    而且图标应该抛弃位图,使用矢量图,这也是不用雪碧图的一个理由。
    hst001
        26
    hst001  
       2019-11-13 22:42:47 +08:00
    雪碧图的出现是为了解决很多小图片带来的很多额外的请求,不得已而为之的办法,因为其本身给设计和开发都带来了额外的成本,那些小图标位置确定了之后就不能随便改了,大小也不能随便改,不能动到其它图标的位置,太多局限了。
    areless
        27
    areless  
       2019-11-13 22:56:00 +08:00 via Android
    拆任天堂家的 2d 游戏图包看看或者拆 3d 的贴图看看,不会过时的。像素(px)是最好的定位~~~位图是完美的。炫酷? flash 更炫更酷,人其实是不能接受 flash 过于流畅的矢量动画补间的,现在安卓苹果一直在提倡这种旧形态的 ui,就是玩概念。flash 过往早就证明矢量及高帧数动画是没意义的,甚至在动漫领域,攻壳 2 鸭嘴兽都说过动漫高清高帧数的不自然性~~~动漫在于分镜~ui 亦如此
    undeflife
        28
    undeflife  
       2019-11-13 23:25:34 +08:00
    web 很少用了 2D 游戏开发里用得还挺多的...
    Pastsong
        29
    Pastsong  
       2019-11-13 23:40:01 +08:00   ❤️ 2
    因为 Sprite Image 是 workaround 而不是 solution
    wangyzj
        30
    wangyzj  
       2019-11-14 00:35:52 +08:00
    @learnshare 看来 svg 我还没用错,谢谢
    jinliming2
        31
    jinliming2  
       2019-11-14 01:09:38 +08:00 via iPhone
    雪碧图,换个小图标要重新生成整张图,图标大小变了还得连带 CSS 一堆坐标的改变,真的只是上个时代极限优化的解决方案。
    现在还在用的,大多都是历史遗留下来的代码,没有整体重构的。

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

    SVG 不仅可以无损缩放,而且 svgz 可以压缩到比普通图标还要小,并且可以直接嵌入到网页中,还可以做动画替代 gif,也可以直接当图片文件来用,做 background-image 也是可以的……
    hzlzh
        32
    hzlzh  
       2019-11-14 01:12:19 +08:00   ❤️ 1
    曾今我们还做了 WeFlow.io ,自动合并雪碧图,后来 H2 来了, 我们就不合并了。
    另外,需要注意,当雪碧图内容过多的时候有些低端手机会无法渲染这么大的图。
    总结来说就是不用了
    jinliming2
        33
    jinliming2  
       2019-11-14 01:26:13 +08:00 via iPhone
    @areless 如果是针对设备的产品,那么位图没啥大毛病。但是 web 页面是要在各种设备上展示的,不同分辨率,不同像素密度,针对高分屏,要对画面进行缩放,等等这一系列需求,情况就不一样了。矢量是为了能够任意缩放而不出现锯齿。
    像素是最好的定位?在上个世纪各种电子设备屏幕分辨率都差不多的年代也许是的,就比如十几年前就行的手机分辨率大多是 240*320,你要是按照这个分辨率到现在来按照像素定位,放到 4k 屏幕上显示,那也许你得准备一个放大镜了。
    flash 被淘汰是其他原因,web 安全性、耗电之类的。
    liuy1994g
        34
    liuy1994g  
       2019-11-14 02:18:49 +08:00 via Android
    我觉得一是 iconfont 很方便,二是用雪碧图不好做 css 特效
    weixiangzhe
        35
    weixiangzhe  
       2019-11-14 06:53:42 +08:00 via Android
    还有一点 现在小的图片 会被 webpack 打成 base64 直接写到 js 里的,需要用雪碧图的地方太少拉,
    areless
        36
    areless  
       2019-11-14 08:25:37 +08:00 via Android
    @jinliming2 真的是安全性差及耗电高吗?用 h5 或者其他形式来构建 flash 一样的矢量动画试试,照样电老虎。关于安全性,这是前端啊,大哥。虽然以前 flash 可以任意跨站 post 数据~推流~~~~作为开发者用着不香吗?那时候其他前端还真实现不了。位图可以做一份大的缩放适配给小分辨率设备使用的。矢量不是必须的~~~矢量没有锯齿是因为用运算抗锯齿了,普通渲染的矢量是有锯齿的
    areless
        37
    areless  
       2019-11-14 08:44:46 +08:00 via Android
    为什么图形领域在用的经典方案。老任 sony 无数 3a 大作的贴图,web 领域却那么突出。就像过去动画也用矢量去做了,结果闹了笑话。没了灵魂。没了灵魂。瘦了几年,历史反复,前端又要回 flash 那套了
    lizz666
        38
    lizz666  
       2019-11-14 09:05:49 +08:00
    快 3 年的开发生涯中好像没用过。。。
    yzlren
        39
    yzlren  
       2019-11-14 09:12:13 +08:00
    -。-雪碧图不是可以用 gulp,webpack 自动构建嘛
    Atukey
        40
    Atukey  
       2019-11-14 09:12:22 +08:00
    google 至今还在用着
    betulac
        41
    betulac  
       2019-11-14 11:02:47 +08:00
    上面的很多老哥们真的用过雪碧图?话说让美工去拼雪碧图是什么操作?
    zarte
        42
    zarte  
       2019-11-14 11:09:35 +08:00
    请跟上潮流,现在有不缺那点网速。
    belin520
        43
    belin520  
       2019-11-14 11:10:25 +08:00
    小尺寸的 icon 适合 inline 到 CSS 或者 HTML 里面,不需要额外的加载。
    这种事情,现在构建工具都可以做
    solome
        44
    solome  
       2019-11-14 11:10:46 +08:00
    没有过时,只是现在有更好的选择:svg\iconfont。
    eason1874
        45
    eason1874  
       2019-11-14 11:15:00 +08:00
    看了下淘宝首页,只有右侧用户中心几个多色图标是雪碧图,顶部、搜索框、列表、悬浮工具栏、底部用的单色图标都是字体图标。

    看了下谷歌,搜索结果页面是 svg,账号页面是字体图标,关于我页面是雪碧图,油管页面是 svg。
    augustheart
        46
    augustheart  
       2019-11-14 14:13:58 +08:00
    @areless 讲真就是,如果才用大图缩小的用法,没法保证缩放效果。
    augustheart
        47
    augustheart  
       2019-11-14 14:15:06 +08:00
    主要还是时代过去了吧。现在基本上已经不考虑流量、性能什么的了,自然一切向着方便的方向走。
    learnshare
        48
    learnshare  
       2019-11-14 14:23:06 +08:00
    @betulac 上古时代的雪碧图真的是自己手工处理的,grunt/gulp 也没出现很久
    banricho
        49
    banricho  
       2019-11-14 14:30:30 +08:00
    自动合并雪碧图以及多尺寸处理并不是什么有难度的事情……
    即便是现在移动端大量的 vw vh 也不会增加多少工作量。

    感觉更多的还是设计风格发生了变化,很多图片可被替代。
    加上网络都比较好了,这玩意儿的提升不那么明显了。本质上只是减少了请求数,图片体积未必小,毕竟还得考虑到按需加载的问题。
    overflow99
        50
    overflow99  
       2019-11-14 14:40:53 +08:00
    雪碧图虽说会减少 http 请求,但是会增加代码量,而且不好维护,现在的主流用 iconfont+svg
    qiaobeier
        51
    qiaobeier  
       2019-11-14 14:43:40 +08:00
    icon font 有渲染问题,现在都是 svg symbol sprite
    66beta
        52
    66beta  
       2019-11-14 14:50:33 +08:00 via Android
    想什么呢?现在是 webpack 自动生成雪碧图的

    http2 就可以浪费连接数了?
    no1xsyzy
        53
    no1xsyzy  
       2019-11-14 20:29:33 +08:00
    @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
        54
    no1xsyzy  
       2019-11-14 20:36:40 +08:00
    @areless 你不妨花个半天时间,玩玩 Blender,拿上一堆贴图,看看能玩出什么。
    哪个 3A 游戏的动画部分不是用骨骼做的?布娃娃都少不了。
    另外,宫老则是说过 3D 动画才是未来,而且又双叒叕复出了,做 3D。
    areless
        55
    areless  
       2019-11-14 22:04:33 +08:00 via Android
    @no1xsyzy 押井守说高帧 3d 不自然。你看 3d 动画吧,我还是看普通漫画,手绘分镜真棒,爽歪歪。分镜可以一气呵成,某些高科技偏要拿几百帧去补间~~~一堆计算机去渲染,结果差强人意。矢量放大占资源程度比大位图缩放多的多,矢量本身就是通过计算最后出来一张位图。位图构成复杂,矢量可能得算到计算机崩溃。矢量不能用于展示实景,及类实景的 icon~~~也就是现在的平面化磁贴 ui 让矢量重新火了一把,简直是 flash 恶劣之处的再生。前端漏洞也是安全性问题的话,那大家都不用上网了,那种跨站脚本是漏洞,谁定义的啊?那每个统计脚本都是木马了~~flash 那优越的 as 怎么不发扬光大
    hakono
        56
    hakono  
       2019-11-15 00:37:48 +08:00 via iPhone
    @areless
    无知

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

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

    而你说的 3D 动画不流畅,不好意思这个锅 3D 不背,日本 3D 动画不流畅是为了市场强行三渲二然后抽帧的造成的。真正的纯 3D 且制作合格的动画不存在不流畅的问题。
    日本 3D 动画技术的积累就是个弟中的弟弟,3D 长久以来只是 2D 的辅助,导致日本 3D 动画制作技术和 2D 相比一直都处于吊车尾等级。就这点技术能力还强行想把 3D 渲染成手绘 2D 的效果迎合市场,做出的效果怎么会好
    no1xsyzy
        57
    no1xsyzy  
       2019-11-15 01:45:36 +08:00
    @areless
    1、好莱坞电影也有分镜,也就记录片这种摆不了只能撞的没分镜。
    2、觉得手绘比 3D 好,要么是 Pearl Effect,要么就是只看了些垃圾 3D 就开始说的。
    3、高帧 3D 的不自然主要来自恐怖谷,因为这群人还在手捏模型的阶段;游戏大量采用动作捕捉,你有觉得有多不自然吗?
    4、行啊,跨站不算,那等你根本没用过淘宝却莫名其妙多了几百万的已付款已签收订单别哭啊。你开个网站日常被 8Tbps 也别哭啊。
    5、你对于位图的理解是不是停留在 1920x1080 不动了啊?至少 08 年就有 3000x3000 以上的了,Rage 当时就有 4K 壁纸了,单一个文件,不进行任何解码,占带宽占内存就比大部分矢量图完全调用高。这对比一下,你是给 4k 屏专门做个大背景还是做点抽象矢量图?
    6、你这不 perf 就敲定哪个更优,算不算 premature optimization ?
    no1xsyzy
        58
    no1xsyzy  
       2019-11-15 01:52:47 +08:00
    @areless 7、分镜一气呵成?白箱里蓝胖子憋不出分镜都被 Desk 关小黑屋了,真当分镜是屎能一泻千里啊。
    8、任意代码执行不是安全性问题,不如直接把电脑给我?进 CVE 不算漏洞,你这是要跟整个业界对着干咯?
    9、这么吹位图,难道你用的是 ms-paint-i.de
    QdouHuiQwaiLai
        59
    QdouHuiQwaiLai  
       2019-11-15 08:38:46 +08:00
    确实过时了
    fumichael
        60
    fumichael  
       2019-11-15 09:27:45 +08:00
    iconfont 1 不是 csssprite 变种吗, 原理差不多吧
    fengmumu
        61
    fengmumu  
       2019-11-15 15:22:33 +08:00
    过不过时看场景的吧,把图片打包进文件又不是灭有缺点,svg 什么的复杂点的,体积也大的, 说 H2 的,h2 也有其缺点啊,无脑一把梭木有意义啊,小声比比,现在很多都还是 h1 的吧,只有过时的业务场景,哪有过时的技术,JQ 现在也不是没有死
    meepo3927
        62
    meepo3927  
       2019-11-15 16:06:12 +08:00
    用 iconfont , fontAwesome, 我目前的项目中 icon 基本不用图片了
    phy25
        63
    phy25  
       2019-11-16 11:13:30 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5817 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 02:44 · PVG 10:44 · LAX 18:44 · JFK 21:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.