必赢网址-必赢437-www437com

热门关键词: 必赢网址,必赢437,www437com

制作清晰的透明PNG图片的方法和技巧,一淘前端

PNG是我们经常使用的图片格式,但是你真的了解PNG吗?

 

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

此次一淘前端分享会,一丝冰凉将带大家深入了解你不知道的PNG。首先有三个问题:
什么是 PNG? 
PNG 有哪些特点?
如何优化 PNG?

PNG图片格式特点:

相关技巧教程:Photoshop详细详细解析色彩模式和调色原理Photoshop实例解析蒙版工具的使用技巧Photoshop技巧教程:轻松掌握PS曲线工具

Png的秘密 from jieorlin

      Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg,Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象(在ie6下)。

PNG的格式和透明度

Png的秘密 — 内容简介

    1. PNG 的秘密—— 你真的了解 PNG吗? By一淘 UX 一丝冰凉             旺旺:yisibl
    1. 首先我们来看三个问题:
  • ◆什么是 PNG?
  • ◆PNG 有哪些特点?
  • ◆ 如何优化 PNG?
    1. 一、 什么是 PNG?
  • ◆全称是: 便携式网络图形(Portable Network Graphics) 是一种:无损位图图像文件格式
  • ◆ PNG 诞生于1996年
  • ◆ PNG现行版本是 ISO 国际标准(ISO/ IEC 15948:2003),2003年11月10日成为 W3C 推荐标准。
  •  
    1. 二、PNG 的特点
  • 1). 可以逐次逼近显示: 先描绘出图片轮廓,然后在逐步显示图像 的细节(对应PS里交错选项)
  • 2).支持存储附加文本信息: 图像名称、作者、版权、创作时间、注释 等信息
  • 3).透明性:①布尔透明(索引透明) 只能为不透明或全透明。  ②Alpha 透明 支持全透明和半透明。
    1. PNG各种格式对比
  • 图片 1
    1. PNG各种格式对比 
  • 图片 2
  •  
    1. 万恶的 IE6
  • IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);
  • 缺点:
  • ◆增加额外的CPU和内存消耗
  • ◆不适合img方式插入的图片,不支持背景平铺
  • ◆链接失效,表单无法获 得焦点,解决方法:①使链接元素和表单元素获得 hasLayout ,一般是加上:position:relavtive ,但是当父级元素定义为position:absolute时,此方法会失效②背景层作为独立的容器,并且和内容为同级
    1. IE6 PNG 透明渐进增强
  • 对于带有渐变阴影的按钮:
  • ◆现代浏览器使用 Fireworks 导出带 α 透明 的PNG-8 现代浏览器  IE6 半透明部分表现为全透明
  • ◆ 如果IE6 也需要 半透明效果: Fireworks Photoshop
  • ◆ 然后IE6 通过滤镜实现半透明 
    1. 小结
  • ◆PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道,因此可展现256级透明程度。
  • ◆Photoshop不支持也不能输出PNG8+alpha 透明的PNG,32位PNG输出是由24位PNG 加透明信息形式输出,所以Fireworks对 PNG 支持较好。
  • ◆ 非IE6的浏览器都能正常显示包含透明信息的PNG图片,而IE6在滤镜 的帮助下能够正常展示PNG8+索引透明以及32位的透明PNG图像, 但是对 PNG8+alpha透明的图像支持不够好。
    1. PNG文件的组成 -----  ◆PNG文件署名域为固定的64个字节: 十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4e 47 0d 0a 1a 0a   数据块的结构 = 关键数据块+ 辅助数据块+ 数据块摘要
    1. PNG文件的组成
  • ◆ 1.PNG文件标志,为固定的64个字节: 十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4e 47 0d 0a 1a 0a
  • ◆ 2.文件头数据块IHDR(header chunk)——固定长度13字节
  • ◆ 3.调色板数据块PLTE(palette chunk)
  • ◆4.sBIT,tRNS(存储透明信息)块
等。。
  • ◆ 5.图像数据块IDAT(image data chunk)
  • ◆ 6.图像结束数据IEND(image trailer chunk) ——固定的96个字节: 0x00000000 0x49454e44 0xae426082
    1. 我们可以给PNG”开刀了”
    1. 示例 PNG头部标示
    1. 文件头数据块 IHDR00000008-00000020
    1. 小结
  • ◆PNG优化工具会选择性清除辅助数据块
  • ◆ PNG是基于 LZ77压缩算法压缩的,优化工 具会重新压缩到较大的级别(无损)
    1. PNG,JPG,GIF的应用场景
  • 17. ◆PNG 就是为了取代GIF而生的,除了动画 图片等特殊场景使用,一般推荐使用PNG
    1. PNG与GIF对比
  • 图片 3图片 4
    1. PNG动画
  • ◆ APNG格式是一个非官方的扩展自PNG的 位图动画格式。 9266_7657398_48.png
    1. 运用场景
  • ◆ 什么时候应该使用PNG? 先来看看这样一个图片标题
    1. JPG 80% 12.0 KB PNG-8 256色 5.54 KB 出现噪点
    1. JPG 80% 33.1 KB 失真更为严重 PNG-8 256色 53.6 KB
    1. 小结
  • ◆ 图像颜色数量较少,且基本为纯色或者平滑渐 变色时使用PNG更优(矢量)
  • ◆对于图像颜色丰富或者层次较深的图片采用 JPG更优,例如:人物,风景等写实类拍摄照片
  • ◆ 对于网页中的 背景, 按钮等尽量采用PNG存储, 以保证更好的视觉品质;广告,商品等则可以使 用JPG来存储(此时文件更小,更快的加载)
    1. 设计湿应该怎么做?
  • 掌控像素的虚实: 利用路径调整次像素-改善图像的饱满度
    1. 推荐压缩工具◆ PngOptimizer ()
    1. 推荐压缩工具◆ Pngout ()
    1. 推荐压缩工具◆ 雅虎: Smush.it(
    1. 谢谢!我的博客:  下次见  一淘 UX 一丝冰凉 2012-6-20

原文地址:

      png是一种无损耗的图像格式,这也意味着你可以对png图片做任何操作也不会使  得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式。

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

 PNG在ie中的怪异表现:

图片 5

  1. IE6以下的浏览器支持PNG8的索引透明,但图片必须为全透明,半透明的png8在浏览器下显示为全透明。
  2. Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。

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

由上面可以总结:

图片 6

    (a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。

PNG8

    (b)第二个bug没有什么好的方法解决,只能通过(AlphaImageLoader滤镜和htc)方法来处理。

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

 

PNG24

本文由必赢网址发布于化工塑胶,转载请注明出处:制作清晰的透明PNG图片的方法和技巧,一淘前端

您可能还会对下面的文章感兴趣: