在上篇文章中我们明白了:要对网站上图片进行优化首先要做的是选择对的图片格式,以及正确的图像压缩方式的压缩比率是多么的出人意料。很多时候我们手中的图片恰好就是我们需要的格式,此时是否就可以直接在CMS(网站后台)中进行上传编辑与发布了呢?
答案是否定的。在CMS上传进行编辑前,我们依旧需要先使用图像软件来对图片进行压缩处理。
这是因为CMS上的“压缩”仅仅是一种图像尺寸上的调整,比如我们手中有一张1600*1200的图像,而我们需要的大小仅仅是800*600。在CMS上进行调整的图片,在网页中显示的大小的确是800*600,然而当将原图下载并放大回1600*1200时,我们会发现该图片并没有缺失而造成的模糊现象。
即使部分的CMS有压缩图像的功能,比如wordpress,其压缩比率也是预先设置好的:这意味着即使该CMS在压缩图像上做得非常完美,其最终大小也很可能会比我们线下预先处理好的图像要大一些。
经过统计,图像在网页大小中的平均占比可达40%-60%,甚至更高。而上传前采用预先处理的图像通常可以期望能减小30%-50%,甚至更多,非常可观。通过节省这一部分资源,我们可以让网站速度更快。
为何图像软件的压缩效果会如此显著?
通常我们在专业的图像软件中进行的压缩,在压缩过程中必然会导致原图像的一些信息缺失。尤其是jpg这种“有损”压缩,在压缩的过程中造成的像素的缺失,通常我们用肉眼是难以察觉的。然而将压缩图像放大后,我们就会发现一些块状模糊的现象,这就是在压缩过程中损失的图像信息。图像软件的压缩采用去除图像信息(或者像素块或者色彩)的方式来减小图片大小,而CMS通常仅仅是大小的调整。
然而,随着访问网页的设备多样化与响应式设计,通常我们没有足够的人力与时间资源来为每个设备都准备好最合适的图片。
这个问题很现实,采用压缩后的图像,手机端用适合手机分辨率的图片,平板电脑用平板适合的图片确实可以让每个设备的速度体验显著上升,但是保守估计我们也要一个图片准备两个版本来进行分别适配,这个工作量是非常大的。
在这种情况下,我们必须先找到需要的最大尺寸与分辨率,通常这个最大尺寸对应的是pc端用户。比如我们手上有一张2400px的图像,而根据页面排版以及用户需求等方面考量,得到的最大所需像素为500,那么我们就用图像软件将其压缩为500px,再进行上传与编辑发布。此时该图像在所有的设备适应起点都是500px,比2400px要好太多。
从图像入手来加速网站,是最便捷最方便的手段,我们无需与技术人员进行代码上的沟通协商,只需要在上传与编辑之前,先在PS等软件中将其过一遍,压缩一次,就可以起到非常显著的效果。