澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

apng图片优点和缺点整理,PNG的使用技巧

2019-09-16 作者:澳门新萄京赌场网址   |   浏览(147)

前端图片选择问题

2015/09/27 · HTML5 · 图片

原文出处: observernote   

  GIF/PNG/JPG/WEBP/APNG都是属于位图(位图 ,务必区别于矢量图);

Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案(*^__^*) 嘻嘻……

今天我们来学习一篇Photoshop技巧教程:学习如何制作清晰透明的PNG图片,Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案。

Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案。

图片问题的一些总结

前言: 之前个人对于图片的问题,一直还是显得不是很重视。但其实对于互联网来说,可能图片的内容已经占据了整个互联网的大半部分,因此我们很大一部分流量的消耗,都是用在了图片上面,因此,对于图片有一些认识肯定是现在所必须的。所以趁今天这个不太忙的机会,打算对于图片的问题做一个简单地总结,也算是对之前没掌握到的东西的一个学习与备忘过程。

  GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及:

目录:

PNG的格式和透明度

目录:

常见的图片格式

图片格式 压缩方式 动画 适应浏览器
JPG 有损 不支持 所有
PNG 无损 不支持 所有
GIF 无损 支持 所有
APNG 无损 支持 firefox、safari
WebP 有损/无损 支持 chrome、opera

APNG,作为想取代gif的新格式,他比我们常用的gif更为优秀。从其名称中可以看出,APNG其实可以说是会动png,因为png支持24位的颜色,而gif最多仅支持8位的颜色,因此,APNG的显示效果比gif更为清晰。可惜APNG并没有加入png标准,因此我们日常生产中很难将其纳入使用。

WebP,是由谷歌推出的图片格式,想让其作为web中专用的图片格式。与jpg作对比,WebP有对透明的支持,以及完全不亚于JPG的压缩率。而与PNG对比,WebP更小,加载更快。不过可惜的是,其兼容性也是不太友好。

上面两种格式,因为使用不太多,因此仅仅提及一下。下面将对我们常用的JPG,PNG,以及GIF来做讨论。

 

Png的格式和透明度

这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8、png24、png32。

§Png的格式和透明度

JPG

由于jpg的压缩方式为有损,而我们之前有提及到,图片所消耗的流量已经占据了互联网的半壁江山,因此,jpg自然就成为了web开发中的宠儿。对于图片中,没有透明效果的,以及图片更为颜色丰富的图片,我们多可以采用压缩60%-80%的jpg图像。这样可以保证使得图片更小,网页加载更快。不过需要注意的是jpg的每一次压缩,对图片都是有损的。因此,对于一些有线条,或者文字的图片,jpg压缩之后,看起来并不理想,因此,在这种情况下,应该尽量避免对jpg的使用

   GIF(Graphics Interchange Format)

图片 1

  GIF图形交换格式是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。

优点

  1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
  2. 可插入多帧,从而实现动画效果。
  3. 可设置透明色以产生对象浮现于背景之上的效果。

缺点

  由于采用了8位压缩,最多只能处理256种颜色(2的8次方),故不宜应用于真彩图像。

 

[Png 不透明]格式

图片 2

§『Png不透明格式』

GIF

GIF仅有256种颜色,并且对透明对支持仅仅局限于全透明或者不透明,因此,gif若作为非动图来说,只能用于颜色不太复杂的图片。不过一般来说,我们用gif都是由于其对动画的友好支持,在APNG兼容性十分不友好的情况下,如果仅仅想引入一个动图的话,gif是目前很好的选择。

  PNG(Portable Network Graphics)

  便携式网络图片(Portable Network Graphics),简称PNG,是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的,PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道(32-24===8),因此可展现256级透明程度。

apng图片优点和缺点整理,PNG的使用技巧。  PNG这种类型的图片就是为了取代GIF图片而生的, 除了GIF不支持动画的优势, 能用PNG的地方就用PNG, 原因是压缩比高,色彩好;

图片 3

优点

  * 支持256色调色板技术以产生小体积文件
  * 最高支持48位真彩色图像以及16位灰度图像。
  * 支持Alpha通道的半透明特性。
  * 支持图像亮度的gamma校正信息。
  * 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
  * 使用无损压缩。
  * 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
  * 使用CRC循环冗余编码防止文件出错。
  * 最新的PNG标准允许在一个文件内存储多幅图像。

