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>
9134 次点击
所在节点    全球工单系统
36 条回复
Hsinchu
2019-01-13 13:25:57 +08:00
@C2G 不是 cdn 原因,是因为用户没追番和追番了的图不一样,你应该是没追番的
Hsinchu
2019-01-13 13:31:04 +08:00
@Osk ps 后的图片要是要用于分享还是需要清除隐私信息的,想起来曾经国外有明星分享自拍被网友发现 exif 里有原图缩略图,居然是裸照,截了一小块分享的。
StephenHe
2019-01-13 13:33:56 +08:00
之前小公司,后端服务器没开启 gzip 压缩,js 加载十几秒一直白屏,前端也是个实习生
azh7138m
2019-01-13 13:40:15 +08:00
@StephenHe 开没开 gzip 怎么就是前端的问题了,这个锅前端不背。

大概是有个运营平台,最多设计传个图,运营审核一下就好了,大概率是不需要前端参与的。
xxgirl2
2019-01-13 14:00:55 +08:00
感觉用 imagemagick 来 strip 一下就行了
应该准备个脚本写上类似这样的语句
convert "${f}" -interlace PNG -strip "${f}.1.png"
当然开了交错会浪费流量,这个要看具体情况了
JerryCha
2019-01-13 15:05:45 +08:00
我寻思着这个分辨率的图像得塞多少信息才能撑到 20MB
C2G
2019-01-13 17:24:18 +08:00
@Hsinchu #21 都三玖是天了还没追 怎么可能
Vamwere
2019-01-13 17:34:58 +08:00
你们有没有想过这件事从来没有前端和设计参与过呢?只是一个活动平台然后运营自己一键生成的
envylee
2019-01-13 18:42:05 +08:00
这个确实是低级错误了,以前某几个版本的 ps 当时没装对也是这样,把源数据附加进去了
saran
2019-01-13 18:54:01 +08:00
B 站美工应该比前端人多。
iNaru
2019-01-13 19:25:05 +08:00
这页面相当于 CMS 生成发布页,运营人员直接上传原图,后端却没压缩处理。
dtysky
2019-01-13 21:05:19 +08:00
你站运营一向如此,根本没这个意识……不过确实我记得我原来给后台系统专门限制死了每像素大小,大了就直接打回不让传,现在去掉了……?
opengps
2019-01-13 21:10:17 +08:00
看题目我想到了图种,然后发现楼主已经解密了原因,涨了见识,原来 ps 的锅
Icemic
2019-01-13 21:44:26 +08:00
输出 png 时有个选项,勾上就会把图层信息带上。楼主可以把后缀直接改成 psd 打开试试。
bclerdx
2019-01-13 22:10:16 +08:00
activity.hdslb.com 这个域名在鹏博士居然被劫持了。。打开速度很快,大约不到 1 分钟吧。
cloudzqy
2019-01-13 22:22:17 +08:00
这种页面一般都不是前端手写的,而是写好架子,每次新活动运营自己配的。前端不背锅

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

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

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

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

© 2021 V2EX