阅读 52

图片优化

前端页面除了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,一不小心水了一篇。。。