缺点

  但也有一些软件不能使用适合的预测,而造成过分臃肿的PNG文件。

让IE6透明的小技巧:

  如上图所示, IE6支持全透明,不支持半透明, 所以我们在PS到处透明图片的时候可以把图片设置为png8,在PS的生成图片是记得把png透明的选项勾选上,测试代码:

图片 4图片 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <style>
        body{
            background:#eee;
        }
        p{
            position:absolute;
        }
        p.p1{
            left:200px;
            top:140px;
        }
        p.p2{
            left:500px;
            top:140px;
        }
        img{
            position:relative;
        }
    </style>
    <p class="p1">
        text
    </p>
    <p class="p2">
        text
    </p>
    <img src="https://images0.cnblogs.com/blog2015/497865/201505/022343328802481.png" />
</body>
</html>

View Code

效果图:

图片 6

 

  • Png24实际为不透明图片

其中,在优化面板选择png8,可发现png8包括不透明、索引色透明、alpha透明3种格式。

§Png24实际为不透明图片

PNG

  • 格式

    格式 位数 透明支持
    png8 8 不支持
    png8 索引透明 8 仅支持完全透明
    png8 alpha透明 8 支持
    png24 24 不支持
    png32 32 支持

    png的格式可以分为以上几种,而我们常用的便是png8与png32了(即是我们常在ps中导出的png24)

  • 透明

  • png32

我们在ps中导出的png24勾上透明选项后,即是这里所说的png32了,而png32实际上是指的png24位的深度,以及8位的alpha透明通道。因为png32颜色的丰富性(2^24种颜色),以及对各种透明的友好支持。png32是我们许多人最常用的格式之一。其导出方法也很简单,只用在ps中选择导出为web所用格式,选中png24 透明即可。然而png32在ie6上并不能表现为透明

  • png24

其实png24本身是不透明的,因为其并没有那8位的alpha通道。在fireworks中我们可以很好地看到这一特点图片 7

图中下面为png32,上面为png24

  • png8png8由于仅有2^8种颜色,因此体积较小,同时,他还对透明有比较友好的支持,因此,png8也是很多人喜欢使用的图片格式。
    • png8 alpha透明png8的alpha透明,由于不能够使用ps来进行导出,因此我们需要使用fireworks来导出。这次,我选择了一张黑色的透明背景来对透明的支持做一次比对

图片 8

图中下为png32,上为png8 alpha透明

可以看出,png8对于半透明,有不错的支持性。同时,因为其比较小的体积。在现代浏览器上,对于颜色不太复杂的小按钮之类的的东西,以及对于图片的要求并没有那么高的移动端端来说png alpha透明也是显得十分友好的。当然,对于颜色较为复杂,以及要求较为严格的pc端上需要采用的东西,我认为还是应该采用png32的好。不过alpha透明的png8在ie6上的表现并不如人意,在ie6上,其半透明处会以全透明来显示,并且毛边严重。之前也提及到了,png8的alpha透明对于半透明,只是有不错的支持性,其真正的表现事实上还是不如png32。在我测试过程中发现,png8采用alpha透明,依然会出现一些毛边图片 9

比对可以发现,上面png8 alpha透明的图片比起下面png32的图片还是多了一些锯齿。不过整体影响不算太大。

  • png8 索引透明

png8的索引透明终于可以用ps来进行导出了,导出方式也很简单。导出的时候直接选择ps的png8或者ps预设的png-8 128仿色。此时我们就可以导出索引透明的png8了。如下图图片 10

从上面的图可以看到,我们将导出图片,四周部分变为了白色(当然,你一打开看到的也可能是没有白边的)。这个时候,把图片右边那个杂边改为无,就可以去掉图片的白边。如下

图片 11

左边的png32的图与右边png8的图对比可以看出,右边的图明显有一些锯齿。原因是索引透明对于透明的支持并不完善,其仅仅支持全透明以及全不透明,而不支持半透明。当选择了杂边为无的时候,所有的半透明转换为了不透明,也就产生了锯齿。那如何解决这些锯齿呢?

刚刚将四周白色,变为无的杂边的选项,其实就是ps对于锯齿的一个解决方法。如果这张图的需求是在纯色的背景下的话,我们可以将杂边,改为该图在网页中所在的背景的颜色,以做到在视觉上的一种无锯齿的感觉。这种方案在ie6下也可以很好地实现,不过也有他的局限性——倘若背景颜色比较复杂,那么这种方案将会无效。

