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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

工单节点使用指南

请用平和的语言准确描述你所遇到的问题

厂商的技术支持和你一样也是有喜怒哀乐的普通人类，尊重是相互的

如果是关于 V2EX 本身的问题反馈，请使用反馈节点

这是一个创建于 2467 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 条附言 2019-01-13 14:14:33 +08:00

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

ansonsiva

2019-01-13 06:52:52 +08:00 via iPhone

看来有人年终奖不保，b 站这个浏览量，宽带费血亏

lzvezr

2019-01-13 07:14:53 +08:00 via Android

感觉最近 B 站好多东西没测试就放出来了，是年底赶工吗

plqws

2019-01-13 07:19:07 +08:00

很多人根本没有这方面的知识吧，虽然在我们眼里这都是常识

wyfyw

2019-01-13 07:27:50 +08:00

我加载的是 https://i0.hdslb.com/bfs/activity-plat/static/20190107/30cb1f6c4bfeb93761cf35c27d9b88cb/Bk9HNcxfN.png 42KB，楼主给的链接确实太大了。

qiayue

PRO

2019-01-13 07:55:56 +08:00 via Android

有可能是设计切图出来给前端，前端也没管，直接就用了。
设计和前端各 50%责任

cl1844

2019-01-13 08:03:10 +08:00 via iPhone

给写弹幕播放器的大神开过 4k 待遇的地方，前端可能待遇不行做事就马虎吧

594duck

2019-01-13 08:31:23 +08:00 via iPhone

待遇？ b 站是梦想之人去的地方。待遇是个鬼哦。

honeycomb

2019-01-13 09:50:03 +08:00 via Android

@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 via Android

是这样的，ps 会塞进去很多 xml 信息，解决办法是不要另存为，要选导出到 web 图片，这样的成品图就没有这些信息了。

dnsaq

2019-01-13 10:11:53 +08:00 via iPhone

公司里能用就行，这种事情见多了，一张图 10 几兆首页还非要搞个 banner 轮播

Moorj

2019-01-13 10:16:35 +08:00 via iPhone

临时工吧，不然都应该知道导出为 web 这个操作的

shijingshijing

2019-01-13 10:43:47 +08:00 via iPhone

@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 via Android

前公司里的列表头像直接用的用户上传的原图我会说？

snw

2019-01-13 11:49:52 +08:00 via Android

用 windows 自带的画图另存为一下不就行了……哦不对，搞设计的大多用 Mac

chinvo

2019-01-13 11:53:57 +08:00 via iPhone

说不定第二天马克丁就起诉 B 站了（

tutustream

2019-01-13 12:54:01 +08:00

长城宽带加载了 3 分钟

C2G

2019-01-13 13:11:19 +08:00 via Android

CDN 的问题吧，我这里没有加载这么大的图片
另外，三玖是天！

Hsinchu

2019-01-13 13:24:24 +08:00 via Android

@wyfyw 你这张是没有追番的图，追番了的就是我那张了

Hsinchu

2019-01-13 13:25:57 +08:00 via Android

@C2G 不是 cdn 原因，是因为用户没追番和追番了的图不一样，你应该是没追番的

Hsinchu

2019-01-13 13:31:04 +08:00 via Android

@Osk ps 后的图片要是要用于分享还是需要清除隐私信息的，想起来曾经国外有明星分享自拍被网友发现 exif 里有原图缩略图，居然是裸照，截了一小块分享的。

StephenHe

2019-01-13 13:33:56 +08:00

之前小公司，后端服务器没开启 gzip 压缩，js 加载十几秒一直白屏，前端也是个实习生

azh7138m

2019-01-13 13:40:15 +08:00 via Android

@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 via Android

@Hsinchu #21 都三玖是天了还没追怎么可能

Vamwere

2019-01-13 17:34:58 +08:00 via iPhone

你们有没有想过这件事从来没有前端和设计参与过呢？只是一个活动平台然后运营自己一键生成的

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 via Android

你站运营一向如此，根本没这个意识……不过确实我记得我原来给后台系统专门限制死了每像素大小，大了就直接打回不让传，现在去掉了……？

opengps

2019-01-13 21:10:17 +08:00 via Android

看题目我想到了图种，然后发现楼主已经解密了原因，涨了见识，原来 ps 的锅

Icemic

2019-01-13 21:44:26 +08:00 via Android

输出 png 时有个选项，勾上就会把图层信息带上。楼主可以把后缀直接改成 psd 打开试试。

bclerdx

2019-01-13 22:10:16 +08:00

activity.hdslb.com 这个域名在鹏博士居然被劫持了。。打开速度很快，大约不到 1 分钟吧。

cloudzqy

2019-01-13 22:22:17 +08:00 via Android

这种页面一般都不是前端手写的，而是写好架子，每次新活动运营自己配的。前端不背锅