网页图片优化

前言

众所周知，在网页中最让人头疼的无疑就是图片的优化问题，有些小伙伴就会说，图片优化直接懒加载，CDN，压缩大小不就好了么，是的，没错，所以我们今天不讲这个，我们今天来讲点好玩的：

一、webp图片格式

其实在浏览器中，图片优化一直都是重中之中，所以呢？

所以浏览器推出了webp的图片格式，意在解决浏览器中图片大小的问题，同比普通的png，jpg图片小70%左右，压缩后的webp更是可以让1M的图片缩小到100k以内，

需要注意的是，作为浏览器的新新内容，自然逃不了兼容性的问题，当然除了某某浏览器，目前现代的浏览器几乎都有支持

想要了解更多的小伙伴也可以去官网了解WebP - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

二、jpg图片格式

ui设计师们可能或多或少可能都会了解这个jpg格式有什么神奇的地方，可我们是做网页的，所以叉出去！

言归正传，这个jpg又有什么神奇的地方呢

许多小伙伴可能会在打开网站的时候会看到图片有模糊变高清的效果，神奇吧，其实这就是jpg格式，通俗来说就是jpg其实有两个图片，一个小图（模糊），一个大图（高清），浏览器会先加载显示小图，然后在大图加载完后把大图替换上去。

重点来了！重点来了！重点来了！

有兼容性

小伙伴：不玩了，走了！

留步，给个机会，作为一个资深码农，这种小问题当然是难不住我们，我们可以按照他的思路手扣出来代码出来

<div
	class="cooperation-item"
	style="background-image: url('/public/images/scene2_min.png');"
>
</div>
//先用小图

let imgUrl = $('.cooperation-item').css('backgroundimage')
imgUrl = imgUrl.replace('url(','').replace(')','').replace(/\"/g, "").replace('_min', '');
//获取图片的url

const img = new Image();
img.src = imgUrl;

img.onload = function () {
    if (img.width && img.height) {
		$(item).css('background-image', `url(${imgUrl})`);//大图加载完成后替换上去
	}
}