尚硅谷前端基础 (24)

好，那关于图片呢，我们在这儿再补充一个问题啊，补充一些东西，补充一些东西呢，就是我们这个图片的一个格式，诶图片的一个格式，诶嗯，那我们都知道，其实我们见过的图片格式有很多种，比如说刚才我们引入这个松鼠是一个GIF这个图片，我们刚才引入这钢铁侠是一个gpeg这个图片，那这些图片每一个跟每一个格式之间有什么区别呢？诶我们来说一下我们这个常见的格式啊，首先呢，可能我们见过gpeg啊，Gpeg或者简写呢，就是一个jpeg啊，Gpeg跟JPG是一样的啊，一样的还有什么呢？还有叫GIF啊，GIF还有什么呢？还有叫PNG啊，PNG还有什么呢？还有叫做一个web p这个格式，我们这一共有常见的啊，在我们网络中常见的格式有四种，那这个我们说一下gpeg它什么特点呢？它支持的这个颜色比较什么呢？比较丰富啊，比较丰富颜色多。

啊颜色多哎，然后什么呢？然后不支持什么呢？不支持透明效果，诶它不支什么呢？不支持我们这个动图啊，这个是我们的一个jpeg，我们说所有的都是从这三个角度，我们这个GIF支持的颜色比较比较少啊，比较少支持什么呢？支持简单透明啊，也是支持动图啊，支持动图，然后呢，PNG是什么呢？诶支持的这个颜色丰富啊丰富支持什么呢？复杂透明啊，支持复杂透明动图的话，PNG应该也是不支持这个动图的动图，或者它可能也可以设置动图，但是它的动图往往都很大啊，一般我们PNG很少出现动图啊，至少我应该是我印象里应该是没有没见过啊，没见过，那这里边我们来说一下这个图片格式是吧，他们有这么一些特点，咱们一个个来。

他说你像gpeg支持的颜色比较丰富，不支持透明效果，不支持动图，透明效果什么意思，我这图片可能是有这么一个东西，诶里边可能什么呢？我这里边可能有这么几个，哎，几个这个五角星啊，五角星，五角星呢是有颜色的，但是五角星外边是什么呀？是透明的对吧？那这个就叫一个透明效果，就是它这个后边那个背景会从那透过来，像这个白色就透过来了，对吧？透明效果，那gpt是不支持透明的啊，不支持透明的动图，也不支持像这个玩意儿，我们是不是用GF，哎，Gpeg也是不支持的啊，也是不支持的，那这个时候呢，我们直接说一下，那jpeg比较适合什么呀，你想想不透明。不会动，颜色丰富什么呀？哎，那GBG它主要一般，哎用来什么呀？哎，用来表示我们这个照片的啊，用来表示照片的，用来显示照片的，而且JPG你可以压缩对吧，你太清楚太大了，压缩一点变小了啊它一般用来显示照片啊，显示照片下边一个我们来说这个GIFGIF呢，它支持的颜色比较少，支持简单透明，支持动图啊支持动图，所以GIF适合做什么呢？哎，它就适合表示什么呢？我们这个颜色单一的图片，颜色比较少的啊，颜色比较少的，然后还有就什么呢？还有就是动图这些比较适合GIF啊，比较适合GIF，然后呢，诶PNG呢，PNG它就是什么呀？哎，颜色丰富，哎颜色丰富还有什么呢？还有我们这个叫做哎，复杂透明的图片啊，复杂透明的图片，换一句话说，这PNG。

这它就是专为专为我们这个网页而生的啊，网页而生的，所以其实这三种格式啊，我们先说上边这三种格式，这三种格式里边PNG我们在网页中用的是最多的啊，用的是最多的，但是具体情况你还得具体考量到底用哪个图片，那我们选择图片的话，我们有一个原则，我简单总结了一个原则叫什么呢？诶叫做效果不一样，哎，效果不一样哎效果这么写吧，效果一样用什么呢？用小的，哎你说我这两张图片效果显示的是一模一样的，用谁，哎哪个小就用哪个，因为小的意味着会有比较快的加载速度，它可以让我们的用户以一个比较快的速度看到这个网页啊，看到网页，所以效果一样用小的效果不一样，诶用什么呢？用这个效果好。

