网页图片加载优化方法总结


1.压缩图片

图片压缩是通过压缩减少图片的占用空间,如果您有大量的数码照,或是上传图片的网站有文件大小的限制,您就可以通过此软件来压缩图片大小,压缩图片文件大小,以达到减少大量图片占用磁盘空间,上传照片等效果

2.图片懒加载

图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。
意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

实现方式:

1.第一种是纯粹的延迟加载,使用 setTimeOut 或 setInterval 进行加载延迟.

2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。

3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离前开始加载,这样能保证用户拉下时正好能看到图片。

3.使用 CDN 加速

CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

4.使用 base64 编码代替图片

原理:将图片转换为 base64 编码字符串 inline 到页面或 css 中
场景:适用于图片大小小于 2KB,页面上引用图片总数不多的情况

优势:减少 http 的请求次数,并可以放到后台数据库中,只传输字符串,有较多的构建工具可以直接实现
劣势:这种方法仅限于图片总数较少,而且图片大小小于 2KB 的情况。否则图片字符串会变得很长很长

注意,本文参考的原文链接:https://blog.csdn.net/ywy502/article/details/90756219


文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
  目录