对企业网站来说,精美的图片就是对产品很好的诠释,所以很多管理者都倾向于将更大、更清晰的图片上传到网站上,虽然有些人知道增加服务器的容量来使图片能够放得下,但是却没有考虑到用户在浏览时的图片加载速度其实是特别慢的,那网站图片加载慢怎么优化,才能既保证加载速度、又保证清晰度呢?
一、调整图片像素
调整图片像素属于简单但很容易忽略的方式,举个例子,正常要上传的图片宽度为1000像素,而只需要在网站上显示500像素宽度,即使在后台中调整大小,也会要求压缩整张图片里的所有信息,这会让图片变得更大。在上传之前就修改为要显示的图片大小,有些后台还会进行调整,但保证初始图片较小是可以轻易做到的。
二、更改图片格式
我们常见的图片类型有:jpg、png、gif和webp,除了部分特殊站点会用到gif,其他的站点基本不会使用。由于网站主要还是以浏览效果为重,所以不能一味的选择体积小的图片处理后上传,那么对图片格式进行更改就可以有效的保证图片质量,并减小图片的大小。
1、jpg是常用的图片文件格式,可以有极高的压缩率,但这种压缩是有损失的,图片里重或不重要的资料会被修饰,因此容易造成图像数据损伤,要保持一定的浏览效果,图片压缩是不建议低于50%质量的。
2、png形式的图片属于无损压缩,有着较高的压缩比但不会损失图片的数据,它利用特殊的编码方法标记重复出现的数据,对图片的颜色没有影响,重复保存也不会降低图片质量。PNG有24位和8位两种,要减小图片大小时,需要设置成8位PNG图片。
3、webp同时支持有损和无损两种压缩方式,相比jpg和png更加的优异和稳定。在相同质量下webp图片要比jpg图片的体积小40%,但webp格式未能像jpg那样得到各种软硬件的广泛支持,兼容性不是太好,所以应该谨慎使用。
三、使用图片懒加载技术
图片懒加载的原理就是在用户还没有看到这张图片时,先不急着加载出来,集中加载显示在当前视口中的,等到视口快滚动到该图片位置时再加载,这样就能大大提高网页的打开速度。像淘宝、天猫、京东等电商网站都是以这种方式加载图片的。
懒加载的插件很多,比较常见的:lazyload.js,它依赖于jQuery,执行时还需要初始化。大家可以寻找一种性能比它更好且更轻量的:lazysizes.js,这种插件是原生js写的,故无需依赖任何其他插件库,也不需要额外初始化,直接用类名标记要懒加载为图片就行了。
关于网站图片加载慢怎么优化,以上小编为大家整理的方法基本可以搞定大部分的企业网站图片加载问题,但需要注意的是,在更改图片格式时应根据网站的实际需要来进行。其实想要提高网站图片加载速度,在合适的页面同时使用懒加载技术可以更有效果,而且还有利于提高用户体验。