JPG(Joint Photographic Experts Group)

  JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩(lossy compression),意即在压缩过程中图像的品质会遭受到可见的破坏。

优点

  JPEG/JFIF是最普遍在万维网(World Wide Web)上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画(painting)上可以达到它最佳的效果。在这种情况下,它通常比完全无失真方法作得更好,仍然可以产生非常好看的影像(事实上它会比其他一般的方法像是GIF产生更高品质的影像,因为GIF对于线条绘画(drawing)和图示的图形是无失真,但针对全彩影像则需要极困难的量化)。

缺点

  它并不适合于线条绘图(drawing)和其他文字或图示(iconic)的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果;

   给个活生生的例子:一张照片在Instagram反复上传下载90次之后....(在博客园找了半小时,link), 在最后jpg图片完全变样了;

图片 12

 

WEBP图片格式:

  2010年谷歌推迟的图片格式,专门用来在web中使用, 压缩率只有jpg的2/3或者更低; 第一个版本的webp图片格式是有损的, 新版本中webp图片是无损的。

  相对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了;

图片 13

优点:

  体积小巧;

缺点 :

  兼容性不太好, 只有opera,和chrome支持;

  但是有个插件可以让所有浏览器都支持webp格式, 利用了flash把webp图片转换为浏览器可以识别的图片格式;
  WebP插件打包下载:
  WebP插件在线Demo:
  WebP插件源码下载:http://code.google.com/intl/zh-CN/speed/webp

 

额外的信息:

  前面如果有看清楚的有写png和gif是无损压缩,但是实际上通过作图工具导出的png或者gif图片明明很模糊的啊, 为什么呢?

    因为gif是8位的压缩,"8位"是指图片所能表现的颜色深度, 一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真, 相对于jpg图片来讲, gif有他所能表示色彩的极限, 如果原图中色彩太多了就悲剧了, 所以所谓的无损是相对于jpg格式会对图片进行压缩的一种说法);
    png的图片有8为有24为有32位, 当然实际上24位和32位的png图片颜色看起来更加鲜艳自然;

 

[Png 索引透明]格式

图片 14

§『Png索引透明』格式

图片的选择

