课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
随着互联网的不断发展,用户对于网页加载速度的要求也在不断的提高,而今天我们就一起来了解一下,网页性能优化中关于图片的优化都有哪些方法。
一、在线图片优化
如果你的项目是一个简单的静态网站,只有少量不经常变动(甚至从来不会变动)的图片,那么你可以直接使用在线工具。这些工具使用各种算法压缩图像,效果很不错,对简单项目而言完全够用。
二、图片加载优化
1、懒加载
懒加载也叫按需加载,意思是仅加载当前视图(用户屏幕显示范围)内的图片,不加载其他图片(直到它们出现在当前视图内时才加载)。
只有较新版本的浏览器才支持原生的懒加载特性,不过有许多基于JavaScript的方案。
2、渐进式图片
尽管懒加载在性能方面表现出色,但是用户滚动屏幕后需要盯着空白区域等待图片加载,这样的用户体验不太好。网速慢的情况下,下载图片会非常慢。所以我们还需要渐进式图片。
渐进式图片的意思是在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高,尺寸很小,加载很快。在两者之间我们也可以根据需要显示不同画质的版本。
3、响应式图片
我们还需要留意使用尺寸合适的图片。
4、使用CDN
Cloudinary、Cloudflare之类的CDN服务可以在服务器上优化图片,将优化后的图片传送给用户。如果你的站点使用CDN,可以看下静态资源优化选项。这样我们就不用操心图片优化,由CDN在服务端完成优化。我们只需要操心懒加载、渐进式图片等前端的加载方案。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!