图片优化二三事

前情：总是会遇到需要加载大图片的情况，如何解决呢，我这里有几个策略：压缩图片，图片格式替换，雪碧图，缩略图的使用，图片懒加载，更换图片加载顺序。

一、压缩图片或者更改图片尺寸

最直接的方法之一，不是因为大才加载不是慢嘛，那好压缩它！

图片压缩 - 在线免费图片压缩软件-迅捷压缩在线

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，即图片在视口内，否则图片在可视区域外

// <img src="临时批发小图片.jpg" data-url="目标大图片.jpg">

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）

<!-- 添加 lazy-load :lazy-load-margin="0"  图片懒加载只针对 page 与 scroll-view 下的 image 有效 -->
<image class="left-img" :src="dentalHref" alt="dental" lazy-load :lazy-load-margin="0"></image>

c.组件自带懒加载

不少相关组件自带图片懒加载

举个栗子：

<!-- 这里@load函数就是组件自带的懒加载 但是要记得，图片没加载出来把人家位置留着 -->
 <img :src="item.preview" alt="" id="code_img" crossorigin="anonymous" @load="loadImg(index)" style = "height: calc((50% - 24px) * 2.158);"
                            webp="true" />

d.除此还有一些图片懒加载的插件，就不讲了

参考其他：

【前端】图片懒加载的原理和三种实现方式_前端懒加载及其实现方式_hxxfight的博客-CSDN博客

六、调整页面图片加载顺序

情况：页面加载完了，但是 局部图片没加载完，造成不好的视觉

调整后：当页面图片资源都加载了，再让加载进度条消失

虽然不能够减少加载时间，至少提高用户体验了