image 多图片页面的优化方式

1，使用懒加载，未出现在页面的图片等到出现在页面再进行加载出来
// html

// data-src 自定义属性

// js
var images = document.querySelectorAll(‘img’);
// images.forEach((image)=>{
// let imgtop = image.getBoundingClientRect().top();
// if(imgtop<window.innerHeight){
// let dataSrc = image.getAttribute(‘data-src’);
// image.setAttribute(‘src’,dataSrc);
// }
// })
let callback =(entries)=>{
entries.forEach(entry=>{
if(entry.isIntersection){
const image = entries.target;
let dataSrc = image.getAttribute(‘data-src’);
image.setAttribute(‘src’,dataSrc);
observer.unobserve();
}

  })
}
// IntersectionObserver 浏览器构造函数
let observer = new IntersectionObserver(callback);
images.forEach(image=>{
  observer.observe(image)  
})

2，使用工具将图片进行无损压缩
地址：https://www.yasuotu.com/

3，小图片转base64，减少网络请求，大图片不要转base64，因为包会变大，小图片影响不大

4.webpack 打包压缩
地址：https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root