那么就总体来说下图片格式的选择应用场景吧(虽然上面多少都有些提到了)

  • 关于jpg由于其可压缩的特点,对于背景颜色较为复杂(比如照片等图)并且没有透明的图片,建议采用jpg。这样在保证了图片肉眼几乎看不出很大区别的情况下,把图片压得更小,压缩更快。不过对于有线条及文字的内容,不推荐用jpg。
  • 关于gif如果需要动图的话,由于APNG对兼容性对不友好gif依然还是首选。
  • 关于png
    • png8 alpha可以加入日常的开发中。对于桌面端,在不用考虑ie6的情况下,alpha透明的png8可以用在一些图片颜色较为简单的地方。对于移动端,可以考虑直接采用alpha透明的png8,而不采用png32,因为移动端的网络相较pc端较差,因此,采用png8 alpha可以节省流量。
    • png32在桌面端中,还是可以作为主要的图片格式。因为桌面端相较于移动端,网速更友好,同时,显示器的浏览对于图片的精细程度要求更高,因此,一些比较复杂的按钮,logo还是应当采用png32来处理
    • png8 索引透明可以用来处理桌面端对于低版本浏览器的(ie6)的兼容问题,虽然采用背景杂边的方式只能解决部分锯齿问题,但总好过于无。ie6已然是很早之前的浏览器,本身对其的兼容就势必会牺牲一些东西。因此,个人感觉还是对于背景简单的,直接采用杂边的方式来解决,而对于背景较为复杂的,目前我也只能想到采用去掉杂边的方法去解决(其实也就是说锯齿直接不管了)。

 base64

  Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64编码可用于在HTTP环境下传递较长的标识信息, 直接把base64当成是字符串方式数据就好了

  利用Base64的不可读性,可以加密字符串,标准浏览器的window下有两个方法,分别是window.btoa和window.atob,(IE67下虽然不支持,但是可以用vbscript模拟,参考司徒正美大牛(简称司牛)的地址,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <script>
        var str = "nono::::";
        var result = "";
        console.log( result = window.btoa(str) );    //bm9ubzo6Ojo=
        console.warn( window.atob( result ) ); //nono::::
    </script>
</body>
</html>

 

图片 15

优点:

  1:减少了http请求;

  2:数据就是图片;

缺点:

  1:如果图片稍微有点大,这个字符串会很长很长;

  2:IE6,7 你懂得;

  如何获取图片对应的base64字符串呢?

    1:使用代码获取:

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
    htmlImage = '<img src="'  e.target.result  '" />';    // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);

 

    2:在webkit内核浏览器有个挺方便的技巧, 你打开发者工具, 选中图片, 那么右侧就会出现对应图片的base64 ,你把这个字符串复制一下,在字符串前面加上data:images/gif;base64,然后直接复制到浏览器的地址栏, 打开就会显示这副图片;

图片 16

  base64图片的DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <img src="data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM4RjcyMUE5NEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM4RjcyMUFBNEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzhGNzIxQTc0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzhGNzIxQTg0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiLz4gPC9yZGY6RGVzY3JpcHRpb24 IDwvcmRmOlJERj4gPC94OnhtcG1ldGE IDw/eHBhY2tldCBlbmQ9InIiPz5fTzGYAAADg0lEQVR42mJgAAIlRY3/TMryegp3VX8xAAQQg76BlQFIlOG9Fv9/TXmt/wABBOa4uwX8BwF9Q4v9DCC1n798 //r95//B9rN/wMEEFiFtpbxf1l5BQcwR0VRux kXEle9T Iz9htqP2/WEuQ4e2jZwy2L/kdGTZ3WYANvPXk7X8pcVkFgAACa5OXVxOwtA75DwOKQO2yCooKIDkWEDFf/P/7Jw92MjAcEGFguPmJof4fO4O4iOR9zwcMjAxqSob7KzLj/z81V/7/7dv3/79///7/7efv/5G2Wv/lZVT2M4JM H8n6P 1tR8Y7muXMvD/fc2gz17BcHk/F4N15x1GgABigAEbW8/16iq6/xUV1fbDxIDOgTDMzD3fHz245z8zM/N/EK0or/IfpoAJxHj78rEAAxJgROZUMTA47OAX P rm/3//zUs/392sP5fJCb2fzoPQwPIBEZjY8f/256fZeA1lGfgBHr6/4d3DNeeMjNEsEsyXL5yghEU v9/Pnv2/0mg0/8fP37 //fv3/8X7778l5VS/g9zg Ctr38ZxFbuZGBjY2P4/O0Xw4/P7xn /v0lCA7JGYb3DbQ/mDEcORzHwK4dxiD7rJVBXpeBYbn9e1DUHwAIUCa5 zIUgFH8tLf1qFZvQ1yVktvWo14VJBLEIwYxSCqWRmJobV2kEf A2CwVIRbhDiYiGEjEwILFwCAS8ahHRGl6tW7r3roPbRMN8S3f9J2c73fOH8OO2pahCtq5GWUjYMNPEL94KJDTD0OlUiAqovfh/pb5xyk9dmudp87RrvR0DWQCTTPzT81n9k/ANrpKqax0rPwWyDoYJ/XsDkmTR74bUP0prLkVgBADIiGEX MovhHhXLahMfqKLiFq9XEIZgW6zXb/tIkPdAdZXNRYsE7lwBIMQ9YmoZZzYCTUoD4VOAUJSyYzdiNx5uDx2psRaKzvCEiS5C8vNWBh1A1uZhIaXT7K6HJoKTOSNc34stih0NUg7LVoa2oDodWgoNDAnJ deDUJjksX93C0j ql3SNQrc8ikmuEafMoyycVHWIJAUk geHBFqxtHR/ynx9ktjZznXqyw02zRcU2hBoCoC0lKNTlQZJl8Ekxc/x8dwnzxQTeYgIu966tY/tc8A/EDZfeU  QXakekBIrv59eEdu 4ziz2K7ztFoll4okSIMO76EX9XbPKsf8pPANFgKR/lchulcAAAAASUVORK5CYIIvKiAgfHhHdjAwfGIyZTA0ZTk5NjI2MWI5OWRkOTRkZjNlZjg2YWMzM2ZiICov" />
</body>
</html>

  

  • 如何使用Photoshop导出『png8 索引透明』
  • [png8 索引透明]产生杂边锯齿原因
  • 如何避免[png8 索引透明]的杂边锯齿

PNG8

§如何使用Photoshop导出『png8索引透明』

结束时的话

……恩,对于图片的总结应该是还没有结束的。这里就只能写到这么多了。还有关于体积更小,效果更好的WebP,以及对于这种图片方案与前端自动化工具的结合还没有纳入实践……嗯,搞不好哪天懒癌治好了就继续写了。

1 赞 收藏 评论

图片 17

  APNG

  这东西是mozilla搞出来的, 它是24位的,而且也是动图,可以容纳1680万种颜色,也是为了取代GIF,但是....也就火狐支持,IE10和chrome,safari全部不行, 如果说gif图片是卡片机的话, APNG就是单反, 测试浏览器是否支持apng格式;

 

  张鑫旭:base64图片参考

  webp的百科链接

  女汉子整理的css知识

  淘宝UED的神文

[Png Alpha透明]格式

8位的png最多支持256(2的8次方)种颜色,8位的png其实8支持不透明、索引透明、alpha透明。

§『png8索引透明』产生杂边锯齿原因

  • 如何使用Fireworks导出[png8 alpha透明]

PNG24

§如何避免『png8索引透明』的杂边锯齿

手机端选择哪种Png

支持2的24次方种颜色,表现为不透明。

§『Png Alpha透明』格式

PC端选择哪种Png

PNG32

§如何使用Photoshop导出『png8索引透明』

Png的格式、颜色种类、位数、透明度、浏览器支持一览

支持2的32次方种颜色,32位是我们最常使用的格式,它是在png在24位的png基础上增加了8位的透明信息,支持不同程度的半透效果。

§手机端选择哪种Png

 

其实PNG8的3种格式不透明、索引透明、alpha透明,正好把png的所有格式都归类好了:

§PC端选择哪种Png

PNG的格式和透明度

这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8、png24、png32

图片 18

其中,在优化面板选择png8,可发现png8包括不透明、索引色透明、Alpha透明3种格式

图片 19

PNG8

8位的PNG最多支持256(2的8次方)种颜色,8位的PNG支持不透明、索引透明、alpha透明

PNG24

支持2的24次方种颜色,表现为不透明

PNG32

支持2的32次方种颜色,32位是我们最常使用的格式,它是在PNG在24位的PNG基础上增加了8位的透明信息,支持不同程度的半透效果

 

其实PNG8的3种格式不透明、索引透明、alpha透明,正好把png的所有格式都归类好了:

  • [PNG 不透明]格式
  • [PNG 索引透明]格式
  • [PNG Alpha透明]格式

有不明白的地方,请往下看~

 

『png 不透明』格式

§Png的格式、颜色种类、位数、透明度、浏览器支持一览

[PNG 不透明]格式

说到不透明,就像jpg格式一样,『png 不透明』只能为不透明,代表格式有:『png8 不透明』和『png24』,导出软件有:Photoshop、Fireworks。不推荐使用『png 不透明』格式,建议用jpg图片来代替它。

可能会有同学会问为什么png24是不透明的,我使用photoshop导出来的就是png24啊?

Png24实际为不透明图片

打开photoshop,任意打开一个带透明的psd文件,存储为web所有格式(ctrl shift alt s),如下面板所示:

『png 索引透明』格式

PNG的格式和透明度

图片 20

不勾选透明度单选框,透明背景会被默认的白色填充

图片 21

导出来的png图片深度为24位,图片为不透明,表现跟jpg图片相似

图片 22

如果勾选了alpha通道,导出来的深度是32位透明图片

图片 23

『png alpha透明』格式

这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8、png24、png32。

从photoshop存储为web所有格式面板中这样理解,png24深度其实为24位,再勾选上8位的alhpa通道,24 8=32,即[png32]

[png24 alpha],这也许是photoshop软件开发者不添加png32位格式的原因,下图为Photoshop存储为web所有格式界面的图片格式选择,并没有png32位的选项~

图片 24

『PNG 不透明』格式

图片 25

 

说到不透明,就像jpg格式一样,『png 不透明』只能为不透明,代表格式有:『png8 不透明』和『png24』,导出软件有:Photoshop、Fireworks。不推荐使用『png 不透明』格式,建议用jpg图片来代替它。

其中,在优化面板选择png8,可发现png8包括不透明、索引色透明、alpha透明3种格式。

[PNG 索引透明]格式

说到索引颜色透明,我们可以了解下什么是索引颜色,『png 索引透明』代表格式有『png8 索引透明』,导出软件有:Photoshop、Fireworks,它总结如下:

  • 挑选一副图片中最有代表性的若干种颜色(通常不超过256种)
  • 只能为不透明或全透明
  • [Png8 索引透明]文件体积小
  • [Png8 索引透明]产生杂边锯齿
  • [Png8 索引透明]支持IE6

可能会有同学会问为什么png24是不透明的,我使用photoshop导出来的就是png24啊?

图片 26

如何使用Photoshop导出[png8 索引透明]

使用Photoshop,存储为web所有格式,按照如下图片的红色边框配置,可导出png8索引透明

注:使用Photoshop导出[png8 索引透明]的效果比Fireworks导出的效果良好,这里不介绍使用Fireworks导出[png8 索引透明]

Png24实际为不透明图片

PNG8

图片 27

打开photoshop,任意打开一个带透明的psd文件,存储为web所有格式(ctrl shift alt s),如下面板所示:

8位的png最多支持256(2的8次方)种颜色,8位的png其实8支持不透明、索引透明、alpha透明。

[png8 索引透明]产生杂边锯齿原因 

[png8 索引透明]只有透明索引颜色,没有半透明索引颜色,下面左侧为带半透明像素的图片,在浏览器中打开不会有锯齿,而右侧图片为全透明或不透明的像素,在浏览器打开后有锯齿

图片 28

由于[png8 索引透明]没有半透明索引颜色,使用Photoshop导出时,原有的半透明转化为不透明,从而产生锯齿。

图片 29

如何避免[png8 索引透明]的杂边锯齿

方法:设置杂边与背景色颜色一致可达到视觉上透明

相信不难理解,利用杂边与背景色一致,可以来满足视觉上的透明,缺点是只能适应一种背景色,在其它背景色下同样会产生杂边

图片 30图片 31

怎么设置呢,打开Photoshop,在存储为web格式面板中进行如下操作:

图片 32

图片 33

PNG24

 

不勾选透明度单选框,图片的透明背景会被默认的白色填充

支持2的24次方种颜色,表现为不透明。

[PNG Alpha透明]格式

说到 Alpha透明,我们可以了解下什么是alpha通道,『png alpha透明』代表格式有『png8 alpha透明』和『png32』,导出软件有Fireworks,总结如下:

  • 一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明、不透明和半透明区域
  • 支持全透明和半透明
  • [Png8 alpha透明]文件体积小
  • [Png8 alpha透明]在IE6下有毛边

图片 34

PNG32

如何使用Fireworks导出[png8 alpha透明]

Firewoks中,在优化面板,按照如下图片的红色边框配置,可导出png8 alpha透明

注:Firewoks支持导出[png8 alpha透明],Photoshop不支持导出[png8 索引透明]

图片 35

 图片 36

 

导出来的png图片深度为24位,图片为不透明,表现跟jpg图片相似

支持2的32次方种颜色,32位是我们最常使用的格式,它是在png在24位的png基础上增加了8位的透明信息,支持不同程度的半透效果。

手机端选择哪种Png

说到手机,考虑流量的问题是必不可少的,所选png需要满足体积小和视觉效果良好,那么哪种png格式符合这2个要求呢?做个实验吧~

不同Png格式测试

测试平台:ios&android webkit浏览器

测试图片:彩种雪碧图1230*82

图片 37

测试内容:同一张雪碧图导出不同png格式的大小、透明度、杂边以及在retina显示屏和普通显示屏下的对比

测试结果:

图片 38

从上图可见png32和png24体积太大了,十分消耗手机用户流量,不是我们选择的范围,那么可以锁定目标在[png8 alpha透明]和[png8 索引透明]中,2者对比,可以看出[png8 alpha]在手机端的支持是良好,可能有童鞋会认为,单凭一张图片也不能下结论~

而经过笔者使用多张雪碧图测试后使用Fireworks导出的[png8 alpha],在手机端的支持是比较好的~不仅文件小,节省流量,而且半透明效果良好

于是,移动端采用[Png8 alpha透明],相信[Png8 alpha透明 ]是未来的一种趋势~

 

图片 39

其实PNG8的3种格式不透明、索引透明、alpha透明,正好把png的所有格式都归类好了:

PC端选择哪种Png

PC端使用哪种png,其实这个话题很早就有结论了,这里简单介绍下

使用png8的方案:

使用photoshop打开雪碧图,分别导出一张png32和一张[png8 索引透明]的图片,高级浏览器使用png32位图片,针对IE6使用[png8 索引透明],并设置[png8 索引透明]杂边与背景色颜色一致可达到视觉上透明

注:为啥使用png32而不使用[png8 alpha透明]?因为pc端的网速大多良好,建议使用表现更佳的png图片,显然png32是最合适的,当然你也可以使用[png8 alpha透明],但是在高清显示器下的质量不如png32

图片 40

.bg{
background:url(global.png?v=20130530) no-repeat;
_background:url(global_png8.png?v=20130530) no-repeat;
}

使用IE滤镜的方案:

比较耗性能,而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案,不要为了IE而把自己搞得像IE~

.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);}

