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>
1
ansonsiva 2019-01-13 06:52:52 +08:00 via iPhone
看来有人年终奖不保,b 站这个浏览量,宽带费血亏
|
2
lzvezr 2019-01-13 07:14:53 +08:00 via Android
感觉最近 B 站好多东西没测试就放出来了,是年底赶工吗
|
3
plqws 2019-01-13 07:19:07 +08:00
很多人根本没有这方面的知识吧,虽然在我们眼里这都是常识
|
4
wyfyw 2019-01-13 07:27:50 +08:00 1
|
5
qiayue 2019-01-13 07:55:56 +08:00 via Android
有可能是设计切图出来给前端,前端也没管,直接就用了。
设计和前端各 50%责任 |
6
cl1844 2019-01-13 08:03:10 +08:00 via iPhone 7
给写弹幕播放器的大神开过 4k 待遇的地方,前端可能待遇不行做事就马虎吧
|
7
594duck 2019-01-13 08:31:23 +08:00 via iPhone
待遇? b 站是梦想之人去的地方。待遇是个鬼哦。
|
9
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=` |
10
alvin666 2019-01-13 10:09:26 +08:00 via Android 2
是这样的,ps 会塞进去很多 xml 信息,解决办法是不要另存为,要选导出到 web 图片,这样的成品图就没有这些信息了。
|
11
dnsaq 2019-01-13 10:11:53 +08:00 via iPhone
公司里能用就行,这种事情见多了,一张图 10 几兆首页还非要搞个 banner 轮播
|
12
Moorj 2019-01-13 10:16:35 +08:00 via iPhone
临时工吧,不然都应该知道导出为 web 这个操作的
|
13
shijingshijing 2019-01-13 10:43:47 +08:00 via iPhone
@honeycomb B 站后端也捉急,用一下视频搜索就能体会到有多酸爽。
|
14
Osk 2019-01-13 10:46:36 +08:00
ps 用得少的表示真的不知道 ps 这个坑 /feature, 不过我一般会自己用 jio 本另存下,变相去掉了这些, 主要是不希望照片 exif 里有不希望透露的信息...
不过一张特定分辨率的图大概会有多大应该有点常识吧, 20M 明显不对了. |
15
HuHui 2019-01-13 11:46:15 +08:00 via Android
前公司里的列表头像直接用的用户上传的原图我会说?
|
16
snw 2019-01-13 11:49:52 +08:00 via Android
用 windows 自带的画图另存为一下不就行了……哦不对,搞设计的大多用 Mac
|
17
chinvo 2019-01-13 11:53:57 +08:00 via iPhone 1
说不定第二天马克丁就起诉 B 站了(
|
18
tutustream 2019-01-13 12:54:01 +08:00
长城宽带加载了 3 分钟
|
19
C2G 2019-01-13 13:11:19 +08:00 via Android
CDN 的问题吧,我这里没有加载这么大的图片
另外,三玖是天! |
22
Hsinchu OP @Osk ps 后的图片要是要用于分享还是需要清除隐私信息的,想起来曾经国外有明星分享自拍被网友发现 exif 里有原图缩略图,居然是裸照,截了一小块分享的。
|
23
StephenHe 2019-01-13 13:33:56 +08:00
之前小公司,后端服务器没开启 gzip 压缩,js 加载十几秒一直白屏,前端也是个实习生
|
24
azh7138m 2019-01-13 13:40:15 +08:00 via Android
|
25
xxgirl2 2019-01-13 14:00:55 +08:00
感觉用 imagemagick 来 strip 一下就行了
应该准备个脚本写上类似这样的语句 convert "${f}" -interlace PNG -strip "${f}.1.png" 当然开了交错会浪费流量,这个要看具体情况了 |
26
JerryCha 2019-01-13 15:05:45 +08:00
我寻思着这个分辨率的图像得塞多少信息才能撑到 20MB
|
28
Vamwere 2019-01-13 17:34:58 +08:00 via iPhone
你们有没有想过这件事从来没有前端和设计参与过呢?只是一个活动平台然后运营自己一键生成的
|
29
envylee 2019-01-13 18:42:05 +08:00
这个确实是低级错误了,以前某几个版本的 ps 当时没装对也是这样,把源数据附加进去了
|
30
saran 2019-01-13 18:54:01 +08:00
B 站美工应该比前端人多。
|
31
iNaru 2019-01-13 19:25:05 +08:00
这页面相当于 CMS 生成发布页,运营人员直接上传原图,后端却没压缩处理。
|
32
dtysky 2019-01-13 21:05:19 +08:00 via Android
你站运营一向如此,根本没这个意识……不过确实我记得我原来给后台系统专门限制死了每像素大小,大了就直接打回不让传,现在去掉了……?
|
33
opengps 2019-01-13 21:10:17 +08:00 via Android
看题目我想到了图种,然后发现楼主已经解密了原因,涨了见识,原来 ps 的锅
|
34
Icemic 2019-01-13 21:44:26 +08:00 via Android
输出 png 时有个选项,勾上就会把图层信息带上。楼主可以把后缀直接改成 psd 打开试试。
|
35
bclerdx 2019-01-13 22:10:16 +08:00
activity.hdslb.com 这个域名在鹏博士居然被劫持了。。打开速度很快,大约不到 1 分钟吧。
|
36
cloudzqy 2019-01-13 22:22:17 +08:00 via Android
这种页面一般都不是前端手写的,而是写好架子,每次新活动运营自己配的。前端不背锅
|