好的啊，你这用好的用用效果好的，效果不一样，这玩意儿显示的特别漂亮，那玩意儿显示特别难看，当然用这个显示的漂亮，但是也有前提，你这不能太大，你是说你这特别好看，结果这图片三个D，那你也不可能用它对吧，也是就是在这个效果和大小之间，你要取一个什么呀，取个平衡啊取个平衡我们举个例子。

MG首先看第一个GIF的这个分类，这里边呢，我们一共有三张图片啊，一共有三种图片，三张图片都显示的是这个熊猫，我们先看效果啊，点一下这是PG的啊，这是PNG的，看这PNG的往左翻一个，这是JPG，往左翻这是GIF对吧？GIF把这个松鼠我给它收起来啊，往跟上窜，哎，我直接干嘛呢？哎，我翻我快翻快翻，来看一下这三种格式效果有没有什么区别，哎，基本上没有区别，效果都是一样的对吧？效果都是一样的，那这个时候用谁？诶，那就找到我们原则了，效果一样用小的，谁小啊，你猜猜是谁？哎，你看颜色比较单一，Logo这种东西还没有透明效果，那这玩意儿就是GF啊，就是GF了，所以看PNG是36。GPG是28.4 GIF是12.6，它是不是最小啊，哎，所以这种颜色单一的，像logo这种东西，哎，十有八九都是GF啊，十有八九都是GF，然后再看我们的这个这个还是三个图片，我们来快速翻一下，嗯，其实三个图片看上去，我看上去会有一些细微的差别，大概就是脸上那个那个那个雀斑或者那个细节稍微有点，但是其实你看上去的话，呃，直观上看的话，其实是基本上是没差别的，我们看一下啊，仔细看一下。

我感觉好像。这个格式的好像更清一些对吧，好像更清楚一些，但是可能仁者见仁了是吧，你可以自己看一下，待会然后这个格式是一个JPG，所以如果它是效果最好的，那就适合用它了，对吧？但是这个时候其实我们也要看一下大小啊，看一下大小，PNG是122 GPG是19，哎呀，这是不是差太多了，哎，这个是一个58，那GBD是不是也是最小的呀，正好它效果最好也最小，而且它就是一个什么呀，图片照片嘛，照片那就最适合JPG了啊，所以照片十有八九就直接拿JPG就完事了，然后这一组。

这一组呢，是我们的这个。一个水，这个呢比较的复杂，这个图片因为它后边有透明效果啊，这些都是透明的，我们来看一下，这是PNG的，换到GPG，你看GPG后边这个透明就没了，变成一个白色，那像这种情况GPG就没法用了，除非你那个背景也是白的，看不出来，那一般情况下这就不能用了，因为它没有透明效果了，再看这个玩意儿，诶这个是GIFGIF你来看啊，这个时候你看，因为这是一种复杂透明，因为是水嘛，水那个线条是很很混乱的，所以这个透明比较复杂，所以你像我们这个GIF里，你看这个细节是不是就出现白边了，哎，所以像这种复杂透明GIF是不支持的，GIF支持的什么透明啊，哎，我这一搭直角这是透明，这是透明，这儿透明它可以支持，你只要稍微有一点乱，它就不支持，所以这玩意也没法用了，所以这三个图片里效果最好的就是PNB，它不是效果好不好了，只有他能用，这俩是不是都不能用了，哎，这俩都不能用，所以这个时候肯定毫无疑问。