另外还有js和打补丁的办法,这里不做介绍,大家有兴趣可以百度下:IE6支持png24

 

如果勾选了透明度(alpha通道),导出深度为32位的透明图片

§『png不透明』格式

Png的格式、颜色种类、位数、透明度、浏览器支持一览

图片 41

 

图片 42

§『png索引透明』格式

从photoshop存储为web所有格式面板中这样理解,png24深度其实为24位,再勾选上8位的alhpa通道,24 8=32,即『png32』

『png24 alpha』,这也许是photoshop软件开发者不添加png32位格式的原因,下图为Photoshop存储为web所有格式界面的图片格式选择,并没有png32位的选项~

图片 43

『PNG 索引透明』格式

说到索引颜色透明,我们可以了解下什么是索引颜色,『png 索引透明』代表格式有『png8 索引透明』,导出软件有:Photoshop、Fireworks,它的特点总结如下:

挑选一副图片中最有代表性的若干种颜色(通常不超过256种)

只能为不透明或全透明

文件体积小

带有杂边锯齿

支持IE6

如何使用Photoshop导出『png8 索引透明』

使用Photoshop,存储为web所有格式,按照如下图片的红色边框配置,可导出png8索引透明

注:使用Photoshop导出『png8 索引透明』的效果比Fireworks导出的效果良好,这里不介绍使用Fireworks导出『png8 索引透明』

