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

2019-01-13 05:40:01 +08:00
 Hsinchu

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 站员工都没觉得不正常吗。

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

不过一张特定分辨率的图大概会有多大应该有点常识吧, 20M 明显不对了.
HuHui
2019-01-13 11:46:15 +08:00
前公司里的列表头像直接用的用户上传的原图我会说?
snw
2019-01-13 11:49:52 +08:00
用 windows 自带的画图另存为一下不就行了……哦不对,搞设计的大多用 Mac
chinvo
2019-01-13 11:53:57 +08:00
说不定第二天马克丁就起诉 B 站了(
tutustream
2019-01-13 12:54:01 +08:00
长城宽带加载了 3 分钟
C2G
2019-01-13 13:11:19 +08:00
CDN 的问题吧,我这里没有加载这么大的图片
另外,三玖是天!
Hsinchu
2019-01-13 13:24:24 +08:00
@wyfyw 你这张是没有追番的图,追番了的就是我那张了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/526484

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX