前言
在日常的web开发中，图片的引用是必不可少的。其中小部分的图片存在本地开发文件夹，大部分的图片都会存在云服务器上，这个时候就会面临一个问题：如果图片体积过大，超过5mb以上的图片怎么更好的呈现在页面中？
常见图片格式
图片压缩分类
首先来了解一下web应用中常用的静态图片格式，常用类型为jpg、png、webp等，再理解一下图片压缩的类型，一般分为以下三种：
- 无压缩图片。简单来讲就是不做压缩处理，准确呈现原图片。
- 无损压缩。压缩算法对图片所有像素点数据进行编码压缩，保证图片质量同时降低图片尺寸。
- 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而且允许压缩过程中损失一定的数据，所以虽然会影响图片的像素质量但也大幅度降低了图片的尺寸和体积。
jpg
jpg是最常用的图片文件格式，属于有损压缩的一种类型，它支持极高的压缩率和更好的呈现全彩色的图像，但带来的缺点就是压缩时会使图片质量受到损失，因此不适宜用改革是显示高清晰度的图像。
png
png的全称是便捷式网络图型，是目前最流行的网络传输和真实的图形格式，它属于无损压缩的一种类型，而且它体积小，支持透明效果(jpg格式不支持)。
png图片主要分为三种类型，分别是PNG 8 / PNG 24 / PNG 32。
PNG 8：8指的是8bits，相当于用2的8次方的大小来存储颜色种类，所以PNG 8能存储256种颜色的图片。PNG 24：24指的是3×8，就是分别用三个8bits去表示R(红)、G(绿)、B(蓝)等三原色，可以表达256256256=16777216种颜色的图片。PNG 32：32指的是在PNG 24中加上8bits的透明颜色投到，表示R(红)、G(绿)、B(蓝)、A(透明)，在PNG 24的基础上支持了256种透明的颜色。
webp
webp是一种新的图片格式，有geogle开发。与jpg、png相比，相同的视觉体验下，webp图形尺寸缩小了很多，它同时还支持有损压缩、无损压缩、透明和动画等，不过目前它的兼容性表现不太好，如apple设备浏览器不支持此格式，需要在使用时判断是否存在宽高判断从而图片是否被正确呈现来做兼容性处理。
技术实现
图片懒加载
图片懒加载在一些图片较多的网站运用比较多，通过图片懒加载可以让目前不可视的图片暂时不作加载，避免一次性加载过多图片造成请求堵塞，这样可以提高网站加载速度，提高用户体验。
它的实现方式就是判断图片什么时候进入了可视区域，接着对图片做加载操作，代码实现如下：
<body>
<img data-src="./images/1.jpg" alt="">
<img data-src="./images/2.jpg" alt="">
<img data-src="./images/3.jpg" alt="">
</body>
<script>
var imgs = document.querySelectorAll('img');
//用来判断bound.top<=clientHeight的函数，返回一个bool值
function isIn(el) {
var bound = el.getBoundingClientRect();
var clientHeight = window.innerHeight;
return bound.top <= clientHeight;
}
//检查图片是否在可视区内，如果不在，则加载
function check() {
Array.from(imgs).forEach(function(el){
if(isIn(el)){
loadImg(el);
}
})
}
function loadImg(el) {
if(!el.src){
var source = el.dataset.src;
el.src = source;
}
}
//onscroll()在滚动条滚动的时候触发
window.onload = window.onscroll = function () {
check();
}
</script>
Guetzli 图片压缩
guetzli是geogle开源的一款图形算法工具，针对数码图像和网页图形的JPEG编码器，能够产生更小的图片文件并且减少图形的数据损失量，在最小化损失和最小化图像尺寸中达到平衡。
可以通过homebrew或者npm进行全局安装并使用，由于是通过算法进行压缩图片的，会比较消耗服务器的gpu资源，如果是大型web开发可以考虑用国内的tx云进行压缩图片。
对象存储OSS
大多数图片压缩以后在大于图片原尺寸的呈现区域会出现失真的效果，所以在这里可以使用国内云厂商提供的对象存储服务，它可以用来处理图片对于不同格式大小进行较好的显示，使用图片时只需要带上参数就可以简单的处理图片的呈现。
