首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
工单节点使用指南
• 请用平和的语言准确描述你所遇到的问题
• 厂商的技术支持和你一样也是有喜怒哀乐的普通人类,尊重是相互的
• 如果是关于 V2EX 本身的问题反馈,请使用 反馈 节点
Coding
V2EX  ›  全球工单系统

B 站活动页面这张 563*88 的图片有 20M?

  •  
  •   Hsinchu · 335 天前 · 6048 次点击
    这是一个创建于 335 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://www.bilibili.com/blackboard/activity-5hanayome.html

    刚刚打开 B 站《五等分的新娘》的活动页面时,发现加载特别慢。于是 F12 找了一下原因,结果发现了一张图片大小足有 20M,关键下载下来一看就是最顶上的标题图,分辨率才 563*88。

    图片源地址: https://activity.hdslb.com/blackboard/static/20190109/30cb1f6c4bfeb93761cf35c27d9b88cb/rJv7IFQfN.png

    看着这个文件楞了半天想起来用 ps 看了下文件信息,发现了 20M 的原因,图片的原始数据里有超长一大堆。
    关键的部分我直接放文本了,因为对 rdf 不了解,所以来问问。

    本来是想问的,结果发帖时搜到的相关问题,好像是 ps 有 bug,有时会无端塞入大量无用的 DocumentAncestors 数据,参考链接 tieba.baidu.com/p/5166418760
    可以用 ps 脚本删除这些数据,或者导出为 web 所用格式。
    虽说现在带宽高了,流量也不值钱了,但给网页供图时还是要有点减小图片体积的意识(不然导出为 web 所用格式干嘛用呢),20M 的图片 B 站员工都没觉得不正常吗。

    Imgur

    <?xml version="1.0" encoding="utf-8"?>
    
    <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">  
      <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">  
        <rdf:Description xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/" rdf:about="">  
          <xmp:CreatorTool>Adobe Photoshop CC (Windows)</xmp:CreatorTool>  
          <xmp:CreateDate>2019-01-07T16:54:57+08:00</xmp:CreateDate>  
          <xmp:MetadataDate>2019-01-09T22:32:09+08:00</xmp:MetadataDate>  
          <xmp:ModifyDate>2019-01-09T22:32:09+08:00</xmp:ModifyDate>  
          <xmpMM:InstanceID>xmp.iid:9fb6fd1e-361b-4049-9489-abc4f4a9d1e5</xmpMM:InstanceID>  
          <xmpMM:DocumentID>adobe:docid:photoshop:62c91031-d32f-5348-88ad-15c57dc04808</xmpMM:DocumentID>  
          <xmpMM:OriginalDocumentID>xmp.did:a70abff5-556d-cb4c-9e32-86554191193f</xmpMM:OriginalDocumentID>  
          <xmpMM:History> 
            <rdf:Seq> 
              <rdf:li rdf:parseType="Resource"> 
                <stEvt:action>created</stEvt:action>  
                <stEvt:instanceID>xmp.iid:a70abff5-556d-cb4c-9e32-86554191193f</stEvt:instanceID>  
                <stEvt:when>2019-01-07T16:54:57+08:00</stEvt:when>  
                <stEvt:softwareAgent>Adobe Photoshop CC (Windows)</stEvt:softwareAgent> 
              </rdf:li>  
              <rdf:li rdf:parseType="Resource"> 
                <stEvt:action>saved</stEvt:action>  
                <stEvt:instanceID>xmp.iid:9959982b-e54b-164b-a218-4be37085344e</stEvt:instanceID>  
                <stEvt:when>2019-01-07T16:54:57+08:00</stEvt:when>  
                <stEvt:softwareAgent>Adobe Photoshop CC (Windows)</stEvt:softwareAgent>  
                <stEvt:changed>/</stEvt:changed> 
              </rdf:li>  
              <rdf:li rdf:parseType="Resource"> 
                <stEvt:action>saved</stEvt:action>  
                <stEvt:instanceID>xmp.iid:9fb6fd1e-361b-4049-9489-abc4f4a9d1e5</stEvt:instanceID>  
                <stEvt:when>2019-01-09T22:32:09+08:00</stEvt:when>  
                <stEvt:softwareAgent>Adobe Photoshop CC (Windows)</stEvt:softwareAgent>  
                <stEvt:changed>/</stEvt:changed> 
              </rdf:li> 
            </rdf:Seq> 
          </xmpMM:History>  
          <dc:format>image/png</dc:format>  
          <photoshop:ColorMode>3</photoshop:ColorMode>  
          <photoshop:ICCProfile>sRGB IEC61966-2.1</photoshop:ICCProfile>  
          <photoshop:DocumentAncestors> 
            <rdf:Bag> 
              <rdf:li>0000515995CA7B3EEA99CA1008D30D20</rdf:li>  
              ......
              <rdf:li>FFFE85056C819B86D6C9A5E49EF3CC62</rdf:li>  
              <rdf:li>adobe:docid:illustrator:8aec8ed6-e0f3-11e1-a6e9-e66e0b327ac6</rdf:li>  
              <rdf:li>adobe:docid:illustrator:d28d8ccc-5271-11da-97d1-d978cf0c6173</rdf:li>  
              <rdf:li>adobe:docid:imageready:0bc7c8fc-1a1f-11de-93e9-f280f72ccd9f</rdf:li>  
              ......
              <rdf:li>adobe:docid:imageready:ffd45743-5ea4-11dd-8260-982f52bef46c</rdf:li>  
              <rdf:li>adobe:docid:indd:1c93e5c6-93fd-11e2-80ac-be7d4d0aadda</rdf:li>  
              ......
              <rdf:li>adobe:docid:indd:eb4aa7f0-3966-11dd-8a5b-81e27e2e4a4a</rdf:li>  
              <rdf:li>adobe:docid:photoshop:00006ea1-3f80-11dd-b108-beee10738197</rdf:li>  
              ......
              <rdf:li>adobe:docid:photoshop:ffffcbc7-f713-11e1-8940-f3719f4820e9</rdf:li>  
              <rdf:li>bf885a4c0000001e8f306a3300000000</rdf:li>  
              <rdf:li>f27af84c0000001e8f306a3300000000</rdf:li>  
              <rdf:li>f851be95-c68b-11e0-0000-d2b0488bd6b9</rdf:li>  
              <rdf:li>pixvue.com:docid:pixvue:2e422072-1411-4538-858d-472158800521</rdf:li>  
              <rdf:li>uuid:0000b650-0000-8887-177e-042c00000000</rdf:li>  
              <rdf:li>uuid:00014C076E2AE311AA40CD912F9162CD</rdf:li>  
              ......
              <rdf:li>uuid:ff863551-0000-001e-8f32-5cd800000000</rdf:li>  
              <rdf:li>xmp.did:000083DC112068118DBBF39EAC3C9C14</rdf:li>  
              ......
              <rdf:li>xmp.did:fff4b386-160b-45d7-8975-29ceef56c88c</rdf:li>  
              <rdf:li>xmp.id:431719A10E2068118C14BA56883396C7</rdf:li> 
            </rdf:Bag> 
          </photoshop:DocumentAncestors> 
        </rdf:Description> 
      </rdf:RDF> 
    </x:xmpmeta>
    
    第 1 条附言  ·  334 天前
    1 月 13 日 14:10,B 站美工做了张新图,现在已经替换掉了。
    <xmp:ModifyDate>2019-01-13T14:10:29+08:00</xmp:ModifyDate>
    36 回复  |  直到 2019-01-13 22:22:17 +08:00
        1
    ansonsiva   335 天前 via iPhone
    看来有人年终奖不保,b 站这个浏览量,宽带费血亏
        2
    lzvezr   335 天前 via Android
    感觉最近 B 站好多东西没测试就放出来了,是年底赶工吗
        3
    plqws   335 天前
    很多人根本没有这方面的知识吧,虽然在我们眼里这都是常识
        4
    wyfyw   335 天前   ♥ 1
        5
    qiayue   334 天前 via Android
    有可能是设计切图出来给前端,前端也没管,直接就用了。
    设计和前端各 50%责任
        6
    cl1844   334 天前 via iPhone   ♥ 7
    给写弹幕播放器的大神开过 4k 待遇的地方,前端可能待遇不行做事就马虎吧
        7
    594duck   334 天前 via iPhone
    待遇? b 站是梦想之人去的地方。待遇是个鬼哦。
        8
    honeycomb   334 天前 via Android   ♥ 3
    @594duck 想起当年那个写了 b 站初版 HTML5 播放器的人了
        9
    CatCode   334 天前
    两种解决办法
    1. 用[Adobe 官方论坛]( https://forums.adobe.com/thread/2081839)上的代码加入到 PS 的脚本里
    2. 去下一个[exiftool]( https://sno.phy.queensu.ca/~phil/exiftool/),然后执行`./exiftool.exe bigfile.png -DocumentAncestors=`
        10
    alvin666   334 天前 via Android   ♥ 2
    是这样的,ps 会塞进去很多 xml 信息,解决办法是不要另存为,要选导出到 web 图片,这样的成品图就没有这些信息了。
        11
    dnsaq   334 天前 via iPhone
    公司里能用就行,这种事情见多了,一张图 10 几兆首页还非要搞个 banner 轮播
        12
    Moorj   334 天前 via iPhone
    临时工吧,不然都应该知道导出为 web 这个操作的
        13
    shijingshijing   334 天前 via iPhone
    @honeycomb B 站后端也捉急,用一下视频搜索就能体会到有多酸爽。
        14
    Osk   334 天前
    ps 用得少的表示真的不知道 ps 这个坑 /feature, 不过我一般会自己用 jio 本另存下,变相去掉了这些, 主要是不希望照片 exif 里有不希望透露的信息...

    不过一张特定分辨率的图大概会有多大应该有点常识吧, 20M 明显不对了.
        15
    HuHui   334 天前 via Android
    前公司里的列表头像直接用的用户上传的原图我会说?
        16
    snw   334 天前 via Android
    用 windows 自带的画图另存为一下不就行了……哦不对,搞设计的大多用 Mac
        17
    chinvo   334 天前 via iPhone   ♥ 1
    说不定第二天马克丁就起诉 B 站了(
        18
    tutustream   334 天前
    长城宽带加载了 3 分钟
        19
    C2G   334 天前 via Android
    CDN 的问题吧,我这里没有加载这么大的图片
    另外,三玖是天!
        20
    Hsinchu   334 天前 via Android
    @wyfyw 你这张是没有追番的图,追番了的就是我那张了
        21
    Hsinchu   334 天前 via Android
    @C2G 不是 cdn 原因,是因为用户没追番和追番了的图不一样,你应该是没追番的
        22
    Hsinchu   334 天前 via Android
    @Osk ps 后的图片要是要用于分享还是需要清除隐私信息的,想起来曾经国外有明星分享自拍被网友发现 exif 里有原图缩略图,居然是裸照,截了一小块分享的。
        23
    StephenHe   334 天前
    之前小公司,后端服务器没开启 gzip 压缩,js 加载十几秒一直白屏,前端也是个实习生
        24
    azh7138m   334 天前 via Android
    @StephenHe 开没开 gzip 怎么就是前端的问题了,这个锅前端不背。

    大概是有个运营平台,最多设计传个图,运营审核一下就好了,大概率是不需要前端参与的。
        25
    xxgirl2   334 天前
    感觉用 imagemagick 来 strip 一下就行了
    应该准备个脚本写上类似这样的语句
    convert "${f}" -interlace PNG -strip "${f}.1.png"
    当然开了交错会浪费流量,这个要看具体情况了
        26
    JerryCha   334 天前
    我寻思着这个分辨率的图像得塞多少信息才能撑到 20MB
        27
    C2G   334 天前 via Android
    @Hsinchu #21 都三玖是天了还没追 怎么可能
        28
    Vamwere   334 天前 via iPhone
    你们有没有想过这件事从来没有前端和设计参与过呢?只是一个活动平台然后运营自己一键生成的
        29
    envylee   334 天前
    这个确实是低级错误了,以前某几个版本的 ps 当时没装对也是这样,把源数据附加进去了
        30
    saran   334 天前
    B 站美工应该比前端人多。
        31
    iNaru   334 天前
    这页面相当于 CMS 生成发布页,运营人员直接上传原图,后端却没压缩处理。
        32
    dtysky   334 天前 via Android
    你站运营一向如此,根本没这个意识……不过确实我记得我原来给后台系统专门限制死了每像素大小,大了就直接打回不让传,现在去掉了……?
        33
    opengps   334 天前 via Android
    看题目我想到了图种,然后发现楼主已经解密了原因,涨了见识,原来 ps 的锅
        34
    Icemic   334 天前 via Android
    输出 png 时有个选项,勾上就会把图层信息带上。楼主可以把后缀直接改成 psd 打开试试。
        35
    bclerdx   334 天前
    activity.hdslb.com 这个域名在鹏博士居然被劫持了。。打开速度很快,大约不到 1 分钟吧。
        36
    cloudzqy   334 天前 via Android
    这种页面一般都不是前端手写的,而是写好架子,每次新活动运营自己配的。前端不背锅
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1082 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 23:29 · PVG 07:29 · LAX 15:29 · JFK 18:29
    ♥ Do have faith in what you're doing.