图片优化

前端页面除了css、js优化外，图片也是很重要的一环，尤其电商类的这种大量使用图片的网站。

一、图片格式

jpg、png

常见的jpg和png格式的图片，jpg相比较png体积小，png的优点是支持透明，而且png是一种无损压缩的高保真的图片格式，缺点就是体积大。所以jpg适用于来展示大图，banner图之类的；而png适合线条、颜色对比度强烈的小图，比如logo图。

webp

相对而言是一种比较新的图片格式，综合了几种图片格式的优点，支持透明，也可以像gif一样显示动态图，体积也没有png那么大。缺点是浏览器整体兼容性还不够好。
可以使用HTMLCanvasElement.toDataURL()来判断浏览器是否支持webp

function isSupportWebp(){
    // 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
    return document.createElement('canvas').toDataURL('image/webp').includes('image/webp')
}

svg

svg指可伸缩矢量图形，以XML这种标签的形式存在，是可编程的。优点是体积小，可以无限放大不会失真；缺点是渲染成本高。
比如我们平时用的iconfont矢量库，使用这种方式解决平时项目中的小图标可太方便了。

二、相关优化

base64

图片和css、js一样作为静态资源，都是通过资源路径使用http请求获取的，而图片使用base64编码就不用发送请求了，从而减少服务器负担。但是呢，base64编码后的图片会比源文件大，同时编码内容存在于html中，也会使后者的体积变大。所以base64应用场景也是图片比较小的时候。比如平时webpack项目中的使用的url-loader会配置，图片在一定大小内才会使用base64编码。

图片加载过渡

function loadFn(url){
    let loadingEl,imgEl
    return function loadImg(url){
        if(!loadingEl) {
            loadingEl = document.createElement('div')
            document.body.appendChild(loadingEl)
        }
        loadingEl.style.display = ''
        loadingEl.innerText = '图片加载中'
        if(!imgEl){
            imgEl = document.createElement('img')
            document.body.appendChild(imgEl)
        }
        imgEl.style.display = 'none'
        imgEl.src = url
        imgEl.onload = function(){
            loadingEl.style.display = 'none'
            imgEl.style.display = ''
        }
        imgEl.onerror = function(){
            loadingEl.innerText = '加载失败'
        }
    }
}
const loadImg = loadFn()
loadImg('图片url')

通过图片加载的回调函数，简单的演示过渡效果基本思路。

图片预览

Blob对象表示一个不可变、原始数据的类文件对象。文件File对象也属于Blob类型。Blob对象通过使用URL.createObjectURL()创建对象的URL，图片就可以使用这个URL实现预览。注意因为URL是储存在内存中的，为了更好的性能当不再需要这些URL对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放。当然页面关闭刷新也会释放。

<div>
    <input type="file" id="file">
    <button id="clear">清空</button>
</button>
<!-- 预览 -->
<img id="img">
<script>
    const clearBtn = document.querySelector('#clear')
    const fileInp = document.querySelector('#file')
    const img = document.querySelector('#img')
    let blobUrl
    fileInp.onchange = function(){
        const file = this.files[0]
        blobUrl = window.URL.createObjectURL(file)
        img.src = blobUrl
    }
    clearBtn.onclick = function(){
        fileInp.value = null
        img.src = ''
        blobUrl && window.URL.revokeObjectURL(blobUrl)
    }
</script>

以上是对图片使用过程的一些总结，还有一个就是常说的图片懒加载，这个涉及防抖节流，网上介绍的也很多，这是以前学习写的图片懒加载demo，一不小心水了一篇。。。