13.尚硅谷_HTML&CSS基础_图片的格式.avi原创

路径说完了，这是我们说的一个相对路径的一个问题，然后接下来我们再补充一个，就是我们一个图片的一个格式的问题，图片的一个格式问题，图片的一个格式，我们会发现刚才我用的图片，两张图片是不是都是这个GIF呀，哎，都是GIF，但是实际上我们在平时上网的时候，我们发现其实图片。它不全是GIF啊，诶它不全是F，我们看到图片有很多种，那我们常见的图片格式呢什么呢？诶我们可能用什么呀，GP，诶GPD啊或者叫GPD都行啊还有什么呢？还有一个叫什么呀？诶GF我就大写了，还有叫什么呀，叫做PNG啊PNG，那GPG就是什么呀？就是GPG，这个是一个简写啊，这个简写这俩是一个东西啊，一个东西，GPG就是我们这个GPD啊，这俩是一个东西，那现在我们来说，我们有这三种图片格式，我们在开发的时候，我们到底。他用哪种啊，用哪种啊，哎，我们来说一下这三种格式的一个特点，哎，我们来说一下什么呢？诶GP可能说什么呢？哎，它支持哎图片支持的这个颜色干嘛呢？比较比较多啊，支持的颜色比较多，图片干嘛呢？图片可以什么呀，可以。

可以压缩，也就是说它相对来说会比较干嘛呀，小一些啊小一些，但是它有什么特点呢？但是它不支持我们这个什么呀，透明啊，不支持透明，也就说你图片我们说了有的有的图片是那种什么呀，这一小人可能外边这种背景是什么呀，透明背景啊，透明背景，那这种图片就不能用什么了，就不能用这个gpeg啊，那jpeg用来干嘛的呢？我们说支持颜色比较多，又可以压缩，但是不支持透明，我们一般什么呢？一般使用我们这个gpeg来干嘛呢？来保存照片。啊，照片，所以你看网络上传的照片格式只有八九，都是什么呀，Gpeg它既可以保证我们照片的颜色丰厚，又可以保证我们这个大小。

诶最小啊到小最小还可还，而且什么呀，照片有没有透明的呀，没有透明的，所以他也不用支持透明的，所以一般什么呀，GBG都是保存一些照片等什么呢，等颜色。哎，丰富的什么呀？图片啊，照片等颜色丰富的图片，这是我们说这第一句，然后来看我们的这个GIFGIF就是什么意思呢？GIF我们来说GIF的特点，GIF支持的颜色什么呀？少啊，GIF支持的颜色少，它指什么呢？只支持我们这个，简单的什么呀？透明啊，简单的透明可以什么呢？可以并且支持什么呀，支持我们这个。动态图啊，支持我们这个动态图，什么叫动态图啊，就刚才我们那图片它是在动啊，哎，这种动态图毫无疑问，你必须得干嘛呀，必须得用这个GIF去显示，但是GIF有一个特点，它干嘛呀，它支持的颜色比较比较少，所以你看到网上看那些动态图干嘛呀。

特别不清楚啊，特别不清楚为什么，就是因为GIF支持什么呀，支持的颜色少啊，然后呢，它只支持简单透明，什么叫简单透明，我这一大方块儿，大方块儿周围是透明的，用GIF没问题，但是如果你是一个什么呀，是一个圆形，圆形周围是透明的。GIF干嘛了就不行了，哎，它只支持什么呀，直线的透明啊直线的，要不然就竖着的，要不然那什么呀，横着的它支持一旦这个太复杂了，像这种形状了干嘛了，它就不灵了啊，它就不灵了，那所以我们什么时候用GF，图片颜色单一哎或者什么呢？或者是我们这个动态图时可以什么呀，可以使用我们这个GF啊，图片颜色单一或者是动态的时可以使用什么呀？GF啊GF然后再来说我们的叫做一个PND，那PND什么特点呢？我们来说一下。

PNG支持的这个颜色干嘛呀，多啊，PNG支持的这个颜色多，并且什么呢？并且支持我们这个复杂的什么呀，哎，复杂透明，那它呢，除了不知动态图，剩下来讲它是一个什么呀，一个比较全能的一个图片啊叭较全能的一个图片，那我们说它可以用来干嘛呢？可以用来诶显示什么呀，显示颜色复杂的什么呀，哎，这种透明的图片，诶透明图片都可以用什么呢？都可以用我们这个。PNG啊，都会用PNG实际开发中的PNG会用的什么呀？比较多一点啊，PNG会用的比较多一点，那现在我们来说一下，那这三种格式说了半天，那到底用哪种呢？诶我们来说一下叫什么呢？图片的使用原则，就两句话，图片的使用原则，什么原则呢？叫什么呀，效果不一致，假如说我三我图片三种格式都有，如果什么呢？如果效果不一致。

