图片大小计算
一张100100的图片，4个通道，每个通道1字节，图片大小就是10010041/1024 = 39kb
所以压缩图片的方式

  1. 减少像素点
  2. 减少每个像素点能够显示的颜色

图片加载优化
1.减少请求次数

  • 很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
  • 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
  • 小图使用 base64 格式
  • 将多个图标文件整合到一张图片中（雪碧图）

2.选择正确的图片格式：

  • 对于能够显示 WebP格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
  • 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG代替
  • 照片使用 JPEG

什么是base64图片
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。
写入base64的文件会变大。加密后图片体积会变大。

图片懒加载

  • 懒加载就是将不关键的资源延后加载。

  • 懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

  • 懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
    引用于https://www.cnblogs.com/peerless1029/p/10771695.html
    图片说明 

    <script>
// window绑定滚动事件
window.addEventListener('scroll',function(){
  // 遍历所有的img标签
  Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{
    let img=li.getElementsByTagName('img')[0];
    // 判断当前img是否出现在了视野中
    // 判断当前img是否被加载过了
    if(checkShow(img) && !isLoaded(img)){
      loadImg(img);
    }
  })
});

// 判断img是否出现浏览器视野中
function checkShow(img) {
  let scrollTop=document.documentElement.scrollTop; // 页面向上滚动的高度
  let windowHeight=window.innerHeight; //浏览器自身高度
  let offsetTop=img.offsetTop; //目标标签相对于document的高度
  return (offsetTop > scrollTop && offsetTop <(windowHeight + scrollTop));
}

// 判断是否已经加载过
function isLoaded(img) {
  return img.getAttribute('src')===img.getAttribute('data-src');
}

// 加载图片
function loadImg(img) {
 img.setAttribute('src',img.getAttribute('data-src'));
}
</script>