平衡图片负载，提升web站点访问体验

Posted 2020-10-14 sophel

　　最近给分公司做官方网站，内网测试一切ok,发布至云端后，体验惊人——公司外网网速渣渣（十几k~几十k），更加要命的是，网站的高清图，根本就加载不出来,几秒，十几秒过去了，仍然在转圈圈，如下图。。。

　　于是打开开发者模式，查看了一下图片质量，不看不知道，一看吓一跳：首页4张轮播图，每个都是1M~2M，4张图将近7、8M，再考虑下十几k的渣网速，浏览器也是累的哭出了声。。。

再参考了集团官网的图片，表意良好的全屏轮播图，处理的只有20k~40k左右，这简直是几十倍的的降级处理！怪不得，在渣渣网速下，集团官网4~5秒内也能加载出来了。

　　最终和美工商议，参考集团官网的图片处理方式，对所有高清大图做了降级处理，由高清处理为‘标清’，大小从原来的1.7M左右压缩至40~50k左右。。。

　　在网站开发中，以往至考虑了整体设计风格，响应式处理方法等，很少考虑到图片大小对系统的影响，当然，你可以说这是因为网速渣，关我啥事。但，我要说的是，你必须得考虑多种情况下的用户访问体验，毕竟，大多数公司的外网都慢的像蜗牛，这种情况下，你的几M大小的图片，无异于一个庞然大物，占据了相当大的带宽，依然让用户等的心烦气躁，用户可不管他什么网速哦，因为很多一般网站都还能打开，就你的打不开。。。

　　我们谈体验，谈设计，但不能忘了环境，尤其是网络环境的影响，在为了尽量提升在恶劣网络环境下访问站点的用户体验，应该对大的示意图做清晰度降级处理，因为就普通用户肉眼所见而言，能看清图片示意就行，M级和K级我并不在意，我只希望尽快看到就行！

　　因此，均衡图片负载和用户体验，也是今后产品设计中一个不容忽略的方面，应在设计筹备阶段，就与美工同事达成一致。

　　优良设计，让生活更轻松~