就选择PNG了，但是此时此刻你还要看一下它的一个大小啊，如果太大依然不能用，这是一个七是3.6，这是一个90.2，这是一个156，那那就好了，它效果好，而且还是最小的，所以要用的话，肯定是它最适合对吧，肯定是它最适合，所以这个时候一定注意啊，我们选图片就是在效果和这个文件大小之间，我们要取一个平衡啊，取一个平衡好，这是我们这三种格式，JPG，哎，GIF，还有PG，然后下边还有一种我们叫做一个webp这种格式，这种格式什么呢？这种格式是我们这个谷歌诶新推出的，专门用来网用，用来这个，呃，这个表示我们这个网页中的这个图片的这个一种格式啊，是谷歌新推出的专门用来表示网页中图片的一种格式，说是新推出的也好好多年了是吧，也好多年了，这么一种格式，这种格式呢，诶。

它什么呢？它具备了，它具备了其他图片格式的什么呢？格式的所有优点，所有优点，所有优点哎，颜色丰富，还支持复杂透明，还支什么呢，动图，而且还什么呢？而且文件还特别的小啊，我们谷歌的压缩算法比较先进，同样一张图片外BP的话，它就是比别的图片要小诶，所以它基本上是一个完美的图片啊，完美的图片基本上上边这三个都可以被它替换掉啊，就可能效果又好，然后图片本身还特别小，所以我们来看一下web p web p呢，我也放了几个图片啊，放一个我们来看一下安点web p这个效果跟我们刚才那个，我们来看一下跟这个GPGPD的效果，基本上你看它是。

是一样的对吧？是一样的，但是大小上我们来看n.GBG呢是一个19，这个YBP呢，YP是一个12.7，是不是小了这个呃，六点多KB对吧，六点多KB它比较小，效果还是一样的，这个水的这个透明效果啊，在谷歌里边它就透明效果，用这个黑色显示这个效果是没问题的，对吧，是没问题的，大小呢，71KB好像好像是接近对吧，接近这是73还小对吧，也比它小，效果是一样的，还比它小，然后呢，再看这个这个玩意儿熊猫，这个熊猫这个效果就没得说了，然后大小才6KB，而我们这个GIF呢，是一个12.6KB，是不是也比它小啊，哎，所以基本上它是可以把那个三个全都干掉了，兼具他们所有的优点，而且还不具备那些缺点对吧，这个外部P效果非常非常好啊，效果非常非常好，并且它还支持什么呀，支持动图，你看这是GIF的一个动图，一个魔方对吧，然后我们来再点开这是一。

这个P的效果是效果是一样的，它这也是白色背景，只是这是白的看不见啊，效果是一样的，而且大小的，你看这个GIF是869就挺大的了，外P呢，371是不是小了一半还多，哎，一半还多，同样这香蕉也是一样，你看这是可以动的，这个YP呢也是可以动，它也可以表示这些动图啊，它是可以表示动图的，你知道一下就行了啊，YP兼具了我们这些所有图片的一个优点，并且大小你看这个是84，这个才四点多KB，对吧，那小了太多了啊，这优势太明显啊，优势太明显了啊，所以Y个B基本上是一个完美的图片格式啊，图片格式。

但是为什么放到最后说，因为如果它要是一个绝对完美的格式，上面这仨我们都不用说了，那你就全用IP呗，对吧，但是为什么要放到最后说，它有一个致命的缺点，它的缺点就是什么呢？就是兼容性，兼容性不好，哎，像一些IE啊，像一些老的浏览器，它都不支持，所以如果你的项目你需要兼些老的浏览器，你用外个P，它会出问题啊，出问题这我不演示了，就当是一个作业，待会儿你们自己去试一下，把你电脑里的这个IE啊，这些浏览器，你试试引入一个webp的图片，你看看它能不能正常的出现啊，能不能正常出现，这是一个注意点啊，这是兼容性不太好，所以一般的话，呃，移动端我们可以用国歌浏览器里面可以用，火狐里边也可以用，但是一些老的浏览器如果你需要兼容的话就会出问题，所以一般情况下轻易不用它，或者用它的时候我们会采取一些特殊的适配手段，也确保所有浏览器都能用，但是这就后话了，可以用到GS了啊。