图片 44

『png8 索引透明』产生杂边锯齿原因

『png8 索引透明』只有透明索引颜色,没有半透明索引颜色,下图左侧为带半透明像素的图片,在浏览器中打开不会有锯齿,而右侧图片为全透明或不透明的像素,在浏览器打开后有锯齿。

图片 45

由于『png8 索引透明』没有半透明索引颜色,使用Photoshop导出时,原有的半透明转化为不透明,从而产生锯齿。

图片 46

§『png alpha透明』格式

『PNG不透明』格式

说到不透明,就像jpg格式一样,『png不透明』只能为不透明,代表格式有:『png8不透明』和『png24』,导出软件有:Photoshop、Fireworks。不推荐使用『png不透明』格式,建议用jpg图片来代替它。

可能会有同学会问为什么png24是不透明的,我使用photoshop导出来的就是png24啊?

Png24实际为不透明图片

打开photoshop,任意打开一个带透明的psd文件,存储为web所有格式(ctrl shift alt s),如下面板所示:

图片 47

不勾选透明度单选框,图片的透明背景会被默认的白色填充

图片 48

导出来的png图片深度为24位,图片为不透明,表现跟jpg图片相似

图片 49

如果勾选了透明度(alpha通道),导出深度为32位的透明图片

图片 50

