详解网站中图片日常使用以及优化手法(2)

在实际开发中,最常用到的值是cover,如果容器已经有了宽高(当然这里的宽高是指可以随着机型变化的),比如全屏,我们就直接用cover了;而如果容器没有宽高,那就又回到了第二个问题(图片的宽高比),我们可以使用图片或者把设置背景图的这个容器设置成我们图片的宽高比,那样再使用cover或contain都可以。

四. 优化方法:

1. 减少请求

将图片变成base64内联图片, 合并成雪碧图,

以上2种方法在目前一些流行的自动化构建工具都会自动帮忙生成,使用非常方便

适用对象: 不经常改变的icon小图标

2. 减少大小

压缩图片,使用webp格式图片

3.提高清晰度

由于目前的手机高清度越来越高,日常开发中使用2倍图,3倍图的方法

常见优化方法:

1.图片懒加载

优点:通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。

懒加载有多种场景,但原理都是一样的。以下举例滚动懒加载。

原理:将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

github源码: https://github.com/beidan/lazeLoadImg

2.图片预加载

基于用户行为的预加载就是,虽然在用户看不到的时候加载了,但是,用户却有更大或者说很大的概率会看到此图。

后续再对这个进行详细的说明~ 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjyyx.html