如何通过图像处理,提升页面加载速度!
2022/08/22 09:54 魔司收录网 已浏览187次页面加载速度对于SEO排名与用户体验都非常重要,但有很多站长经常忽略一个问题,就是通过对图像处理,以及有效的选择,来提升页面加载速度。
简单的理解图像处理就是通过选择图片的类型以及修改图片的大小,甚至对图片有效的压缩,来优化图像,将图片对网页加载速度的影响降到最低。
为什么图像处理,对页面加载速度这么重要?
在我们多年的SEO优化实战中,我们发现大部分网站加载速度慢,并非是多么高深的技术问题,而很多时候是因为图片质量过高,导致页面体积过大,我们经常会遇到某个页面超过10M的大小,这对于搜索引擎是难以想象的,特别是电商网站,如果不能有效对图片进行压缩,修改图片大小,那么一定会影响用户体验。
那么,我们该如何通过图像处理,来提升页面加载速度呢?
不要通过CMS自身系统来调整图片大小
一些常见的CMS系统对图片的处理通常只是调整图片大小,有的也是瞬时的进行压缩,这个压缩比率在之前就已经设定好了,但即便图片被压缩了,仍然会比在被上传之前的正确压缩高出25%左右的大小,同时它也会占用一部分服务器资源。
如果一个页面有多张图片,那么就会产生一定的影响,为此,我尽量在上传图片之前就进行有效的处理优化。
那么,在上传图片之前,我们需要进行哪些改动呢?
1、调整图像大小
调整图像大小非常重要,如果您的图片宽度为800像素,而且您只需要在网站上显示484像素宽的图片,那么即使在您的CMS中调整大小,也会要求它压缩800像素图片中的所有信息,这会让图像变的更大。
这里建议大家在为上传之前,改变图片的物理大小到484像素,尽管CMS还会进行调整,但我们要保证初始图片就很小。
2、选择图像类型
首先你必须调整图像大小,压缩,然后上传。但是,在上传问题之前,不仅要调整大小和压缩,还要简单地选择正确的文件类型就成了问题。现在很多在网站上处理图片的人往往没有图像的经验,所以他们会在使用PNG的时候使用JPG,反之亦然。
常见的文件类型:JPG,GIF,PNG和WebP,我们重点说下jpg,gif,webp这三种形式,毕竟除了特殊站点,很少用到gif。
-
JPG
JPG使用所谓的“有损”压缩,这意味着一些数据在文件被压缩时永久丢失。眼睛通常不容易察觉到丢失的数据,所以你得到一个较小的文件,降低最小。
当然,这取决于保存的JPG的质量。质量越低,丢失的数据就越多。如果保存的质量太低,则图像可能会出现“阴影”,如果你想避免这个问题,保存图像时不要低于50%的质量。
-
png
使用所谓的“无损”压缩。无损意味着当文件被保存时,数据不会丢失。图像被重新采样,编译数据时可能使用“最近邻居”(相似的颜色),但数据不会从文件中删除。
有两种类型的PNG:一种是24位,一种是8位。当您尝试减小文件大小时,您需要8位PNG设置。您也可能想要更进一步,并从您的PNG文件中删除颜色。
-
WebP
WebP的优势体来源于它的图像压缩算法,它能够在保证肉眼看不出来的情况下,把图片体积减少到最小并且支持有损与无损的模式,相比JPG与PNG更加优秀与稳定。
但值得说明的是,只有部分浏览器能够得到很好的支持。
总结:通过对图像的处理,进一步的有效压缩,在上传网站之前,可以大大减少图片体积,这对提升网页加载速度很有帮助。