不知道什么时候兴起的一阵怪风，而且也不仅仅限于博客网站：越来越多的网站（甚至在首页就）嵌入了大量未经压缩且没有异步加载的图片/字体等媒体资源。网站一打开，页面还是缺少样式甚至一片空白的时候，流量表却在刷刷地跑，最后房子归移动。

我知道，各位站长/公司，很想分享这些媒体资源，但是，能不能稍微考虑一下普通用户呢？

前言

从拨号上网年代过来的朋友都知道，这些年来，网络速度是提升得非常快。至少从字面上来说，早期是56K拨号和64K的ISDN，后来有了512K的ADSL，再后来就提速2M，4M，8M（这里开始多为光纤/小区宽带/Cable Modem），20M，50M，100M，一直到现在的300M，1000M，大家都是有目共睹的。

网速的提升，意味着加载资源的耗时变短了，网页上的内容也可以更加丰富了，总体而言给用户的感受也是好很多的。毕竟对一般人来说，与其去看干巴巴的纯文本网页，更多人估计会喜欢去看图文并茂的色彩生动的网页。

问题是，目前越来越多的网页，没有考虑到弱网环境下用户的需求。

随手找了个访问过的站点，为保护隐私，部分内容已打码

不合理的用图

为什么上面那个网站会有这么大体积的图片？

一般人可能会认为，哦，这个可能是展示好看二次元图片的网站，比如类似Pixiv那种，所以图多。——并非如此，这只是一个个人博客站。虽然我明白站长想要装点得漂亮一些，放一些自己喜欢的图片，但毕竟这不是一个专门用于展示图片的博客。

也有人可能会认认为，这可能是某些大图展示，比如背景图片什么的。——也并非如此，这些图片大多数被用于首页上文章卡片的头图，实际展示面积不会超过500x300，但是，以其中一张图片为例，标签的地址指向的却是高清图，分辨率足足有3456x1944，体积为10.3MB！

很显然，这就是一个不合理用图的例子：图片中多出来的部分并不会被展示到页面上，但是却实打实地占用了带宽和加载时间（如果你用的是付费CDN，或者付费对象存储，现在可以开始担心你的钱包了）。

抛开技术因素不谈，如果想要往文章卡片上面放图片，或者往其他地方放图片都好，不妨思考一下，用户真的那么在意这张图有多么高清吗？就好像我们看新闻，虽然主持人仪表要整齐，但是我们主要关注的还是新闻内容，而不是今天主持人抹的口红色号是不是变了，头发上是不是多了一根呆毛，之类的无关紧要的事情。这里稍微自卖自夸一下，根域名mfwt.top是作为信息页使用的，PC端打开可以看到一张全屏背景大图，实际占用体积只有63KB，但是如果笔者不特意指出的话，你觉得，访客会觉得这张『低清图』作为背景有问题吗？

难受的访客

早期低网速年代。如果你发帖要带上大量图片，都得在标题里写一个『多图杀猫』，预告这个网页要加载半天。现在网络条件当然比以前好多了，不至于几十个KB/s的加载速度。但是，虽然网速变快，某些网页体积膨胀更快，再加上并不是什么时候都有满速加载的条件，最后导致的结果就是实际加载速度反而变慢了不少。

比如说，还是上面的例子，整个页面实际传输26.5MB，我们凑个整，25MB。理想情况下，如果你使用的是千兆宽带，按125MB/s计算，那么25MB的网页理论上在0.2秒内就可以加载完毕——一般来说，这就是你在内网搭建网站或者传输文件的实际感受。

但是，这只是理想计算结果，我们现在开始引入日常生活中常见的干扰项。

首先，用户宽带可能没那么快，我们按照300M来计算，就是37.5MB/s，中间引入传输开销（比如TCP协议的握手，慢启动，等等等等）之后，实际传输速度一般来说有35MB/s左右，此时加载时间是0.7秒。别忘了，网站服务器在公网上，所以还要引入丢包重传，TCP LFN等因素，实际传输速度按照经验值可以继续打个八五折，那么加载时间就是0.84秒。

看着好像还好？我们继续加码.....懒得慢慢叠buff了，直接一步到位：用户是在挤地铁的时候打开了你的网站——这应该不算是什么Corner Case——实际传输速度可能只有50个Mbps，也就是6.25MB/s。此时用户想要完整打开你的网页，耗时就会达到4秒。如果用户用的是便宜流量卡（就，那种随身WiFi），速度只有15Mbps，那么打开时间就增长到了13秒。再钻一下牛角尖，如果用户用的是达量限速3Mbps的流量卡（早期流量卡的存量用户），打开时间就直接五倍，65秒——此时可能浏览器已经因为超时而放弃加载了。

就算不是流量卡，后面的问题也足够你喝一壶的，比如TCP在高RTT环境下（也就是著名的TCP LFN，长肥网络）速度起来慢的问题，海外图床/CDN加载慢的问题，跨境跨省拥塞的问题，用户后台应用占用带宽的问题，浏览器默认并发加载连接数的问题，甚至可能对于刚开始建站而没有特意置办图床的朋友来说，国内云服务器带宽不足的问题。

上面种种因素加起来，最终导致的就是用户体验不佳。比如说图片加载慢，往好了说，如果图片在可视区域外，还可以慢慢加载，视觉上影响不大，但如果在可视区域内，用户看到的就是慢慢滚动加载的图片，可能还没等滚完，用户就划过去了；往坏了说，设置不当的标签可能会导致图片加载过程阻塞浏览器执行某些代码，导致用户看到一片白屏。

某些网站会设置加载动画，打开页面后先转一会儿动画，等到实际加载完了（或者说，单纯就是时间到了）才撤除动画，显示内容。但是这依然是换汤不换药的做法，浏览器需要加载的内容不会少，该占用的还得占用。

合理的做法

所以，拜托了，各位站长，请考虑一下以下做法：

• 图片适当裁剪，压缩，不要直接放原图
• 选择合适图片格式（比如，风景照等不是棱角分明的使用jpg，截图等颜色变化分明的使用png，或者选择webp等新格式）
• 图标类图案考虑改用字符或者SVG
• 减少外部字体引入
• 适当减少图片使用量

写在最后

节省容量，保护钱包，你好我好大家好。

（完）