从photoshop存储为web所有格式面板中这样理解,png24深度其实为24位,再勾选上8位的alhpa通道,24 8=32,即『png32』=『png24 alpha』,这也许是photoshop软件开发者不添加png32位格式的原因,下图为Photoshop存储为web所有格式界面的图片格式选择,并没有png32位的选项~

图片 51

『PNG索引透明』格式

说到索引颜色透明,我们可以了解下什么是索引颜色,『png索引透明』代表格式有『png8索引透明』,导出软件有:Photoshop、Fireworks,它的特点总结如下:

§挑选一副图片中最有代表性的若干种颜色(通常不超过256种)

§只能为不透明或全透明

§文件体积小

§带有杂边锯齿

§支持IE6

如何使用Photoshop导出『png8索引透明』

使用Photoshop,存储为web所有格式,按照如下图片的红色边框配置,可导出png8索引透明

注:使用Photoshop导出『png8索引透明』的效果比Fireworks导出的效果良好,这里不介绍使用Fireworks导出『png8索引透明』

图片 52

『png8索引透明』产生杂边锯齿原因

『png8索引透明』只有透明索引颜色,没有半透明索引颜色,下图左侧为带半透明像素的图片,在浏览器中打开不会有锯齿,而右侧图片为全透明或不透明的像素,在浏览器打开后有锯齿。

