工单节点使用指南
• 请用平和的语言准确描述你所遇到的问题
• 厂商的技术支持和你一样也是有喜怒哀乐的普通人类,尊重是相互的
• 如果是关于 V2EX 本身的问题反馈,请使用 反馈 节点
Hsinchu

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

  •  
  •   Hsinchu · Jan 13, 2019 · 10715 views
    This topic created in 2857 days ago, the information mentioned may be changed or developed.

    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>
    
    Supplement 1  ·  Jan 13, 2019
    1 月 13 日 14:10,B 站美工做了张新图,现在已经替换掉了。
    <xmp:ModifyDate>2019-01-13T14:10:29+08:00</xmp:ModifyDate>
    36 replies  •  2019-01-13 22:22:17 +08:00
    ansonsiva
    ansonsiva
    Jan 13, 2019 via iPhone
    1
    看来有人年终奖不保,b 站这个浏览量,宽带费血亏
    lzvezr
    lzvezr
    Jan 13, 2019 via Android
    2
    感觉最近 B 站好多东西没测试就放出来了,是年底赶工吗
    plqws
    plqws
    Jan 13, 2019
    3
    很多人根本没有这方面的知识吧,虽然在我们眼里这都是常识
    wyfyw
    wyfyw
    Jan 13, 2019❤️1
    4
    qiayue
    qiayue
    Jan 13, 2019 via Android
    5
    有可能是设计切图出来给前端,前端也没管,直接就用了。
    设计和前端各 50%责任
    cl1844
    cl1844
    Jan 13, 2019 via iPhone❤️7
    6
    给写弹幕播放器的大神开过 4k 待遇的地方,前端可能待遇不行做事就马虎吧
    594duck
    594duck
    Jan 13, 2019 via iPhone
    7
    待遇? b 站是梦想之人去的地方。待遇是个鬼哦。
    honeycomb
    honeycomb
    Jan 13, 2019 via Android❤️3
    8
    @594duck 想起当年那个写了 b 站初版 HTML5 播放器的人了
    CatCode
    CatCode
    Jan 13, 2019
    9
    两种解决办法
    1. 用[Adobe 官方论坛]( https://forums.adobe.com/thread/2081839)上的代码加入到 PS 的脚本里
    2. 去下一个[exiftool]( https://sno.phy.queensu.ca/~phil/exiftool/),然后执行`./exiftool.exe bigfile.png -DocumentAncestors=`
    alvin666
    alvin666
    Jan 13, 2019 via Android❤️2
    10
    是这样的,ps 会塞进去很多 xml 信息,解决办法是不要另存为,要选导出到 web 图片,这样的成品图就没有这些信息了。
    dnsaq
    dnsaq
    Jan 13, 2019 via iPhone
    11
    公司里能用就行,这种事情见多了,一张图 10 几兆首页还非要搞个 banner 轮播
    Moorj
    Moorj
    Jan 13, 2019 via iPhone
    12
    临时工吧,不然都应该知道导出为 web 这个操作的
    shijingshijing
    shijingshijing
    Jan 13, 2019 via iPhone
    13
    @honeycomb B 站后端也捉急,用一下视频搜索就能体会到有多酸爽。
    Osk
    Osk
    Jan 13, 2019
    14
    ps 用得少的表示真的不知道 ps 这个坑 /feature, 不过我一般会自己用 jio 本另存下,变相去掉了这些, 主要是不希望照片 exif 里有不希望透露的信息...

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

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