这是我们几种图片格式，但是总之原则就是效果一样用小的，越小越不限小，效果不一样，用效果好的，但是同时要考虑文件的大小，不能太大，太大以后效果再好依然不能用啊，依然不能用好，这是我们说的这些图片，然后回过头来看我这文件夹，文件夹里面呢，我放了一个这个base斯64.tx这什么玩意儿啊，你们直接点开，就一个记事本，这是啥呀？你看这玩意乱糟糟糟是吧？哎，我一看这好像是个，这是个图片啊，这是图片，这里面画了一个一个女的，一个女的，那女的还长得挺漂亮，诶，我一看这是图片，诶，你看没看出来？哎，估计你应该没看出来，我告诉你这个实际上是一个图片，诶我跟你说老师你胡说八道，这怎么是图片，这不就是字符吗？哎，看着啊，你表演一个ctrl a ctrl c，我先全选，然后再复制。

然后呢，在这儿我创建一个新的MG标签，我直接把这堆码啊，我给它粘过来，粘过来看这看到了吗？这图片是不是就出来了，哎，注意我没有写路径啊，我也没把图片粘过来，我直接把这粘过来，这图片就在这儿显示了啊，就显示了，那这个就是一个图片啊住了就没了，打开就有了，就这么一个效果，所以注意这个东意没啥好说的，它就是一个图片，那这图片是怎么回事啊，哎，怎么回事儿啊，那这种图片呢，我们叫做一个这个贝斯64的格式图。Base斯64它并不是一种图片格式，我们可以什么呢？我们可以将我们图片使用我们这个BASE64进行什么呢？进行这个编码，贝斯64你可能不太熟悉，但是你可能见过那个迅雷吧，迅雷那个叫磁力链接啊，磁力链接什么什么写了一个什么迅雷那个标志，那个磁链接特别乱，但是你放到迅雷里边呢，它就可以直接弹出一个下载链接来，实际上那个链接就是腾，就是这个迅雷对这个链接进行编码了，让你没有办法直接查看，只有他自己能看，那这个编码就是一个什么呢？就是一个贝斯64，贝斯64使说白了就是一个对数据进行加密的啊，对数据进行加密的，我们可以什么呢？哎，我们可以将图片诶使用64，使用这个贝斯64来什么呢？来编码，这样我们可以什么呢？诶这样诶我们可以直接将我们这个图片转换，为什么呢。

转换为这个字符，然后什么呢？然后通过字符的这个形式，诶来什么呢？来引入图片啊，来引入图片，所以这个时候它就没有什么格式了，你可以把JPG啊，可以把JF，可以把PG啊，可以把这些文件，包括wep是吧，都转换成贝斯六四，然后通过这种文字的形式来来引入啊来引入但是这个东西啊，用的场景不是特别多，什么时候用的，一般都是一些什么呀，一般都是一些需要诶和我们这个网页一起加载的图片，加载的图片才会什么呢？才会使用这个贝斯64啊贝斯64，所以它的使用场景比较特殊，什么时候用你这图片需要和网页一起加载，什么意思，你看啊。

我们在访问一个网站的时候，你注意了，实际上我们去加载网页，这网页它是不是一下子全都加载出来的？哎，你说我是不是网页呀，连图片，连音频视频一下子同步全都出来，注意不是这样，网页在加载的时候，它实际上分成了好几部分，首先第一部分网页本身是不是有代码啊，哎，所以浏览器我们会发送第一次请求，先向服务器请求什么呢？请求我们当前网页的一个代码，但是在我当前网页里，是不是我把这些代码加载完了就行了，哎，不是，因为网页里面我们涉及到还要引入一些外部资源，比如说这儿我就入了两个图片这些外部资源，我的浏览器还需要再单独向服务器发请求再去加载，你就说第一次加载的是我网页，加载完网页服务器浏览器一看，哎哟，这网页里还有俩图片呢，于是干嘛呢，它需要再发送两次请求加载这个图片啊，加载这个图片，也就是说像。

