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

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

  •  
  •   Hsinchu · 5 天前 · 4815 次点击

    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 条附言  ·  5 天前
    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   5 天前 via iPhone
    看来有人年终奖不保,b 站这个浏览量,宽带费血亏
        2
    lzvezr   5 天前 via Android
    感觉最近 B 站好多东西没测试就放出来了,是年底赶工吗
        3
    plqws   5 天前
    很多人根本没有这方面的知识吧,虽然在我们眼里这都是常识
        4
    wyfyw   5 天前   ♥ 1
        5
    qiayue   5 天前 via Android
    有可能是设计切图出来给前端,前端也没管,直接就用了。
    设计和前端各 50%责任
        6
    cl1844   5 天前 via iPhone   ♥ 7
    给写弹幕播放器的大神开过 4k 待遇的地方,前端可能待遇不行做事就马虎吧
        7
    594duck   5 天前 via iPhone
    待遇? b 站是梦想之人去的地方。待遇是个鬼哦。
        8
    honeycomb   5 天前 via Android   ♥ 3
    @594duck 想起当年那个写了 b 站初版 HTML5 播放器的人了
        9
    CatCode   5 天前
    两种解决办法
    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   5 天前 via Android   ♥ 2
    是这样的,ps 会塞进去很多 xml 信息,解决办法是不要另存为,要选导出到 web 图片,这样的成品图就没有这些信息了。
        11
    dnsaq   5 天前 via iPhone
    公司里能用就行,这种事情见多了,一张图 10 几兆首页还非要搞个 banner 轮播
        12
    Moorj   5 天前 via iPhone
    临时工吧,不然都应该知道导出为 web 这个操作的
        13
    shijingshijing   5 天前 via iPhone
    @honeycomb B 站后端也捉急,用一下视频搜索就能体会到有多酸爽。
        14
    Osk   5 天前
    ps 用得少的表示真的不知道 ps 这个坑 /feature, 不过我一般会自己用 jio 本另存下,变相去掉了这些, 主要是不希望照片 exif 里有不希望透露的信息...

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

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