好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

PNG 格式图片

1. PNG 格式 图片

PNG  图片 属于 无损压缩格式 ,也就是说它会比 JPG  图片 更大,而且相比于 JPG,它最大的优势在于可以保存图像的 透明通道 。

换句话说就是 图片 可以拥有透明、半透明背景。

这就极大的方便了广大开发者,我们把同样一张图用分别用 JPG 和 PNG 两种格式放在桌面上给大家展示一下两者 间的 区别:

image.png

左边是桌面图标,可以看到图标是透明的。

而 PNG 虽然也透明,但是却能看出来有个方形的边框,这个是系统为我们 自动添加 的,目的是为了便于区分是图标还是 图片 ,实际上这个 图片 是没有边框阴影的。

而最右边的 JPG 就很一目了然了,它将所有原本透明的地方全部填上了白色。

2. JPG 和 PNG 的应用场景

看起来 PNG 好像更加优秀,但实际上在日常生活中却是 JPG 运用的更加广泛。

比如照片,就算用再牛的相机也不可能拍出透明的颜色。

当然你可能会说我拍个冰块或者拍个玻璃,那不就是透明的颜色了吗?

其实不然,玻璃后面的东西也是有颜色的吧,而且它还会存在着一定的反射与折射,因为如果 一个 玻璃或者冰块完全透明的话,你是不可能看得见这个冰块玻璃的,正是因为它反射了一些光才得以让人看到它,既然反射了光那么就会有颜色,有颜色就没有必要保存透明通道了,多保存 一个 透明值会导致 图片 的体积大不少呢。

而 PNG 的应用场景则一般是图标等,比如手机 APP,无论你换了什么样的 主题 什么样的背景,它的图标依然是带形状的,大家可能会以为 图片 本来就是 APP 的形状,其实在计算机中 图片 只有矩形这一种形状,不可能会有什么圆形的 图片 或者三角形的 图片 , 用户 之所以看到三角形或圆形的 图片 的原因就是把三角形以外的部分都透明了,所以看起来像是 图片 就是这个形状的。

3. 小结

PNG 和 JPG 通常都有着各自的场景,但 图片 不仅仅只有这两种格式,计算机 图片 的格式非常多,下一小节我们将简单介绍一下可缩放图形格式 SVG。

查看更多关于PNG 格式图片的详细内容...

  阅读:96次

上一篇

下一篇

第1节:什么是Css Sprite?    第2节:Css Sprite和雪碧之间有什么关系?    第3节:为什么要使用Css Sprite?    第4节:Css Sprite过时了吗?    第5节:JPG 格式图片    第6节:PNG 格式图片    第7节:SVG 格式图片    第8节:Css Sprite:矩形图    第9节:Css Sprite:条形图    第10节:背景图片    第11节:背景图定位    第12节:动态变更背景图位置    第13节:Css Sprite尺寸不吻合时怎么办?    第14节:过渡动画和帧动画的区别    第15节:适合过渡动画的场景    第16节:适合用帧动画的场景    第17节:帧动画和过渡动画的优缺点    第18节:CSS 动画的定义    第19节:CSS 动画的调用    第20节:帧动画函数steps()的解析    第21节:动画实例项目结构    第22节:定义动画    第23节:调用动画    第24节:连接两个Css Sprite的动画