使用什么使用效果好的。啊，效果不一致使用效果好的，效果什么呢？一致使用小的啊，效果不一致使用效果好的，效果不一致使用什么呀？诶效果一致使用这个小的，不一致使用好的，一致使用小的，诶有点绕嘴了是吧？好，这是我们的一个原则，来举个例子啊，反正你拿我们这个图片来说，这里边呢，我这里边有这么几个图片，D01NOTE，我们这个MG里边我们来看一下啊，我们先看什么呢？这个gpt也是那个gpt，那这里边呢，我们现在有三个图片，诶你看三个图片都是一个什么呀，都是一个人像对吧？诶都是一个人像，诶但是格式不同，一个是GIF，一个是jpeg，还有一个是什么呀，PNG，诶我们来看这图片，我们来看看效果啊，先看我们这个PNG，这效果呢。

还可以是吧，哎，还可以，我翻译一下来看这是什么呀。这是看格式在这了啊，是不是GPG啊，这效果没啥区别是吧，没差，然后再往前看看GGF。是不是也没什么区别呀，我们发现这三个图片，这三种格式，无论是GIF还是GPG，还是这个PND效果，实际上没有什么肉眼能直接识别的这个差别了，显示效果都不错，那这三个图眼我用哪个呀？我是不是看大小啊？哎，看大小我们来看看PNG格式的。122KB啊，我们来看GPG格式的19KB，这明显是不是已经胜出了呀，哎，然后再看我们这个GIF一看。58.9，那我们说效果一致用谁小的是不是就用我们这个gpt啊，而且我们说这个是不是本身就是一个照片啊，我们说了一边一般情况下照片全都用什么呀，Gpeg啊，全都用jpeg，好这也是我们说的这个格式，然后再看下一个，我们叫做一个这个这个GIF的，诶这三个什么呀，三个这个。

熊猫美熊猫，诶我们说这个图呢，可以算什么了，是不是颜色比较单一啊，就两种颜色，一个是什么呀，白的一个是什么呀？黑的啊就两种颜色，你先看效果，现在第一个是一个PNG，然后往上翻，这是一个什么呀？GPG再往上翻。这是什么呀？GIF这一看。是不是又没差呀，哎，没什么区别，就这玩意儿两种色，一般也差不了啥是吧？哎，差不了啥，那我们来看那选谁呀，是不是还是找小的呀，PNG。36GPG 28GF。12，那肯定用谁了，是不是GF了，诶所以注意像这种颜色单一的图片，十有八九我们都得用什么呀，GF啊，而且它也干嘛呀，它没有透明，这个不是一个透明，如果是透明我们就不能用什么了，不能用GIF了啊，不能用GIF了，好，那接下来我们再看还有一组图片，我们这个PNG这组，诶这组图片就效果就很明显了，来我们看PNDPND呢，它这是一个水水花这么一个图片是吧？哎，它这块注意啊，这里边都是什么呀，都是透明的，包括这个水花一个交界也都是什么呀，也都是透明的，我们会发现PNG的效果是不是比较好啊，还比较好，我们来看往上翻一个翻译谁呢？我们的这个GPT1翻。

这就不用看了，它有没有透明效果呀，没有是不是给我设置一个白色背景啊，哎，为什么呀，因为JPG它不支持什么呀透明啊，再往上看GIF走你。诶，这玩意儿是透明是吧，但是你发现什么了，它这交界处是不是都有这种啊白边啊，哎白边这是为什么？就是因为我们这个GIF它不支持这种复杂的透明啊，复杂透明好，那这三种格式看完了，那这东西就不用看大小了，用谁呀？是不PND啊哎只有它效果是不是最好啊，但是注意这时候我们还是要看一眼大小，为什么呀，如果它效果好，但是他们这个大小差在干嘛呀，太悬殊了，这种图片也干嘛呀，也不能用啊，也不能用，我们来看一眼大小，来这个图片我们来看是一个什么呀，73，诶还可以看我们这个gpt，哎呦90是吧，再看我们这个GF。

156，那其实就没就没有什么可说的了，PND是不是既是效果好的又是大小什么呀。是不是最小的呀，诶，所以这三个图片里肯定有谁了，我们的这个PD了啊PD了，好，那这里边我们举了这么几个例子，真正的选择我们还要在这个现实的开发中呢，再去慢慢的去体会，慢慢的体会，好那这个是我们说的一个图片的一个格式，简单的去介绍一下。