图片 53

由于『png8索引透明』没有半透明索引颜色,使用Photoshop导出时,原有的半透明转化为不透明,从而产生锯齿。

图片 54

如何避免『png8索引透明』的杂边锯齿

方法:设置杂边与背景色颜色一致可达到视觉上透明。

相信不难理解,利用杂边与背景色一致,可以来满足视觉上的透明,缺点是只能适应一种背景色,在其它背景色下同样会产生杂边。

图片 55

图片 56

怎么设置呢,打开Photoshop,在存储为web格式面板中进行如下操作,在杂边选项中选择与背景色一致的颜色。

图片 57

『PNG Alpha透明』格式

说到alpha透明,我们可以了解下什么是alpha通道,『png alpha透明』代表格式有『png8 alpha透明』和『png32』,导出软件有Fireworks,它的特点总结如下:

§一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明、不透明和半透明区域

§支持全透明和半透明

§『Png8 alpha透明』文件体积小

§『Png8 alpha透明』在IE6下有毛边

如何使用Fireworks导出『png8 alpha透明』

Firewoks中,在优化面板,按照如下图片的红色边框配置,可导出png8 alpha透明。

注:Firewoks支持导出『png8 alpha透明』,Photoshop不支持导出『png8 alpha透明』

图片 58

手机端选择哪种Png

说到手机,考虑流量的问题是必不可少的,所选png需要满足体积小和视觉效果良好,那么哪种png格式符合这2个要求呢?做个实验吧~

不同Png格式测试

测试平台:ios&android webkit浏览器

测试图片:彩种雪碧图1230*82

图片 59

测试内容:同一张雪碧图导出不同png格式的大小、透明度、杂边以及在retina显示屏和普通显示屏下的对比

测试结果:

图片 60

从上图可见png32和png24体积太大了,十分消耗手机用户流量,不是我们选择的范围,那么可以锁定目标在『png8 alpha透明』和『png8索引透明』中,2者对比,可以看出『png8 alpha』在手机端的支持是良好,可能有童鞋会认为,单凭一张图片也不能下结论~

而经过笔者使用多张雪碧图测试后使用Fireworks导出的『png8 alpha』,在手机端的支持是比较好的~不仅文件体积小,节省流量,而且半透明效果良好

于是,移动端采用『Png8 alpha透明』,相信『Png8 alpha透明』是未来的一种趋势~

PC端选择哪种Png

PC端使用哪种png,其实这个话题很早就有结论了,这里简单介绍下。

使用png8的方案:

使用photoshop打开雪碧图,分别导出一张png32和一张『png8索引透明』的图片,高级浏览器使用png32位图片,针对IE6使用『png8索引透明』,并设置『png8索引透明』杂边与背景色颜色一致可达到视觉上透明

注:为啥使用png32而不使用『png8 alpha透明』?因为pc端的网速大多良好,建议使用表现更佳的png图片,显然png32是最合适的,当然你也可以使用『png8 alpha透明』,但是在高清显示器下的质量不如png32

图片 61

.bg{

background:url(global.png?v=20130530) no-repeat;

_background:url(global_png8.png?v=20130530) no-repeat;//IE6使用的背景图

}

使用IE滤镜的方案:

比较耗性能,而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案,不要为了IE而把自己搞得像IE~

.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img. png", sizingMethod="scale");}

另外还有js和打补丁的办法,这里不做介绍,大家有兴趣可以百度下:IE6支持png24

Png的格式、颜色种类、位数、透明度、浏览器支持一览

图片 62

PNG文件使用技巧http://www.siweiw.com/sjinfo6616.html

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:apng图片优点和缺点整理,PNG的使用技巧

关键词: