图片优化二三事
前情：总是会遇到需要加载大图片的情况，如何解决呢，我这里有几个策略：压缩图片，图片格式替换，雪碧图，缩略图的使用，图片懒加载，更换图片加载顺序。
一、压缩图片或者更改图片尺寸
最直接的方法之一，不是因为大才加载不是慢嘛，那好压缩它！
图片压缩 - 在线免费图片压缩软件-迅捷压缩在线
Q：缩小图片尺寸或者压缩图片不会不清晰吗？
A：画质肯定会受影响的，但是手机上图片，有些情况真没必要放很大的高清大图，也没必要放太高倍率的图片。
二、图片格式替换
这里不得不提出几种图片格式了：
- png jpg gif 图片格式区别
- png：无损压缩，尺寸比jpg、jpeg体积大，适合做小图标
- jpg：压缩算法，会有一点失真，但是比png体积小
- gif: 一般做动图
- webp：同时支持有损或者无损压缩。相同质量的图片，体积更小，但是兼容性不好
所以总结 jpg图片大小要比png小
另外，还有一种图片 jpeg，他有一种渐进式jpeg技术，就是从模糊逐渐清洗的过程
从改善用户体验上来看，这样可能更容易被接受
Baseline JPEG和Progressive JPEG的区别
Baseline JPEG：
这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果
Progressive JPEG：
和Baseline一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。
具体可以参考网址：
渐进式jpeg（Progressive JPEGs )解析 - 简书
三、雪碧图（CSS sprites）
将小图片整合到一张大的图片上，再根据大图上位置，定位获得
优点：获得图片请求一次，避免多张图请求多次，减少对服务器请求次数
难点：更改某一张图片的时候需要替换整张；图片定位不方便
适用：固定大小icon
background:url(...) 0 -10px no-repeat;css background属性:url()里是背景图片路径；两个数值参数，第一个参数表示距左多少px，第二个参数表示距上多少，no-repeat表示背景图片向哪个方向重复，此时为不重复。 定位图片位置的参数是以图片的左上角为原点。
四、缩略图的使用
我指的不是自己安装插件生成的那种缩略图，而是提前准备好小号，体积比较小的图片，用于图片墙展示啥的。
显示小的图片，然后点击查看详情，再加载清晰大图，提高页面多张图片加载速度。
五、图片懒加载
PS：浏览器窗口尺寸
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;scrollHeight属性: 滚动的总高度，指的是包含滚动内容的元素大小（元素内容的总高度）。
window.scrollBy(x,y)：x轴，y轴的一次滚动的距离。
a. js，监听滚动距离（ 查看可视窗口内是否存在该元素）
-
scrollTop：指网页元素被滚动条卷去的部分。
-
offsetTop：元素相对父元素的位置
-
innerHeight：当前浏览器窗口的大小。需要注意兼容性问题。
scrollTop+innerHeight > offsetTop，即图片在视口内，否则图片在可视区域外
// 
var pageHeight = document.body.clientHeight;
var scrollTop = document.body.scrollTop;
var imgArr = document.getElementsByTagName('img');
Array.from(imgArr).forEach((item) =>{
let eleTop = item.offsetTop;
// scrollTop+innerHeight > offsetTop
if( scrollTop+pageHeight > eleTop){
// 加载图片
item.setAttribute('src', item.getAttribute('data-url'))
}
})
b. 微信小程序端使用懒加载（uni-app）
c.组件自带懒加载
不少相关组件自带图片懒加载
举个栗子：
![]()
d.除此还有一些图片懒加载的插件，就不讲了
参考其他：
【前端】图片懒加载的原理和三种实现方式_前端懒加载及其实现方式_hxxfight的博客-CSDN博客
六、调整页面图片加载顺序
情况：页面加载完了，但是 局部图片没加载完，造成不好的视觉
调整后：当页面图片资源都加载了，再让加载进度条消失
虽然不能够减少加载时间，至少提高用户体验了