啊，如果只有这两个图片的话，我的浏览器要发三次请求，第一次请求加载网页本身，第二次请求加载这个图片，第三次请求加载这个图片，要发送三次请求，所以有的时候你会发现这图片显示起来稍微的会有一点延迟，它可能需要网页出来以后，图片稍微要缓一会儿才能加载，就是因为浏览器在向服务器发请求，它之前有一个时间差，或者网速会比较慢一点，那这个时候就有一些比较重要的图片，你希望它是同步显示的啊，你不希望说什么呢？哎，它有一个时间差，那这个时候你就可以直接设置成这个BASE64，那这个时候像这个图片就是网页什么时候加载它就什么时候加载，就不会出现那种时间差了，你看这个图片加载速度就很慢，因为它是一个通过网络加载的，而我以贝斯64形式引入了。

就是网页出来它就出来了，它加载速度就很快了，所以什么时候用贝贝斯64，就是你希望图片加载速度快的时候就用它啊，就用它，但是呃，它是一把双刃剑，就是你图片加载速度快了，肯定有的东西就慢了，因为它的速度是固定的嘛，对吧，它快了肯定别人就慢了，所以这个时候一般都是，除非要求特别高，什么背景啊，或者什么特殊的东西，你需要用它，一般的使用场景不多啊，没那么多啊，没那么多，但是你要知道这也是一种我们使用图片的一个方式。但是你可能就有问题了，哎呀老师啊，你这玩意儿是怎么写出来的呀，是你用手写一个个打的吗？想想也不可能对吧，那我怎么把一个图片转换成这个贝斯64呢？怎么转呢？哎，直接上网转百度搜一下啊，搜一下谷歌也行啊，一样贝斯64，直接搜贝斯六十四一堆网站啊，贝斯64的什么加密解密，随便点一个，诶这个还这可能还不是，这还不是。

得找什么呀？图片在线转换看到了吗？图片在线转换它这个网站的作用就是可以把一个图片转换成贝斯64，比如说我这转一个啊，找一图片找一个找一个谁呢？Img，下边我们找一个这这这这谁呀，这熊猫吧，选个GIF，然后你看它就直接给你转成这编码了，大小是一样的啊，大小不会变，也不会大，也不会小，然后直接ctrl a ctrl c粘过来写一个MG，然后把这个代码一粘保存一下，这熊猫是不是就出来了啊，所以这我们不用手动转，直接上这转就行了，还能还原，还能把这图片还原啊，所以它就是一个把图片转换成文字这么一个方式，它可以加快一下那个呃访问速度啊，访问速度好，那这个就是我们说的这个图片的一些知识点比较琐碎，但是你需要也不用刻意去记吧。

你知道这么一个东西，尤其像贝斯64这种啊，用的时候你自然就知道了，现在场景一说可能也体会不太明显，这些东西就是用的时候自然就明白了。所以往往的时候我们。一定要练习，一定要实践啊，一定要也包括什么实战呀，包括我们自己要写一些网页，写一些东西，你随着写的东西多了，很多东西你自然而然就理解了，所以现在我们属于讲基础知识，基础识就是这样，很无聊，很烦，很讨厌，我讲着也比较痛苦，你可能听着也比较痛苦，所以这个时候没什么好说的，学习总要熬过这一段，能学习很多时候并不是一件特别的轻松愉快的事儿，所以肯定会有痛苦的时候，可能现在就是比较痛苦的，所以如果你想学的话，坚持一下，这些知识该记的去记一下，能体会能理解的尽量理解一下，体会一下啊，后边我们还是继续往下讲，我们这儿呢，先停一下。